主页面设置了ThemeData后,如果子组件想继承它,但是又想有自己的主题特点,需使用copyWith
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// 全局主题
theme: ThemeData(
// 1.亮度
brightness: Brightness.light,
// 2.primarySwatch传入不是Color, 而是MaterialColor(包含了primaryColor和accentColor)
primarySwatch: Colors.red,
// 3.primaryColor: 单独设置导航和TabBar的颜色
primaryColor: Colors.orange,
// 4.accentColor: 单独设置FloatingActionButton\Switch
accentColor: Colors.green,
// 5.Button的主题
buttonTheme: ButtonThemeData(
height: 25,
minWidth: 10,
buttonColor: Colors.yellow
),
// 6.Card的主题
cardTheme: CardTheme(
color: Colors.greenAccent,
elevation: 10
),
// 7.Text的主题
textTheme: TextTheme(
body1: TextStyle(fontSize: 16, color: Colors.red),
body2: TextStyle(fontSize: 20),
display1: TextStyle(fontSize: 14),
display2: TextStyle(fontSize: 16),
display3: TextStyle(fontSize: 18),
display4: TextStyle(fontSize: 20),
)
),
home: MYHomePage(),
);
}
}
class MYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("首页")
),
body: Center(
child: Column(
children: <Widget>[
Text("Hello World"),
Text("Hello World", style: TextStyle(fontSize: 14),),
Text("Hello World", style: Theme.of(context).textTheme.body2,),
Text("Hello World", style: Theme.of(context).textTheme.display3,),
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
title: Text("首页"),
icon: Icon(Icons.home)
),
BottomNavigationBarItem(
title: Text("分类"),
icon: Icon(Icons.category)
)
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (ctx) {
return MYDetailPage();
}
));
},
),
);
}
}
class MYDetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 当前页面想有自己的主题特点:第一:需要用Theme包裹,第二:使用copyWith,不然无法继承前面的brightness 、primarySwatch、buttonTheme、textTheme等等
return Theme(
data: Theme.of(context).copyWith(
primaryColor: Colors.purple
),
child: Scaffold(
appBar: AppBar(
title: Text("详情页"),
backgroundColor: Colors.purple,
),
body: Center(
child: Text("detail pgae"),
),
floatingActionButton: Theme(
// 想要改变这个的主题,这里是特殊情况,
data: Theme.of(context).copyWith(
colorScheme: Theme.of(context).colorScheme.copyWith(
secondary: Colors.pink
)
),
child: FloatingActionButton(
child: Icon(Icons.pets),
onPressed: () {
},
),
),
),
);
}
}
网友评论