单个路由换肤(ThemeData),掌握局部覆盖全局
代码相关解释:
1.可以通过局部主题覆盖全局主题。上述代码中的通过Theme组件为第二行图标指定固定颜色(橘黄色)一样。Flutter会经常使用这种方法来自定义子树主题。
2.Flutter是怎么让局部主题覆盖全局主题的?
答:主要是因为Widget中使用主题样式是通过Theme.of(BuildContext context)来获取的。
import 'package:flutter/material.dart';
void main() {
runApp( MaterialApp(
title: 'Flutter gesture',
// home: TutorialHome(),
home: _home(),
));
}
class _home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,//相对于整个应用换肤,可以修改MaterialApp的theme属性
),
home: ThemeRouteDemo(),
);
}
}
class ThemeRouteDemo extends StatefulWidget {
@override
_ThemeRouteDemoState createState() => _ThemeRouteDemoState();
}
class _ThemeRouteDemoState extends State<ThemeRouteDemo> {
Color _themeColor = Colors.green; //当前路由主题色 (改变主题色)
@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('ThemeData实现路由换肤'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//第一行Icon使用主题中的iconTheme
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.favorite),
Icon(Icons.pregnant_woman),
Text(' 颜色跟随主题'),
],
),
//给第二行Icon自定义颜色(固定为某个颜色)
Theme(
data: themeData.copyWith(
iconTheme: themeData.iconTheme.copyWith(
color: Colors.orange,
),
),
child:Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.send),
Icon(Icons.explore),
Text(' 颜色固定橘黄色'),
],
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () =>
setState(() =>
_themeColor = _themeColor==Colors.green ? Colors.orange : Colors.green,
),
child: Icon(Icons.palette),
),
),
);
}
}
跑起来少年!!!
相对于整个应用换肤,可以修改MaterialApp的theme属性。