Preface
In the previous section, we learned the basic knowledge related to the Flutter life cycle, and learned about the significance of the existence of life cycle functions in Flutter and the callback timing of different life cycle functions. So far, we have completed all the introductory courses related to Flutter. I learned and mastered the use of various common components and the use of routing to complete page switching and transfer data. I also learned a series of related courses such as data storage and network requests in Flutter. This course is from basic to advanced to transition. Let's use the knowledge we have learned to make a curriculum view to consolidate and improve Flutter-related knowledge points so that we can learn and apply them flexibly.
1. Course objectives
- Analyze the components of the curriculum view and dismantle the drawing process
- Class schedule view drawing, data preparation
- Use the widgets you have learned to combine the lesson schedule view
2.Renderings
Let’s first take a look at the rendering of the curriculum view that has been drawn, and then disassemble and analyze the specific implementation process on the rendering, and complete the implementation of the Flutter curriculum view step by step.
From the above renderings, we can analyze that the curriculum view can be decomposed into the following parts. I marked them with different color blocks.
The whole can be divided into three large blocks
- 1 The date and week area enclosed by a blue frame at the top
- 2 The course section index area enclosed by the gray frame on the left
- 3 The course information area surrounded by a green frame in the middle
Let’s take a look at the specific implementation codes of different areas.
3. View split
3.1 Top date and week view
The top date view can be disassembled into GridView+Column. The reason why we choose GridView is because we want to display every item of data in Column equally. GridView sets a single row display, and Colum sets the upper view to be the week and the lower view to be the date. , use a small algorithm to calculate the current date, and then set different styles for the current date to prompt the user.
After analyzing the implementation ideas, I will not explain the specific code in detail. I will post the specific implementation code of the date and week at the top for readers’ reference.
Sunday 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() => PageState();
}
class PageState extends State<SyllabusPage> {
var weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var dateList = [];
var currentWeekIndex = 0;
@override
void initState() {
super.initState();
var monday = 1;
var mondayTime = DateTime.now();
//获取本周星期一是几号
while (mondayTime.weekday != monday) {
mondayTime = mondayTime.subtract(new Duration(days: 1));
}
mondayTime.year; //2020 年
mondayTime.month; //6(这里和js中的月份有区别，js中是从0开始，dart则从1开始，我们无需再进行加一处理) 月
mondayTime.day; //6 日
// nowTime.hour ;//6 时
// nowTime.minute ;//6 分
// nowTime.second ;//6 秒
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("我的课表"),
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("星期",
style: TextStyle(
fontSize: 14, color: Colors.black87)),
SpaceWidget(height: 5),
Text("日期", 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)),
],
),
),
);
}),
),
],
),
);
}
}
After running the code, the effect is as shown below:
3.2 Intermediate class schedule view
The middle class schedule view and the course section guide on the left are processed in a large View. Considering that some mobile phones may not be able to display the entire class schedule view on one screen, the logic I implemented here is
- 1. First wrap the areas numbered 2 and 3 in the picture above into one
SingleChildScrollViewso that the entire View supports sliding up and down.- 2. Then wrap areas 2 and 3
SingleChildScrollViewinRow, 2 is oneGridView, and the overall layout is 1 column and 10 rows, keeping the same height as the class schedule view.- 3. Area 3 is divided into two parts, one is
背景格子the area and the other带背景颜色的课表区域. I still use the entire 3 areas toGridViewimplement,- 4 Here, by default, I let each
课程View即图中标号为4area occupy the size of two course grids, so that there are 5 major classes every day, 7 days a week, soGridViewit needs to be set to 5 rows and 7 columns for 35 items, and then let area 3 follow The two areas on the left have the same height.GridView5. Each Item in Area 3 adopts Stack layout. The bottom layer of view includesColumntwo views with the same heightContainer. Set the border so that it presents a grid style. The top layer is used to display course information and background color. Use the color array value set in advance, randomly pick different values to set different colors each time, and then useCentercomponents to display specific information about the course.- 6 Just set the same background for the course guide view in area 2 on the left, no special processing 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: Colors.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: Colors.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: Colors.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),
),
),
)
],
),
);
}),
)
],
),
),
),
After running the code, the effect of the intermediate course information View is as shown below
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() => PageState();
}
class PageState extends State<SyllabusPage> {
var colorList = [
Colors.red,
Colors.lightBlueAccent,
Colors.grey,
Colors.cyan,
Colors.amber,
Colors.deepPurpleAccent,
Colors.purpleAccent
];
var infoList = ["高等数学-周某某教授@综合楼201", "大学英语-王某某讲师@行政楼501"];
var weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var dateList = [];
var currentWeekIndex = 0;
@override
void initState() {
super.initState();
var monday = 1;
var mondayTime = DateTime.now();
//获取本周星期一是几号
while (mondayTime.weekday != monday) {
mondayTime = mondayTime.subtract(new Duration(days: 1));
}
mondayTime.year; //2020 年
mondayTime.month; //6(这里和js中的月份有区别，js中是从0开始，dart则从1开始，我们无需再进行加一处理) 月
mondayTime.day; //6 日
// nowTime.hour ;//6 时
// nowTime.minute ;//6 分
// nowTime.second ;//6 秒
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("星期",
style: TextStyle(
fontSize: 14, color: Colors.black87)),
SpaceWidget(height: 5),
Text("日期", 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: Colors.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: Colors.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: Colors.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() => "我的课表";
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: [
//底部view可自行扩充
],
),
);
}
The detailed code has been synchronized and updated to my Flutter entry and advanced journey column . Interested readers can check more related codes by themselves:
Warehouse address: View course code in this section of Flutter course bar