今天是2019年12月06号,好久没有写博客的,今天接着学习了Flutter最后一个app项目,向上弹出上拉框。
书是人类进步的阶梯,学习才能进步。
1、首先整个项目的目录如下图所示
2、第一个文件tasks_screen.dart 主要构件主要样式框架
import 'package:flutter/material.dart';
import 'package:todoey_flutter/widgets/tasks_list.dart';
import 'package:todoey_flutter/widgets/task_tile.dart';
import 'package:todoey_flutter/screens/add_task_screen.dart';
class TaskScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlueAccent,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.lightBlueAccent,
child: Icon(Icons.add),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) => AddTaskScreen());
},
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 60.0, left: 30.0, right: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
child: Icon(
Icons.list,
size: 30.0,
color: Colors.lightBlueAccent,
),
backgroundColor: Colors.white,
radius: 30.0,
),
SizedBox(
height: 10.0,
),
Text(
'Todoey',
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
Text(
'12 Tasks',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0))),
child: TaskList(),
),
)
],
));
}
}
2、第一个文件add_task_screen.dart 主要构建向上弹出的页面布局
import 'package:flutter/material.dart';
class AddTaskScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Add Task',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
color: Colors.lightBlueAccent,
),
),
TextField(
autofocus: true,
textAlign: TextAlign.center,
),
FlatButton(
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
color: Colors.lightBlueAccent,
onPressed: () {
//Add our task to the list
},
),
],
),
),
);
}
}
3、第三个文件task_title.dart 用来绘制 主要界面中,每一行的样式和文字
import 'package:flutter/material.dart';
import 'package:todoey_flutter/widgets/tasks_list.dart';
class TaskTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListTile(
title: Text('This is a task.'),
trailing: Checkbox(
value: false,
),
);
}
}
4、第四个文件tasks_list.dart主要用来绘制 向上弹出的界面内部每一行的文字和样式
import 'package:flutter/material.dart';
import 'package:todoey_flutter/widgets/task_tile.dart';
class TaskList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
TaskTile(),
TaskTile(),
TaskTile(),
],
);
}
}
5、运行之后的效果如下图所示: