【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )

文章目录

一、flutter 应用主题

二、完整代码示例

三、相关资源

一、Flutter 应用主题

Flutter 应用主题都封装在 ThemeData 类中 , 在 MaterialApp 的 theme 字段 , 可以设置 ThemeData 主题 , 可设置的选项如下 , 下面的 ThemeData 工厂构造函数中的可选参数就是可以设置的各种主题选项 ;

class ThemeData extends Diagnosticable { factory ThemeData({ Brightness brightness, MaterialColor primarySwatch, Color primaryColor, Brightness primaryColorBrightness, Color primaryColorLight, Color primaryColorDark, Color accentColor, Brightness accentColorBrightness, Color canvasColor, Color scaffoldBackgroundColor, Color bottomAppBarColor, Color cardColor, Color dividerColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, InteractiveInkFeatureFactory splashFactory, Color selectedRowColor, Color unselectedWidgetColor, Color disabledColor, Color buttonColor, ButtonThemeData buttonTheme, ToggleButtonsThemeData toggleButtonsTheme, Color secondaryHeaderColor, Color textSelectionColor, Color cursorColor, Color textSelectionHandleColor, Color backgroundColor, Color dialogBackgroundColor, Color indicatorColor, Color hintColor, Color errorColor, Color toggleableActiveColor, String fontFamily, TextTheme textTheme, TextTheme primaryTextTheme, TextTheme accentTextTheme, InputDecorationTheme inputDecorationTheme, IconThemeData iconTheme, IconThemeData primaryIconTheme, IconThemeData accentIconTheme, SliderThemeData sliderTheme, TabBarTheme tabBarTheme, TooltipThemeData tooltipTheme, CardTheme cardTheme, ChipThemeData chipTheme, TargetPlatform platform, MaterialTapTargetSize materialTapTargetSize, bool applyElevationOverlayColor, PageTransitionsTheme pageTransitionsTheme, AppBarTheme appBarTheme, BottomAppBarTheme bottomAppBarTheme, ColorScheme colorScheme, DialogTheme dialogTheme, FloatingActionButtonThemeData floatingActionButtonTheme, Typography typography, CupertinoThemeData cupertinoOverrideTheme, SnackBarThemeData snackBarTheme, BottomSheetThemeData bottomSheetTheme, PopupMenuThemeData popupMenuTheme, MaterialBannerThemeData bannerTheme, DividerThemeData dividerTheme, ButtonBarThemeData buttonBarTheme, }) }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

如下代码中就设置了 MaterialApp 的主题 ThemeData , brightness 字段设置的是主题模式 , 这里设置的是 Brightness.light 日间模式 ;

primarySwatch 字段设置的是主题的主要颜色 , 这里设置的是蓝色 ;

import 'package:flutter/material.dart'; class ThemePage extends StatefulWidget { @override _ThemePageState createState() => _ThemePageState(); } class _ThemePageState extends State { @override Widget build(BuildContext context) { return MaterialApp( title: "Theme 主题修改", theme: ThemeData( brightness: Brightness.light, primarySwatch: Colors.blue, ), home: , ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

二、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart'; class ThemePage extends StatefulWidget { @override _ThemePageState createState() => _ThemePageState(); } class _ThemePageState extends State { /// 主题模式 Brightness brightness = Brightness.light; @override Widget build(BuildContext context) { return MaterialApp( title: "Theme 主题修改", theme: ThemeData( brightness: brightness, primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text("Theme 主题修改"), ), body: Column( children: [ RaisedButton( onPressed: (){ setState(() { brightness = Brightness.light; }); }, child: Text("切换到日间主题"), ), RaisedButton( onPressed: (){ setState(() { brightness = Brightness.dark; }); }, child: Text("切换到夜间主题"), ), ], ), ), ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

运行效果 :

三、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/

Flutter 插件- : https://pub.dev/packages

Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社区 : https://flutter.cn/

Flutter 实用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文档 : https://dart.cn/

Dart 开发者官网 : https://api.dart.dev/

Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )

博客源码快照 : https://download.csdn.net/download/han1202012/15547438 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

Flutter Git

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。