MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的,且它自带路由、主题色,
等功能。
Scaffold通常被用作MaterialApp的子Widget,它会填充可用空间,占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能,例如顶部的appBar,底部的bottomNavigationBar,隐藏的侧边栏drawer等。
一般来说在最外层,都要包一层Scaffold
,让页面更好看。
详见Flutter ignore文件
打开pubspec.yaml
在dependencies下增加
比如,我们增加一个dio网络请求库
注意
":"
后面有一个空格
在 pubspec.yaml 的 dependencies 节点中,新增插件如下:
dependencies:
toast: ^0.1.3
在 lib/main.dart 中导入对应的插件:
import 'package:toast/toast.dart';
调用 Toast.show() 函数提示消息:
// 参数1:提示消息
// 参数2:提示消息多久后自动隐藏
// 参数3:位置
Toast.show("鉴权失败!", context, duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: '导航演示1',
home: new FirstScreen(),
routes: {
'/second': (BuildContext context) => new SecondScreen(),
},
));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: Text('导航页面')),
body: Center(
child: RaisedButton(
child: Text('查看商品详情页面'),
onPressed: () {
/*Navigator.push(context,new MaterialPageRoute(
builder:(context) =>new SecondScreen())
);*/
Navigator.pushNamed(context, "/second");
},
)
)
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('技术胖商品详情页')),
body: Center(child: RaisedButton(
child: RaisedButton(
child: Text('返回'),
onPressed: () {
Navigator.pop(context);
},
)
))
);
}
}
定义了home之后,路由之中不能再定义 “/”
Flutter有个HTTP库,但是功能比较弱,官方推荐使用dio,详见 https://github.com/flutterchina/dio
StatelessWidget 是无状态控件,没有自己的私有数据,是纯展示型的控件
StatefulWidget 是有状态控件,拥有自己的私有数据和业务逻辑
Flutter一般有4个Channel,从不稳定到稳定Channel如下,一般使用stable即可
master:最新代码
dev:从master中经过全面测试的最新版
beta:从dev中抽取上个月比较好的特性,进行外灰测试
stable:从beta分支中,合并外灰测试后的,稳定版
查看当前Flutter版本及Channel
查看Channel
切换Channel
flutter channel stable //切换到指定channel
flutter upgrade //将channel的代码更新到最新
其实大型项目使用手动+借助下面提到的在线转换的方式更加灵活高效
详见 https://flutterchina.club/json/
google官方推荐我们使用shared_preferences进行本地存储。
shared_preferences是Flutter社区开发的一个本地数据存储的插件
final prefs = await SharedPreferences.getInstance();
//set value
prefs.setInt("counter",counter);
final prefs = await SharedPreferences.getInstance();
final counter = prefs.getInt("counter" ?? 0;)
final prefs = await SharedPreferences.getInstance();
prefs.remove("counter");
基于ListView水平和垂直方式滚动的列表
基于ExpansionTile实现可展开的列表
基于GridView实现网格布局
列表下拉刷新与上拉加载更多功能实现
flutter中ListView、ExpansionTile和GridView的学习