[shutter] shutter application theme (themedata | dynamic modification theme)

One 、Flutter Application theme

---

Flutter Application themes are encapsulated in ThemeData Class , stay MaterialApp Of theme Field , You can set ThemeData The theme , The options that can be set are as follows , Below ThemeData The optional parameters in the factory constructor are various topic options that can be set ;

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,  })}

The following code sets MaterialApp The theme of ThemeData , brightness The field is set to the theme mode , The setting here is Brightness.light Day mode ;

primarySwatch The field sets the main color of the theme , The setting here is blue ;

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  Subject modification ",      theme: ThemeData(        brightness: Brightness.light,        primarySwatch: Colors.blue,      ),      home: ,    );  }}

Two 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class ThemePage extends StatefulWidget { 
      @override  _ThemePageState createState() => _ThemePageState();}class _ThemePageState extends State<ThemePage> { 
      ///  Theme mode   Brightness brightness = Brightness.light;  @override  Widget build(BuildContext context) { 
        return MaterialApp(      title: "Theme  Subject modification ",      theme: ThemeData(        brightness: brightness,        primarySwatch: Colors.blue,      ),      home: Scaffold(        appBar: AppBar(          title: Text("Theme  Subject modification "),        ),        body: Column(          children: <Widget>[            RaisedButton(              onPressed: (){ 
                    setState(() { 
                      brightness = Brightness.light;                });              },              child: Text(" Switch to the daytime theme "),            ),            RaisedButton(              onPressed: (){ 
                    setState(() { 
                      brightness = Brightness.dark;                });              },              child: Text(" Switch to the night theme "),            ),          ],        ),      ),    );  }}

Running effect :

3、 ... and 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Plug in download address : https://pub.dev/packages
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15547438 ( The source code snapshot of this blog , You can find the source code of this blog )