preface
In the last section, we learned the basic knowledge of Flutter lifecycle, the significance of the existence of life cycle functions in Flutter and the timing of the callback of different life cycle functions. So far, we have completed all the introductory courses related to Flutter. I learned how to use various common components and how to use routes to transfer data through page switching. I also learned a series of related courses including data storage and network request in FLUTTER. This course is from the basic to the advanced to the transition. Let’s make a schedule View with the knowledge we have learned, consolidate and improve the relevant knowledge points of Flutter, and make the learning and application of Flutter flexibly.
1. Course Objectives
- Analyze view components of class schedule and disassemble and draw process
- Class schedule VIEW drawing, data preparation
- Combine the view of the class with the widgets you learned
2. The rendering
We first take a look at the renderings of the schedule View already drawn, and then disassemble and analyze the specific implementation process on the renderings to complete the implementation of Flutter schedule View step by step.
From the above renderings, we can conclude that the view can be divided into the following parts, which I mark with different color blocks
The whole can be divided into three blocks
- 1 Date week area circled by blue box at the top
- 2 The section index area enclosed by the gray box on the left
- 3. The course information area enclosed in a green box in the middle
Let’s take a look at the specific implementation code for the different areas
3. The split View
3.1 Top date week View
The top date View can be divided into GridView and Column. The reason why we choose GridView is that we want to ensure that every item in the Column is displayed evenly. The GridView is set to display in a single row, and Colum sets the top View to be the week and the bottom View to be the date. Use small algorithms to calculate the current date, and then set different styles for the current date, to prompt the user.
Analysis of the implementation ideas, specific code I will not elaborate on the top of the date of the week of the specific implementation of the code for readers reference
Week date View code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/custom_widget/widget/SpaceWidget.dart';
/** * desc: * author: xiedong * date: 4/25/21 **/
class SyllabusPage extends StatefulWidget {
@override
State<StatefulWidget> createState(a) => PageState();
}
class PageState extends State<SyllabusPage> {
var weekList = ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday'];
var dateList = [];
var currentWeekIndex = 0;
@override
void initState(a) {
super.initState();
var monday = 1;
var mondayTime = DateTime.now();
// Get what Monday is this week
while(mondayTime.weekday ! = monday) { mondayTime = mondayTime.subtract(new Duration(days: 1));
}
mondayTime.year; / / 2020
mondayTime.month; //6(this is different from the month in JS, where js starts at 0 and dart starts at 1, so we don't need to add one) month
mondayTime.day; / / 6
// nowTime.hour ; / / 6
// nowTime.minute ; / / 6 points
// nowTime.second ; / / 6 seconds
for (int i = 0; i < 7; i++) {
dateList.add(
mondayTime.month.toString() + "/" + (mondayTime.day + i).toString());
if ((mondayTime.day + i) == DateTime.now().day) {
setState(() {
currentWeekIndex = i + 1; }); }}// print('Recent monday '+DateTime.now().day.toString());
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My Schedule"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 8,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 8, childAspectRatio: 1 / 1),
itemBuilder: (BuildContext context, int index) {
return Container(
color: index == this.currentWeekIndex
? Color(0xf7f7f7)
: Colors.white,
child: Center(
child: index == 0
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Week",
style: TextStyle(
fontSize: 14, color: Colors.black87)),
SpaceWidget(height: 5),
Text("Date", style: TextStyle(fontSize: 12)),
],
)
: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(weekList[index - 1],
style: TextStyle(
fontSize: 14,
color: index == currentWeekIndex
? Colors.lightBlue
: Colors.black87)),
SpaceWidget(height: 5),
Text(dateList[index - 1],
style: TextStyle(
fontSize: 12, color: index == currentWeekIndex ? Colors.lightBlue : Colors.black87)), ], ), ), ); }),),],),); }}Copy the codeAfter running the code, it should look like the following:
3.2 Middle Class Schedule View
The middle class schedule view and the left class schedule guide are processed in a large view. Considering that some mobile phones may display incomplete class schedule view in one screen, the logic I have implemented here is
- 1. Wrap the areas numbered 2 and 3 in one
SingleChildScrollViewLet the whole View slide up and down,- 2. Then in
SingleChildScrollViewIn the useRowParcel two and three. Two is oneGridView, the overall layout is 1 column and 10 rows, keeping the same height as view in the class schedule.- 3. Area 3 is further divided into two parts, one is
Background gridRegion, another oneSchedule area with background colorI’m going to use the whole region 3GridViewThe implementation,- 4 here, I default to let each
Course View is marked 4 in the pictureSo there are 5 classes per day, 7 days a week, soGridViewIt needs to be set to 5 rows and 7 columns for 35 items, and then make area 3 highly consistent with area 2 on the left.- 5 area 3
GridViewEach Item in the Stack layout is used, and the view at the bottom is usedColumnIncluding two of the same heightContainerThe top layer tries to display the course information. The background color uses the preset color array value, and randomly selects different values to set different colors each timeCenterComponent displays course specific information.- 6 Left area 2 Course Guide View set the same background, no special treatment is required
The core code is as follows:
Expanded(
child: SingleChildScrollView(
child: Row(
children: [
Expanded(
flex: 1,
child: GridView.builder(
shrinkWrap: true.// physics:ClampingScrollPhysics(),
itemCount: 10,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1, childAspectRatio: 1 / 2),
itemBuilder: (BuildContext context, int index) {
return Container(
// width: 25,
// height:s 80,
child: Center(
child: Text(
(index + 1).toInt().toString(),
style: TextStyle(fontSize: 15),
),
),
decoration: BoxDecoration(
color: Color(0xff5ff5),
// border: border. All (color: color.black12, width: 0.5),
border: Border(
bottom: BorderSide(
color: Colors.black12, width: 0.5),
right: BorderSide(
color: Colors.black12, width: 0.5),),)); }), ), Expanded( flex:7,
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 35,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7, childAspectRatio: 1 / 4),
itemBuilder: (BuildContext context, int index) {
return Container(
child: Stack(
children: [
Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 1,
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
// border: border. All (color: color.black12, width: 0.5),
border: Border(
bottom: BorderSide(
color: Colors.black12,
width: 0.5),
right: BorderSide(
color: Colors.black12,
width: 0.5),
),
)),
),
Flexible(
flex: 1,
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
// border: border. All (color: color.black12, width: 0.5),
border: Border(
bottom: BorderSide(
color: Colors.black12,
width: 0.5),
right: BorderSide(
color: Colors.black12,
width: 0.5(() (() [[()if (index % 5= =0 || index % 5= =1)
Container(
margin: EdgeInsets.all(0.5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: colorList[index % 7],
),
child: Center(
child: Text(
infoList[index % 2],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 11,
letterSpacing: 1() [() [() [() [() }),) [,),),Copy the codeAfter running the code, the middle course information View will look like the following figure
The complete code is as follows:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/custom_widget/widget/SpaceWidget.dart';
/** * desc: * author: xiedong * date: 4/25/21 **/
class SyllabusPage extends StatefulWidget {
@override
State<StatefulWidget> createState(a) => PageState();
}
class PageState extends State<SyllabusPage> {
var colorList = [
Colors.red,
Colors.lightBlueAccent,
Colors.grey,
Colors.cyan,
Colors.amber,
Colors.deepPurpleAccent,
Colors.purpleAccent
];
var infoList = ["Advanced Mathematics - Professor Zhou @ Complex building 201"."College English - Lecturer Wang @ 501 Administration Building"];
var weekList = ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday'];
var dateList = [];
var currentWeekIndex = 0;
@override
void initState(a) {
super.initState();
var monday = 1;
var mondayTime = DateTime.now();
// Get what Monday is this week
while(mondayTime.weekday ! = monday) { mondayTime = mondayTime.subtract(new Duration(days: 1));
}
mondayTime.year; / / 2020
mondayTime.month; //6(this is different from the month in JS, where js starts at 0 and dart starts at 1, so we don't need to add one) month
mondayTime.day; / / 6
// nowTime.hour ; / / 6
// nowTime.minute ; / / 6 points
// nowTime.second ; / / 6 seconds
for (int i = 0; i < 7; i++) {
dateList.add(
mondayTime.month.toString() + "/" + (mondayTime.day + i).toString());
if ((mondayTime.day + i) == DateTime.now().day) {
setState(() {
currentWeekIndex = i + 1; }); }}// print('Recent monday '+DateTime.now().day.toString());
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 8,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 8, childAspectRatio: 1 / 1),
itemBuilder: (BuildContext context, int index) {
return Container(
color: index == this.currentWeekIndex
? Color(0xf7f7f7)
: Colors.white,
child: Center(
child: index == 0
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Week",
style: TextStyle(
fontSize: 14, color: Colors.black87)),
SpaceWidget(height: 5),
Text("Date", style: TextStyle(fontSize: 12)),
],
)
: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(weekList[index - 1],
style: TextStyle(
fontSize: 14,
color: index == currentWeekIndex
? Colors.lightBlue
: Colors.black87)),
SpaceWidget(height: 5),
Text(dateList[index - 1],
style: TextStyle(
fontSize: 12,
color: index == currentWeekIndex
? Colors.lightBlue
: Colors.black87)),
],
),
),
);
}),
),
Expanded(
child: SingleChildScrollView(
child: Row(
children: [
Expanded(
flex: 1,
child: GridView.builder(
shrinkWrap: true.// physics:ClampingScrollPhysics(),
itemCount: 10,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1, childAspectRatio: 1 / 2),
itemBuilder: (BuildContext context, int index) {
return Container(
// width: 25,
// height:s 80,
child: Center(
child: Text(
(index + 1).toInt().toString(),
style: TextStyle(fontSize: 15),
),
),
decoration: BoxDecoration(
color: Color(0xff5ff5),
// border: border. All (color: color.black12, width: 0.5),
border: Border(
bottom: BorderSide(
color: Colors.black12, width: 0.5),
right: BorderSide(
color: Colors.black12, width: 0.5),),)); }), ), Expanded( flex:7,
child: GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 35,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7, childAspectRatio: 1 / 4),
itemBuilder: (BuildContext context, int index) {
return Container(
child: Stack(
children: [
Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 1,
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
// border: border. All (color: color.black12, width: 0.5),
border: Border(
bottom: BorderSide(
color: Colors.black12,
width: 0.5),
right: BorderSide(
color: Colors.black12,
width: 0.5),
),
)),
),
Flexible(
flex: 1,
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
// border: border. All (color: color.black12, width: 0.5),
border: Border(
bottom: BorderSide(
color: Colors.black12,
width: 0.5),
right: BorderSide(
color: Colors.black12,
width: 0.5(() (() [[()if (index % 5= =0 || index % 5= =1)
Container(
margin: EdgeInsets.all(0.5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: colorList[index % 7],
),
child: Center(
child: Text(
infoList[index % 2],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 11,
letterSpacing: 1() [() [() [() [() }), ) ], ), ), ), _bottomView ], ), ); }@override
String pageTitle(a) = >"My Schedule";
Widget _topView = SizedBox(
height: 30,
child: Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 7,
itemBuilder: (BuildContext context, int index) {
return Text("dd"); }),),); Widget _centerView = Expanded( child: GridView.builder( itemCount:63,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7,
),
itemBuilder: (BuildContext context, int index) {
return Container(
// width: 25,
// height: 80,
child: Center(
child: Text(
(index + 1).toString(),
style: TextStyle(fontSize: 15),
),
),
decoration: BoxDecoration(
color: Color(0xff5ff5),
border: Border.all(color: Colors.black12, width: 0.5))); })); Widget _bottomView = SizedBox( height:30,
child: Row(
children: [
// The bottom view is self-extensible],),); }Copy the codeThe detailed code has been updated to my advanced Journey to Flutter column. Interested readers can check out more of the code for this section on Flutter