使用主題可以在App里面共享顏色和字體樣式廉羔。在Flutter里面有兩種方式來使用主題，一種是全局范圍的锦募、一種是使用Theme Widget虑瀑， Theme Widget可以在App的某個(gè)部分使用主題。全局的主題其實(shí)也就是MaterialApp將 Theme 做為根widget了敌厘。
主題定義好后台猴，就可以在Widgets里面使用了。
創(chuàng)建一個(gè)全局主題
MaterialApp 接收一個(gè)theme的參數(shù)俱两，類型為ThemeData饱狂，為App提供統(tǒng)一的顏色和字體。支持的參數(shù)可以在這里查看
new MaterialApp(
title: title,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
),
);
創(chuàng)建一個(gè)局部主題
如果想為某個(gè)頁面使用不同于App的風(fēng)格宪彩，可以使用Theme來覆蓋App的主題.
new Theme(
data: new ThemeData(
accentColor: Colors.yellow,
),
child: new Text('Hello World'),
);
擴(kuò)展App的主題
如果你不想覆蓋所有的樣式休讳，可以繼承App的主題，只覆蓋部分樣式尿孔，使用copyWith方法俊柔。
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new Text('use copyWith method'),
);
使用主題
創(chuàng)建好主題后，要如何使用呢活合，在Widget的構(gòu)造方法里面通過Theme.of(context)方法來調(diào)用雏婶。
Theme.of(context) 會(huì)查找Widget 樹，并返回最近的一個(gè)Theme對(duì)象白指。如果父層級(jí)上有Theme對(duì)象留晚，則返回這個(gè)Theme,如果沒有，就返回App的Theme告嘲。
new Container(
color: Theme.of(context).accentColor,
chile: 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),
),
),
);
}
}
關(guān)于學(xué)習(xí)
flutter的學(xué)習(xí)文章都整理在這個(gè)github倉庫里
