文章目录
- 1.程序入口
- 2.路由页面创建
- 3.主页面创建
- 4.主界面Home页
- 5.按钮点击事件
- 6.列表界面
- 7.最终效果预览
学习Flutter将近2周了，正好朋友有个Flutter的需求，帮忙做个Demo，感觉最近已经有点入门了，答应了下来，功能主要是做几个按钮，每个按钮对应列表、复选框、弹框等功能。既然做个demo我们这次就讲所有目录文件都放到lib目录下，不具体区分功能了。
1.程序入口
我们先通过命令flutter create flutter_demo创建名为flutter_demo的工程，创建完后cd 到flutter_demo目录下，lib/main.dart文件是程序入口，我们将里面代码全部删除后，输入如下内容：
import 'package:flutter/material.dart';
import 'package:flutter_demo/router.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
theme: ThemeData(
primaryColor: Colors.blue,
),
routes: routes,
initialRoute: 'home',
);
}
}2.路由页面创建
根据main.dart中项目引入import 'package:flutter_demo/router.dart'; 在lib目录下创建router.dart文件
注意flutter_demo对应的是pubspec.yaml文件中的name属性所对应的项目名称值，可自行修改为自己项目名。
lib/router.dart文件代码如下：
import 'package:flutter/material.dart';
import 'package:flutter_demo/home.dart';
import 'package:flutter_demo/list2.dart';
import 'package:flutter_demo/hitch.dart';
import 'package:flutter_demo/list3.dart';
import 'package:flutter_demo/list4.dart';
Map<String, WidgetBuilder> routes = {
'home': (context) => Home(),
'list2': (context) => ListTwo(),
'hitch': (context) => Hitch(),
'list3': (context) => ListThree(),
'list4': (context) => ListFour(),
};3.主页面创建
根据lib/router.dart中的引入import 'package:flutter_demo/home.dart'; import 'package:flutter_demo/list2.dart'; import 'package:flutter_demo/hitch.dart'; import 'package:flutter_demo/list3.dart'; import 'package:flutter_demo/list4.dart'; 在lib下创建五个页面home.dart、list234页面、hitch页面，在main.dart中路由初始页面定义为home,在router.dart中home指向Home方法，即home.dart页面的Home类。
4.主界面Home页
home.dart 页面结构如下：
Home类中的build方法返回了MaterialApp，MaterialApp中的home属性回调了buildApp方法，这个方法返回了一个Container，Container中包了一个Colunm，Column中的children中定义了四个Row，每个Row中有两个Expanded分别对应一个按钮。
5.按钮点击事件
以第一个按钮为例，点击事件如下：
在onPressed点击方法中执行了路由跳转到list2页面，而在router.dart中定义了list2对应页面list2.dart中的ListTwo类。
6.列表界面
列表界面结构如下：
lib/list2.dart代码如下：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ListTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('list1'),
),
body: _buildListData(context));
}
}
Widget _buildListData(context) {
return ListView(
padding: EdgeInsets.all(2),
children: <Widget>[
ListTile(
subtitle: Text('1.Module Information'),
onTap: () => {
Fluttertoast.showToast(
msg: "1",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
ListTile(
subtitle: Text('2.Read Fault Code'),
onTap: () => {
Fluttertoast.showToast(
msg: "2",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
ListTile(
subtitle: Text('3.Clear Fault Code'),
onTap: () => {
Fluttertoast.showToast(
msg: "3",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
ListTile(
subtitle: Text('4.Read Data Stream'),
onTap: () => {
Fluttertoast.showToast(
msg: "4",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
ListTile(
subtitle: Text('5.Actuation Test'),
onTap: () => {
Fluttertoast.showToast(
msg: "5",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
ListTile(
subtitle: Text('6.Special Functions'),
onTap: () => {
Fluttertoast.showToast(
msg: "6",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
ListTile(
subtitle: Text('7.System Identification'),
onTap: () => {
Fluttertoast.showToast(
msg: "7",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0)
},
),
SizedBox(height: 200),
Row(
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.white,
padding: EdgeInsets.all(8),
primary: Colors.white,
elevation: 2,
shadowColor: Colors.orangeAccent),
onPressed: () {
Fluttertoast.showToast(
msg: "Print",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
},
child: Text(
"Print",
style: TextStyle(color: Colors.blue),
),
)),
Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.white,
padding: EdgeInsets.all(8),
primary: Colors.white,
elevation: 2,
shadowColor: Colors.orangeAccent),
onPressed: () {
Fluttertoast.showToast(
msg: "Screenshot",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
},
child: Text(
"Screenshot",
style: TextStyle(color: Colors.blue),
),
)),
Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.white,
padding: EdgeInsets.all(8),
primary: Colors.white,
elevation: 2,
shadowColor: Colors.orangeAccent),
onPressed: () {
Fluttertoast.showToast(
msg: "Back",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
// Navigator.pop(context);
},
child: Text(
"Back",
style: TextStyle(color: Colors.blue),
),
)),
],
),
],
);
}说明list2.dart页面返回一个ListView里面包了几个ListTile，然后加了一个Row行组件，Row组件三等分后每个Expanded中包了一个TextButton按钮，ListTile单项点击调用了onTap方法，onTap中集成了一个Fluttertoast弹窗组件，点击提示，别忘记在pubspec.yaml文件中集成组件fluttertoast: ^8.0.2
然后对各个按钮添加点击事件即可
7.最终效果预览
主界面：
复选列表：
弹框：
最后一个弹框是旋转等待的效果，没找到合适的loading图标，至此这个小demo就完成了，对Flutter组件的使用进一步加深，当然与之前用的ionic相比感觉麻烦了不是一个量级。
