Flutter实战三：列表及弹框小Demo的实现

学习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相比感觉麻烦了不是一个量级。