建立一个flutter登陆App

3 篇文章 0 订阅
3 篇文章 0 订阅

建立一个flutter登陆App

代码结构的生成

  1. 生成flutter项目
  2. 建立各种文件夹
  3. 在jsons文件夹中新建各类json文件
文件夹作用
common一些工具类,如通用方法类、网络接口类、保存全局变量的静态类等
l10n国际化相关的类都在此目录下
modelsJson文件对应的Dart Model类会在此目录下
states保存APP中需要跨组件共享的状态类
routes存放所有路由页面类
widgetsAPP内封装的一些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实战

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值