instructions

Flutter pre-defines a set of themes that are used wholly or partially by widgets. Therefore, when a predefined theme is changed, all widgets that use these themes will change accordingly. The ##### principle uses inheritedWidgets so that when shared data changes, dependents change as well.

ThemeData properties

Brightness, // Color or color primarySwatch, // If no primaryColor is set, use primaryColor, // Theme main Color, accentColor for navigation bar, // Theme secondary Color, Color for most widgets, such as progress bar, switches, etc. Color cardColor, // cardColor Color dividerColor, // dividing line Color ButtonThemeData buttonTheme, // Button theme Color dialogBackgroundColor,// dialog box background Color String fontFamily, // TextTheme TextTheme,// font theme, IconThemeData iconTheme, // the default style of Icon TargetPlatform platform, // specify the platform, Application specific platform control style Brightness primaryColorBrightness, / / main Color shading Color primaryColorLight, Color primaryColorDark, Brightness accentColorBrightness, Color canvasColor,// Color scaffoldBackgroundColor, Color bottomAppBarColor, Color focusColor, Color hoverColor, Color highlightColor, Color splashColor, InteractiveInkFeatureFactory splashFactory, Color selectedRowColor, Color unselectedWidgetColor, Color disabledColor,// Disable Color buttonColor, ButtonThemeData buttonTheme, Color secondaryHeaderColor, Color textSelectionColor, Color cursorColor, / / the cursor Color 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, CardTheme cardTheme, ChipThemeData chipTheme, TargetPlatform platform, MaterialTapTargetSize materialTapTargetSize, PageTransitionsTheme pageTransitionsTheme, AppBarTheme appBarTheme, BottomAppBarTheme bottomAppBarTheme, ColorScheme colorScheme, DialogTheme dialogTheme, FloatingActionButtonThemeData floatingActionButtonTheme, Typography typography, CupertinoThemeData cupertinoOverrideTheme, SnackBarThemeData snackBarTheme, BottomSheetThemeData bottomSheetTheme,

class _MyHomePageState extends State<MyHomePage> { Color swatchTheme = Colors.lightGreen; int index = 0; @override Widget build(BuildContext context) { ThemeData td = Theme.of(context); return Theme( data: ThemeData( primarySwatch: swatchTheme, iconTheme: IconThemeData(color: swatchTheme), // textTheme: TextTheme(body1: TextStyle(color: swatchTheme)), ), child: Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Icon(icons.add), Icon(icon.delete), Text('theme, uses the default theme '),), theme (data: Td.icontheme. CopyWith (// Copy the theme specified by the parent class and modify the local iconTheme: td.iconTheme. CopyWith (color: color.blue), textTheme: Td.texttheme. CopyWith (body1: TextStyle(color: color.blue)),), // Zi Widget custom icon theme child: Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Icon(icons.add), Icon(icon.delete), Text('theme, using a custom theme ')],),), theme (data: ThemeData(// Fully use the new custom theme primarySwatch: colors.pink, iconTheme: IconThemeData(color: colors.pink), textTheme: TextTheme(body2: TextStyle(color: color.pink)),), // Zi Widget custom icon theme child: Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Icon(icons.add), Icon(icon.delete), Text('theme, using a custom theme ')],),],), floatingActionButton: FloatingActionButton( onPressed: () { setState( () { index++; if (index & 3 == 0) { swatchTheme = Colors.orange; } if (index & 3 == 1) { swatchTheme = Colors.blue; } if (index & 3 == 2) { swatchTheme = Colors.red; }}); }, child: Icon(Icons.add), ), ), ); }}Copy the code
  • Wrap the descendant widget with the Theme
  • Set the theme property data, to customize.
  • The theme of the child widget can override the theme of the parent widget.