文章目录
一、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> { @override Widget build(BuildContext context) { return MaterialApp( title: "Theme 主题修改", theme: ThemeData( brightness: Brightness.light, primarySwatch: Colors.blue, ), home: , ); } }
