建立一个flutter登陆App
代码结构的生成
- 生成flutter项目
- 建立各种文件夹
- 在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
全局变量及共享状态
需要学习
-
Provider包来实现跨组件状态共享
-
持久化是如何实现的ProfileChangeNotifier
-
学会去[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("模板页面"),
),
);
}
}