文章目錄

• 一、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,}) }

如下代碼中就設置了 MaterialApp 的主題 ThemeData , brightness 字段設置的是主題模式 , 這里設置的是 Brightness.light 日間模式 ;

primarySwatch 字段設置的是主題的主要顏色 , 這里設置的是藍色 ;

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

二、完整代碼示例

---

完整代碼示例 :

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

運行效果 :

三、相關資源

---

參考資料 :

• 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】Flutter 应用主题 ( ThemeData | 动态修改主题 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。