建立一个flutter登陆App

建立一个flutter登陆App

代码结构的生成

1. 生成flutter项目
2. 建立各种文件夹
3. 在jsons文件夹中新建各类json文件

文件夹	作用
common	一些工具类，如通用方法类、网络接口类、保存全局变量的静态类等
l10n	国际化相关的类都在此目录下
models	Json文件对应的Dart Model类会在此目录下
states	保存APP中需要跨组件共享的状态类
routes	存放所有路由页面类
widgets	APP内封装的一些Widget组件都在该目录下

在pubspec.yaml引入json_model，这是json自动生成对应dart文件的包

dev_dependencies:
  json_model: 0.0.2
  build_runner: ^1.0.0
  json_serializable: ^2.0.0

引入之后记得Pub get，然后在终端输入自动生成命令

flutter packages pub run json_model

如果.dart文件出现报红，找不到.g.dart文件，可以执行

一次性生成

通过在我们的项目根目录下运行:

flutter packages pub run build_runner build

这触发了一次性构建，我们可以在需要时为我们的Model生成json序列化代码，它通过我们的源文件，找出需要生成Model类的源文件（包含@JsonSerializable标注的）来生成对应的.g.dart文件。一个好的建议是将所有Model类放在一个单独的目录下，然后在该目录下执行命令。

虽然这非常方便，但如果我们不需要每次在Model类中进行更改时都要手动运行构建命令的话会更好。

持续生成

使用watcher可以使我们的源代码生成的过程更加方便。它会监视我们项目中文件的变化，并在需要时自动构建必要的文件，我们可以通过flutter packages pub run build_runner watch在项目根目录下运行来启动watcher。只需启动一次观察器，然后它就会在后台运行，这是安全的。

flutter packages pub run build_runner watch

全局变量及共享状态

需要学习

1. Provider包来实现跨组件状态共享

2. 持久化是如何实现的ProfileChangeNotifier

3. 学会去[pub]:https://pub.dev/packages/fluttertoast寻找没有的组件

引入dio

dependencies:
  dio: ^3.0.10

引入国际化

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

引入消息toast

dependencies:
  fluttertoast: ^3.1.3

void showToast(
  String text, {
    gravity: ToastGravity.CENTER,
    toastLength: Toast.LENGTH_SHORT,
  }) {
  Fluttertoast.showToast(
    msg: text,
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    timeInSecForIosWeb: 1,
    backgroundColor: Colors.grey[600], // 灰色背景
    fontSize: 16.0,
  );
}

void showLoading(context, [String text]) {
  text = text ?? "Loading...";
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (context) {
      return Center(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(3.0),
              boxShadow: [
                //阴影
                BoxShadow(
                  color: Colors.black12,
                  //offset: Offset(2.0,2.0),
                  blurRadius: 10.0,
                )
              ]),
          padding: EdgeInsets.all(16),
          margin: EdgeInsets.all(16),
          constraints: BoxConstraints(minHeight: 120, minWidth: 180),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                height: 30,
                width: 30,
                child: CircularProgressIndicator(
                  strokeWidth: 3,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Text(
                  text,
                  style: Theme.of(context).textTheme.bodyText1,
                ),
              ),
            ],
          ),
        ),
      );
    });
}

void showConfirmDialog(BuildContext context,String content, Function confirmCallback) {
  showDialog(
    context: context,
    builder: (context) {
      return new AlertDialog(
        title: new Text("提示"),
        content: new Text(content),
        actions: <Widget>[
          new FlatButton(
            onPressed: () {
              confirmCallback();
              Navigator.of(context).pop();
            },
            child: new Text("确认"),
          ),
          new FlatButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: new Text("取消"),
          ),
        ],
      );
    });
}

如果要在runApp()的时候调用全局类Global的初始化的话，需要在调用前加上

WidgetsFlutterBinding.ensureInitialized();

App启动成功。
附上dart的模板

import 'package:flutter/material.dart';

// dart模板
class ClassNamePage extends StatefulWidget {
  final int id;

  ClassNamePage(
      {this.id});

  _ClassNamePageState createState() => _ClassNamePageState();
}

class _ClassNamePageState extends State<ClassNamePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("模板页面"),
      ),
    );
  }
}

借鉴
flutter中文网
flutter pub资源库
flutter实战