目录
1. 导航返回拦截（WillPopScope）
2. 数据共享（InheritedWidget）
3. 跨组件状态共享（Provider）
4. 颜色和主题（Color、Theme）
5. 异步UI更新（FutureBuilder、StreamBuilder）
Flutter官方并没有对Widget进行官方分类，对其分类主要是为了对Widget进行功能区分。
功能性组件指的是不会影响UI布局及外观的Widget，它们通常具有一定的功能，如FocusScope（焦点控制）、PageStorage（数据存储）、NotificationListener（事件监听）。
1. 导航返回拦截（WillPopScope）
为了避免用户误触返回按钮而导致APP退出，在很多APP中都拦截了用户点击返回键的按钮，然后进行一些防误触判断，比如当用户在某一个时间段内点击两次时，才会认为用户是要退出（而非误触）。
Flutter中可以通过WillPopScope来实现返回按钮拦截。
const WillPopScope({
@required WillPopCallback onWillPop, // 一个回调函数，当用户点击返回按钮时被调用（包括导航返回按钮及Android物理返回按钮）。该回调需要返回一个Future对象，如果返回的Future最终值为false时，则当前路由不出栈(不会返回)；最终值为true时，当前路由出栈退出。
@required Widget child
})
例
为了防止用户误触返回键退出，拦截返回事件，当用户在1秒内点击两次返回按钮时，则退出；如果间隔超过1秒则不退出，并重新记时。
import 'package:flutter/material.dart';
class WillPopScopeTestRoute extends StatefulWidget {
@override
WillPopScopeTestRouteState createState() {
return new WillPopScopeTestRouteState();
}
}
class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
DateTime _lastPressedAt; //上次点击时间
@override
Widget build(BuildContext context) {
return new WillPopScope(
onWillPop: () async {
if (_lastPressedAt == null ||
DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
//两次点击间隔超过1秒则重新计时
_lastPressedAt = DateTime.now();
return false;
}
return true;
},
child: Container(
alignment: Alignment.center,
child: Text("1秒内连续按两次返回键退出"),
)
);
}
}
2. 数据共享（InheritedWidget）
InheritedWidget提供了一种数据在widget树中从上到下传递、共享的方式，和通知Notification的传递方向正好相反。和React中的context功能类似，和逐级传递数据相比，它们能实现组件跨级传递数据。
在应用的根widget中通过InheritedWidget共享了一个数据，那么便可以在任意子widget中来获取该共享的数据。
Flutter SDK中正是通过InheritedWidget来共享Theme（应用主题）和Locale (当前语言环境)信息的。
StatefulWidget的State对象有一个didChangeDependencies回调，它会在“依赖”发生变化时被Flutter Framework调用，在该回调中更新UI。而这个“依赖”指的就是子widget是否使用了父widget中InheritedWidget的数据！如果使用了，则代表子widget依赖有依赖InheritedWidget；如果没有使用则代表没有依赖。
比如当主题、locale(语言)等发生变化时，依赖其的子widget的didChangeDependencies方法将会被调用。
一般来说，子widget很少会重写didChangeDependencies方法，因为在依赖改变后framework也都会调用build()方法。但是，如果需要在依赖改变后执行一些昂贵的操作，比如网络请求，这时最好的方式就是在此方法中执行，这样可以避免每次build()都执行这些昂贵操作。
例
通过继承InheritedWidget，将当前计数器点击次数保存在ShareDataWidget的data属性中
class ShareDataWidget extends InheritedWidget {
final int data; // 需要在子树中共享的数据，保存点击次数
ShareDataWidget({
@required this.data,
Widget child
}) :super(child: child);
// 定义一个便捷方法，方便子树中的widget获取共享数据
static ShareDataWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
}
// 该回调决定当data发生变化时，是否通知子树中依赖data的Widget
@override
bool updateShouldNotify(ShareDataWidget old) {
// 如果返回true，则子树中依赖(build函数中有调用)本widget的子widget的`state.didChangeDependencies`会被调用
return old.data != data;
}
}
实现一个子组件_TestWidget，在其build方法中引用ShareDataWidget中的数据。同时，在其didChangeDependencies() 回调中打印日志：
class _TestWidget extends StatefulWidget {
@override
_TestWidgetState createState() => new _TestWidgetState();
}
class _TestWidgetState extends State<_TestWidget> {
@override
Widget build(BuildContext context) {
// 使用InheritedWidget中的共享数据
return Text(ShareDataWidget
.of(context)
.data
.toString());
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
// 父或祖先widget中的InheritedWidget改变(updateShouldNotify返回true)时会被调用。
// 如果build中没有依赖InheritedWidget，则此回调不会被调用。
print("Dependencies change");
}
}
创建一个按钮，每点击一次，就将ShareDataWidget的值自增
class InheritedWidgetTestRoute extends StatefulWidget {
@override
_InheritedWidgetTestRouteState createState() => new _InheritedWidgetTestRouteState();
}
class _InheritedWidgetTestRouteState extends State<InheritedWidgetTestRoute> {
int count = 0;
@override
Widget build(BuildContext context) {
return Center(
child: ShareDataWidget( //使用ShareDataWidget
data: count,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: _TestWidget(),// 子widget中依赖ShareDataWidget
),
RaisedButton(
child: Text("Increment"),
// 每点击一次，将count自增，然后重新build,ShareDataWidget的data将被更新
onPressed: () => setState(() => ++count),
)
],
),
),
);
}
}
每点击一次按钮，计数器就会自增，控制台就会打印一句日志：Dependencies change
深入了解InheritedWidget
如果只想在_TestWidgetState中引用ShareDataWidget数据，但却不希望在ShareDataWidget发生变化时调用_TestWidgetState的didChangeDependencies()方法，只需要将ShareDataWidget.of()的实现改一下即可：
// 定义一个便捷方法，方便子树中的widget获取共享数据
static ShareDataWidget of(BuildContext context) {
// return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
// 唯一的改动就是获取ShareDataWidget对象的方式，把dependOnInheritedWidgetOfExactType()方法换成了context.getElementForInheritedWidgetOfExactType<ShareDataWidget>().widget
return context.getElementForInheritedWidgetOfExactType<ShareDataWidget>().widget;
}
getElementForInheritedWidgetOfExactType方法的定义：
@override
InheritedElement getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() {
assert(_debugCheckStateIsActiveForAncestorLookup());
final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
return ancestor;
}
dependOnInheritedWidgetOfExactType方法的定义：
@override
InheritedWidget dependOnInheritedWidgetOfExactType({ Object aspect }) {
assert(_debugCheckStateIsActiveForAncestorLookup());
final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[T];
// 多出的部分
if (ancestor != null) {
assert(ancestor is InheritedElement);
return dependOnInheritedElement(ancestor, aspect: aspect) as T;
}
_hadUnsatisfiedDependencies = true;
return null;
}
可以看到，dependOnInheritedWidgetOfExactType() 比 getElementForInheritedWidgetOfExactType()多调了dependOnInheritedElement方法。
dependOnInheritedElement方法的定义：
@override
InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object aspect }) {
assert(ancestor != null);
_dependencies ??= HashSet<InheritedElement>();
_dependencies.add(ancestor);
ancestor.updateDependencies(this, aspect);
return ancestor.widget;
}
可以看到dependOnInheritedElement方法中主要是注册了依赖关系！所以在调用dependOnInheritedWidgetOfExactType()时，InheritedWidget和依赖它的子孙组件关系便完成了注册，之后当InheritedWidget发生变化时，就会更新依赖它的子孙组件，也就是会调这些子孙组件的didChangeDependencies()方法和build()方法。而当调用的是 getElementForInheritedWidgetOfExactType()时，由于没有注册依赖关系，所以之后当InheritedWidget发生变化时，就不会更新相应的子孙Widget。
3. 跨组件状态共享（Provider）
状态管理，一般的原则是：如果状态是组件私有的，则应该由组件自己管理；如果状态要跨组件共享，则该状态应该由各个组件共同的父元素来管理。
全局事件总线EventBus：
一个观察者模式的实现。通过它就可以实现跨组件状态同步：状态持有方（发布者）负责更新状态，状态使用方（观察者）监听状态改变事件来执行一些操作。
定义事件：
enum Event{
login,
... //省略其它事件
}
登录页：
// 登录状态改变后发布状态改变事件
bus.emit(Event.login);
依赖登录状态的页面：
@override
void initState() {
// 订阅登录状态改变事件
bus.on(Event.login,onLogin);
super.initState();
}
@override
void dispose() {
// 取消订阅
bus.off(Event.login,onLogin);
super.dispose();
}
void onLogin(e){
// 登录状态变化处理逻辑
}
通过上述观察者模式来实现跨组件状态共享有一些明显的缺点：
1. 必须显式定义各种事件，不好管理。
2. 订阅者必须需显式注册状态改变回调，也必须在组件销毁时手动去解绑回调以避免内存泄露。
更好的跨组件状态管理方式: InheritedWidget。
将需要跨组件共享的状态保存在InheritedWidget中，然后在子组件中引用InheritedWidget，当InheritedWidget数据发生变化时，可以自动更新依赖它的子孙组件。
Provider库正是基于InheritedWidget实现的一套跨组件状态共享解决方案。
Model变化后会自动通知ChangeNotifierProvider订阅者，ChangeNotifierProvider内部会重新构建InheritedWidget，而依赖该InheritedWidget的子孙Widget就会更新。
使用Provider的好处：
1. 业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。
2. 数据改变的消息传递被屏蔽了，无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了。
3. 在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化代码逻辑，降低出错的概率，提高开发效率。
首先，需要一个保存需要跨组件共享数据的InheritedWidget。
由于具体业务数据类型不可预期，为了通用性，使用泛型，定义一个通用的InheritedProvider类，它继承自InheritedWidget。
class InheritedProvider<T> extends InheritedWidget {
InheritedProvider({@required this.data, Widget child}) : super(child: child);
// 共享状态使用泛型
final T data;
@override
bool updateShouldNotify(InheritedProvider<T> old) {
// 在此简单返回true，则每次更新都会调用依赖其的子孙节点的`didChangeDependencies`。
return true;
}
}
接下来，需要做的就是在数据发生变化的时候来重新构建InheritedProvider。
数据发生变化可以使用eventBus来进行事件通知（不推荐），也可以使用ChangeNotifier类（继承自Listenable，实现了一个Flutter风格的发布者-订阅者模式）。
将要共享的状态放到一个Model类中，然后让它继承自ChangeNotifier，这样当共享的状态改变时，只需要调用notifyListeners() 来通知订阅者，然后由订阅者来重新构建InheritedProvider。
/*
ChangeNotifier定义大致如下：
class ChangeNotifier implements Listenable {
List listeners=[];
@override
void addListener(VoidCallback listener) {
// 添加监听器
listeners.add(listener);
}
@override
void removeListener(VoidCallback listener) {
// 移除监听器
listeners.remove(listener);
}
void notifyListeners() {
// 通知所有监听器，触发所有监听器回调
listeners.forEach((item)=>item());
}
... // 省略无关代码
}
*/
订阅者
class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget {
ChangeNotifierProvider({
Key key,
this.data,
this.child,
});
final Widget child;
final T data;
// 定义了一个of()静态方法供子类方便获取Widget树中的InheritedProvider中保存的共享状态
static T of<T>(BuildContext context) {
final type = _typeOf<InheritedProvider<T>>();
final provider = context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>();
return provider.data;
}
@override
_ChangeNotifierProviderState<T> createState() => _ChangeNotifierProviderState<T>();
}
// 主要作用就是监听到共享状态改变时重新构建Widget树。
class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>> {
void update() {
// 如果数据发生变化（model类调用了notifyListeners），重新构建InheritedProvider
setState(() => {
});
}
@override
void didUpdateWidget(ChangeNotifierProvider<T> oldWidget) {
// 当Provider更新时，如果新旧数据不"=="，则解绑旧数据监听，同时添加新数据监听
if (widget.data != oldWidget.data) {
oldWidget.data.removeListener(update);
widget.data.addListener(update);
}
super.didUpdateWidget(oldWidget);
}
@override
void initState() {
// 给model添加监听器
widget.data.addListener(update);
super.initState();
}
@override
void dispose() {
// 移除model的监听器
widget.data.removeListener(update);
super.dispose();
}
@override
Widget build(BuildContext context) { // 重新执行该build方法widget.child不会去更新
return InheritedProvider<T>(
data: widget.data,
child: widget.child,
);
}
}
通过一个购物车的例子来使用上面这些类
向购物车中添加新商品时总价更新
定义一个Item类，用于表示商品信息：
class Item {
Item(this.price, this.count);
double price; // 商品单价
int count; // 商品份数
//... 省略其它属性
}
定义一个保存购物车内商品数据的CartModel类:
// CartModel即要跨组件共享的model类
class CartModel extends ChangeNotifier {
// 用于保存购物车中商品列表
final List<Item> _items = [];
// 禁止改变购物车里的商品信息
UnmodifiableListView<Item> get items => UnmodifiableListView(_items);
// 购物车中商品的总价
double get totalPrice =>
_items.fold(0, (value, item) => value + item.count * item.price);
// 将 [item] 添加到购物车。这是唯一一种能从外部改变购物车的方法。
void add(Item item) {
_items.add(item);
// 通知监听器（订阅者），重新构建InheritedProvider， 更新状态。
notifyListeners();
}
}
构建示例页面：
class ProviderRoute extends StatefulWidget {
@override
_ProviderRouteState createState() => _ProviderRouteState();
}
class _ProviderRouteState extends State<ProviderRoute> {
@override
Widget build(BuildContext context) {
return Center(
child: ChangeNotifierProvider<CartModel>(
data: CartModel(),
child: Builder(builder: (context) {
return Column(
children: <Widget>[
Builder(builder: (context){
var cart=ChangeNotifierProvider.of<CartModel>(context);
return Text("总价: ${cart.totalPrice}");
}),
Builder(builder: (context){
print("RaisedButton build");
return RaisedButton(
child: Text("添加商品"),
onPressed: () {
// 给购物车中添加商品，添加后总价会更新
ChangeNotifierProvider.of<CartModel>(context).add(Item(20.0, 1));
},
);
}),
],
);
}),
),
);
}
}
每次点击”添加商品“按钮，总价就会增加20
就这个例子来看，只是更新同一个路由页中的一个状态，使用ChangeNotifierProvider的优势并不明显，但是如果是做一个购物APP呢？由于购物车数据是通常是会在整个APP中共享的，比如会跨路由共享。如果将ChangeNotifierProvider放在整个应用的Widget树的根上，那么整个APP就可以共享购物车的数据了，这时ChangeNotifierProvider的优势将会非常明显。
上面实现的ChangeNotifierProvider是有两个明显缺点：代码组织问题和性能问题
先看一下构建显示总价Text的代码：
Builder(builder: (context){
var cart=ChangeNotifierProvider.of<CartModel>(context);
return Text("总价: ${cart.totalPrice}");
})
这段代码有两点可以优化：
1. 需要显式调用ChangeNotifierProvider.of，当APP内部依赖CartModel很多时，这样的代码将很冗余。
2. 语义不明确；由于ChangeNotifierProvider是订阅者，那么依赖CartModel的Widget自然就是订阅者，其实也就是状态的消费者，如果用Builder 来构建，语义就不是很明确；如果能使用一个具有明确语义的Widget，比如就叫Consumer，这样最终的代码语义将会很明确，只要看到Consumer，就知道它是依赖某个跨组件或全局的状态。
为了优化这两个问题，可以封装一个Consumer Widget
代码组织问题
// 这是一个便捷类，会获得当前context和指定数据类型的Provider
class Consumer<T> extends StatelessWidget {
Consumer({
Key key,
@required this.builder,
this.child,
}) : assert(builder != null),
super(key: key);
final Widget child;
final Widget Function(BuildContext context, T value) builder;
@override
Widget build(BuildContext context) {
return builder(
context,
ChangeNotifierProvider.of<T>(context), // 自动获取Model
);
}
}
Consumer实现非常简单，它通过指定模板参数，然后再内部自动调用ChangeNotifierProvider.of获取相应的Model，并且Consumer这个名字本身也是具有确切语义（消费者）。现在上面的代码块可以优化为如下这样：
Consumer<CartModel>(
builder: (context, cart)=> Text("总价: ${cart.totalPrice}");
)
性能问题
在构建”添加按钮“的代码处存在性能问题：
点击”添加商品“按钮后，由于购物车商品总价会变化，所以显示总价的Text更新是符合预期的，但是”添加商品“按钮本身没有变化，是不应该被重新build的。
如何避免这不必要重构呢？既然按钮重新被build是因为按钮和InheritedWidget建立了依赖关系，那么只要使用getElementForInheritedWidgetOfExactType()打破或解除这种依赖关系就可以了。
所以只需要将ChangeNotifierProvider.of的实现改为下面这样即可：
// 添加一个listen参数，表示是否建立依赖关系
static T of<T>(BuildContext context, {bool listen = true}) {
final type = _typeOf<InheritedProvider<T>>();
final provider = listen
? context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>()
: context.getElementForInheritedWidgetOfExactType<InheritedProvider<T>>()?.widget
as InheritedProvider<T>;
return provider.data;
}
然后将调用部分代码改为：
Column(
children: <Widget>[
Consumer<CartModel>(
builder: (BuildContext context, cart) =>Text("总价: ${cart.totalPrice}"),
),
Builder(builder: (context) {
print("RaisedButton build");
return RaisedButton(
child: Text("添加商品"),
onPressed: () {
// listen 设为false，不建立依赖关系
ChangeNotifierProvider.of<CartModel>(context, listen: false)
.add(Item(20.0, 1));
},
);
})
],
)
class HelloModel extends Model{
int _count=0;
int get count=>_count;
void increaseCount(){
_count++;
notifyListeners();
}
}
class HelloPageWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return ScopedModel(
model: HelloModel(),
child: Scaffold(
appBar: AppBar(
title: Text('hello'),
elevation: 1.0,
),
body: HelloWidget(),
floatingActionButton: ScopedModelDescendant<HelloModel>(
rebuildOnChange: false, // 不需要重建
builder: (context,_,model)=>FloatingActionButton(
child: Icon(Icons.add),
onPressed: model.increaseCount,
),
),
),
);
}
class HelloWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return HellWorldWidget();
}
}
class HellWorldWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
return ScopedModelDescendant<HelloModel>(builder:(context,_,model)=>ActionChip(
label: Text('${model.count}'),
onPressed: model.increaseCount,
));
}
}
4. 颜色和主题（Color、Theme）
显示器颜色是由红、绿、蓝三基色组成，每种颜色占8比特：
0-7蓝色
8-15绿色
16-23红色
24-31Alpha (不透明度)
Flutter的Color类中，颜色以一个int值保存。
// 如果颜色固定可以直接使用整数值
Color(0xffdc380d);
将颜色字符串转成Color对象：
var c = "dc380d"; // 颜色是一个字符串变量
Color(int.parse(c,radix:16)|0xFF000000) // 通过位运算符将Alpha设置为FF
Color(int.parse(c,radix:16)).withAlpha(255) // 通过方法将Alpha设置为FF
Colors.black26
例
实现一个背景颜色和Title可以自定义的导航栏，并且背景色为深色时应该让Title显示为浅色；背景色为浅色时，Title显示为深色。
要实现这个功能，就需要来计算背景色的亮度，然后动态来确定Title的颜色。Color类中提供了一个computeLuminance()方法，它可以返回一个[0-1]的一个值，数字越大颜色就越浅，可以根据它来动态确定Title的颜色.
class NavBar extends StatelessWidget {
final String title;
final Color color; //背景颜色
NavBar({
Key key,
this.color,
this.title,
});
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(
minHeight: 52,
minWidth: double.infinity,
),
decoration: BoxDecoration(
color: color,
boxShadow: [
//阴影
BoxShadow(
color: Colors.black26,
offset: Offset(0, 3),
blurRadius: 3,
),
],
),
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
//根据背景色亮度来确定Title颜色
color: color.computeLuminance() < 0.5 ? Colors.white : Colors.black,
),
),
alignment: Alignment.center,
);
}
}
Column(
children: <Widget>[
//背景为蓝色，则title自动为白色
NavBar(color: Colors.blue, title: "标题"),
//背景为白色，则title自动为黑色
NavBar(color: Colors.white, title: "标题"),
]
)
MaterialColor
实现Material Design中的颜色的类，它包含一种颜色的10个级别的渐变色。
MaterialColor通过"[]"运算符的索引值来代表颜色的深度，有效的索引有：50，100，200，…，900，数字越大，颜色越深。
MaterialColor的默认值为索引等于500的颜色。
例：
Colors.blue是预定义的一个MaterialColor类对象，定义如下：
static const MaterialColor blue = MaterialColor(
_bluePrimaryValue,
<int, Color>{
50: Color(0xFFE3F2FD),
100: Color(0xFFBBDEFB),
200: Color(0xFF90CAF9),
300: Color(0xFF64B5F6),
400: Color(0xFF42A5F5),
500: Color(_bluePrimaryValue),
600: Color(0xFF1E88E5),
700: Color(0xFF1976D2),
800: Color(0xFF1565C0),
900: Color(0xFF0D47A1),
},
);
static const int _bluePrimaryValue = 0xFF2196F3;
Colors.blue[50]到Colors.blue[900]的色值从浅蓝到深蓝渐变
使用主题可以为共享颜色和字体样式。
ThemeData({
Brightness brightness, // 亮度（深色还是浅色）
MaterialColor primarySwatch, // 主题色，它是主题颜色的一个样本色。通过这个样本色可以在一些条件下生成一些其它的属性，例如，如果没有指定primaryColor，并且当前主题不是深色主题，那么primaryColor就会默认为primarySwatch指定的颜色。还有一些相似的属性如accentColor 、indicatorColor等也会受primarySwatch影响。
Color primaryColor, // 主色，决定导航栏颜色
Color accentColor, // 次级色（辅助色），决定大多数Widget的颜色，如进度条、开关等。
Color cardColor, // 卡片颜色
Color dividerColor, // 分割线颜色
ButtonThemeData buttonTheme, // 按钮的主题
Color buttonColor, // 按钮的颜色
Color cursorColor, // 输入框光标颜色
Color dialogBackgroundColor,// 对话框背景颜色
String fontFamily, // 文字字体
TextTheme textTheme,// 字体主题，包括标题title、body等文字样式
IconThemeData iconTheme, // Icon的默认样式
TargetPlatform platform, // 指定平台，应用特定平台控件风格
...
})
/*
const ButtonThemeData({
this.textTheme = ButtonTextTheme.normal,
this.minWidth = 88.0,
this.height = 36.0,
EdgeInsetsGeometry? padding,
ShapeBorder? shape,
this.layoutBehavior = ButtonBarLayoutBehavior.padded,
this.alignedDropdown = false,
Color? buttonColor,
Color? disabledColor,
Color? focusColor,
Color? hoverColor,
Color? highlightColor,
Color? splashColor,
this.colorScheme,
MaterialTapTargetSize? materialTapTargetSize,
})
BeveledRectangleBorder、StadiumBorder 继承自 OutlinedBorder 继承自 ShapeBorder
const OutlinedBorder({ this.side = BorderSide.none })
const BeveledRectangleBorder({
BorderSide side = BorderSide.none,
this.borderRadius = BorderRadius.zero,
})
const StadiumBorder({ BorderSide side = BorderSide.none })
*/
可以通过ThemeData来自定义应用主题。
Material组件需要遵守相应的设计规范，而这些规范可自定义部分都定义在ThemeData中了。设计规范中有些是不能自定义的，如导航栏高度，ThemeData只包含了可自定义部分。
Material组件库里很多组件都使用了主题数据，如导航栏颜色、标题字体、Icon样式等。定义一个主题后，可以在创建的Widgets中使用它，Flutter提供的Material Widgets将使用该主题为AppBars、Buttons、Checkboxes等设置背景颜色和字体样式。
1、全局主题
由应用程序根MaterialApp创建的Theme。
new MaterialApp(
title: title,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
);
2、局部主题
方式1（创建新ThemeData）
new Theme(
data: new ThemeData(
accentColor: Colors.yellow,
),
child: new FloatingActionButton(
onPressed: () {},
child: new Icon(Icons.add),
),
);
方式2（扩展父主题）
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
);
Theme组件可以为Material APP定义主题数据。
Theme内会使用InheritedWidget来为其子树共享样式数据。
在组件build方法中，可以通过Theme.of(BuildContext context)方法来获取当前的ThemeData。
该方法定义如下（简化后的代码，非源码）：
static ThemeData of(BuildContext context, { bool shadowThemeOnly = false }) {
// context.dependOnInheritedWidgetOfExactType会在widget树中从当前位置向上查找第一个类型为_InheritedTheme的widget，所以局部主题可以覆盖全局主题。
return context.dependOnInheritedWidgetOfExactType<_InheritedTheme>().theme.data
}
使用：
new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);
例
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appName = 'Custom Themes';
return new MaterialApp(
title: appName,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
),
home: new MyHomePage(
title: appName,
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key key, @required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Center(
child: new Container(
color: Theme.of(context).accentColor,
child: new Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
),
);
}
}
例
本示例是对单个路由换肤，如果想要对整个应用换肤，则可以去修改MaterialApp的theme属性。
class ThemeTestRoute extends StatefulWidget {
@override
_ThemeTestRouteState createState() => new _ThemeTestRouteState();
}
class _ThemeTestRouteState extends State<ThemeTestRoute> {
Color _themeColor = Colors.teal; //当前路由主题色
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Theme(
data: ThemeData(
primarySwatch: _themeColor, //用于导航栏、FloatingActionButton的背景色等
iconTheme: IconThemeData(color: _themeColor) //用于Icon颜色
),
child: Scaffold(
appBar: AppBar(title: Text("主题测试")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//第一行Icon使用主题中的iconTheme
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text(" 颜色跟随主题")
]
),
// 通过局部主题覆盖全局主题
//为第二行Icon自定义颜色（固定为黑色)
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(
color: Colors.black
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.airport_shuttle),
Text(" 颜色固定黑色")
]
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => //切换主题
setState(() =>
_themeColor =
_themeColor == Colors.teal ? Colors.blue : Colors.teal
),
child: Icon(Icons.palette)
),
),
);
}
}
5. 异步数据更新UI（FutureBuilder、StreamBuilder）
很多时候会依赖一些异步数据来动态更新UI：
1. 在打开一个页面时需要先从互联网上获取数据，在获取数据的过程中显示一个加载框，等获取到数据时再渲染页面；
2. 想展示Stream（比如文件流、互联网数据接收流）的进度。
FutureBuilder会依赖一个Future，它会根据所依赖的Future的状态来动态构建自身。
FutureBuilder({
this.future,
this.initialData,
@required this.builder,
})
说明：
1. future
FutureBuilder依赖的Future，通常是一个异步耗时任务。
2. initialData
初始数据，用户设置默认数据。
3. builder
Widget构建器，会在Future执行的不同阶段被多次调用；
构建器签名如下：
// FutureBuilder的builder构建器签名和StreamBuilder的builder是相同的。
// snapshot会包含当前异步任务的状态信息及结果信息 ，比如可以通过snapshot.connectionState获取异步任务的状态信息、通过snapshot.hasError判断异步任务是否有错误等等。
Function (BuildContext context, AsyncSnapshot snapshot)
例
实现一个路由，当该路由打开时从网上获取数据，获取数据时弹一个加载框；获取结束时，如果成功则显示获取到的数据，如果失败则显示错误。
Future<String> mockNetworkData() async {
return Future.delayed(Duration(seconds: 2), () => "我是从互联网上获取的数据");
}
...
Widget build(BuildContext context) {
return Center(
child: FutureBuilder<String>(
future: mockNetworkData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
// 请求中
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child:Text('加载中...'),
);
}
// 请求已结束
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
// 请求失败，显示错误
return Text("Error: ${snapshot.error}");
} else {
// 请求成功，显示数据
return Text("Contents: ${snapshot.data}");
}
} else {
// 请求未结束，显示loading
return CircularProgressIndicator();
}
},
),
);
}
ConnectionState是一个枚举类，定义如下：
enum ConnectionState {
/// 当前没有异步任务，比如[FutureBuilder]的[future]为null时
none,
/// 异步任务处于等待状态
waiting,
/// Stream处于激活状态（流上已经有数据传递了），对于FutureBuilder没有该状态。
/// ConnectionState.active只在StreamBuilder中才会出现。
active,
/// 异步任务已经终止.
done,
}
在Dart中Stream也是用于接收异步事件数据，和Future不同的是，它可以接收多个异步操作的结果，它常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等。
StreamBuilder正是用于配合Stream来展示流上事件（数据）变化的UI组件。
StreamBuilder({
Key key,
this.initialData, // 初始数据
Stream<T> stream, // 异步获取数据
@required this.builder, // 获取到结果后的builder
})
例
创建一个计时器的示例：每隔1秒，计数加1
Stream<int> counter() {
return Stream.periodic(Duration(seconds: 1), (i) {
return i;
});
}
Widget build(BuildContext context) {
return StreamBuilder<int>(
stream: counter(), //
builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('没有Stream');
case ConnectionState.waiting:
return Text('等待数据...');
case ConnectionState.active:
return Text('active: ${snapshot.data}');
case ConnectionState.done:
return Text('Stream已关闭');
}
return null; // unreachable
},
);
}
class TestWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return TestWidgetState();
}
}
class TestWidgetState extends State<TestWidget>{
StreamSubscription _streamSubscription;
@override
void initState() {
super.initState();
Stream<String> _helloStream=Stream.fromFuture(fetchData());
_streamSubscription=_helloStream.listen(onData,onError:onError,onDone:onDone); // 有数据后、出错后、完成后回调
}
void onDone(){
print('完成'); // 最终都会执行
}
void onError(error){
print('$error');
}
void onData(String data){
print('$data');
}
Future<String> fetchData() async{
await Future.delayed(Duration(seconds: 5)); // 延迟5s
//
// throw '出错了';
return 'hello';
}
// 暂停订阅
void _pauseStream(){
_streamSubscription.pause();
}
// 恢复订阅
void _resumeStream(){
_streamSubscription.resume();
}
// 取消订阅,取消后无法恢复
void _cancelStream(){
_streamSubscription.cancel();
}
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('pause'),
onPressed: _pauseStream,
),
FlatButton(
child:Text('resume'),
onPressed: _resumeStream,
),
FlatButton(
child:Text('cancel'),
onPressed: _cancelStream,
),
],
),
),
);
}
}
使用StreamController
StreamController<String> _streamController;
@override
void initState() {
super.initState();
/*
Stream<String> _helloStream=Stream.fromFuture(fetchData());
_streamSubscription=_helloStream.listen(onData,onError:onError,onDone:onDone);
*/
_streamController=StreamController<String>();
_streamSubscription=_streamController.stream.listen(onData,onError:onError,onDone:onDone); // 有数据后、出错后、完成后回调
}
@override
void dispose() {
super.dispose();
// 关闭stram
_streamController.close();
}
// 向stram中添加数据
void _addDataToStream() async{
String data=await fetchData();
_streamController.add(data);
}
使用StreamSink
StreamSink _streamSink;
_streamSink=_streamController.sink;
// 向stram中添加数据
void _addDataToStream() async{
String data=await fetchData();
// _streamController.add(data);
_streamSink.add(data);
}
多次订阅
_streamController.stream.listen(onTwoData,onError:onError,onDone:onDone);// 有数据后、出错后、完成后回调
void onTwoData(String data){
print('two： $data');
}
例
class HelloBloc {
int _count=0;
//
final _streamActionController=StreamController<int>();
StreamSink<int> get countSink=>_streamActionController.sink;
//
final _streamController=StreamController<int>();
Stream<int> get count=>_streamController.stream;
HelloBloc(){
_streamActionController.stream.listen(onData);
}
void onData(int data){
print('$data');
_count=data+_count;
_streamController.add(_count);
}
void dispose(){
_streamActionController.close();
_streamController.close();
}
void log() {
print('bloc');
}
}
class DataProviderWidget extends InheritedWidget {
final Widget child;
final HelloBloc dataBlock;
DataProviderWidget({
this.child,
this.dataBlock,
});
// 定义一个便捷方法，方便子树中的widget获取共享数据
static DataProviderWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<DataProviderWidget>();
}
@override
bool updateShouldNotify(DataProviderWidget old) {
// 如果返回true，则子树中某子widget依赖本widget的dataBlock,则子widget的`state.didChangeDependencies`会被调用
return true;
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.yellow,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DataProviderWidget(
child: Scaffold(
body: TestWidget(),
),
dataBlock: HelloBloc(),
);
}
}
class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
HelloBloc _bloc = DataProviderWidget.of(context).dataBlock;
return Center(
child: StreamBuilder(
initialData: 0,
stream: _bloc.count,
builder: (context,snapshot){
return ActionChip(
label: Text('点击 ${snapshot.data}'),
onPressed: () {
_bloc.log();
_bloc.countSink.add(1);
},
);
},
),
);
}
}
