Dart & Flutter 開發技巧 8-14
966
2025-03-31
【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
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
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小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
