The issue of

• Build the Flutter Web site tutorial
• Build the main page frame of Flutter Web
• Jetpack for The Flutter Web site takes shape
• Optimization of ScrollView+GridView for Flutter Web sites

Review of the previous period

Last time we made optimization, mainly for the use of ScrollView+GridView scenarios, using more appropriate components, this time we want to make a theme change, why?

• First, the theme of diablo is becoming more and more urgent. Now any mainstream App without diablo is embarrassed to be put on the shelves, and the ios camp is more and more tough to require the platform to be implemented, or it will be removed. Cook’s great force, we can not afford to provoke.
• The second project is still in its early stages, where refactoring costs are lower
• There are many frameworks on the Internet that can be implemented quickly, but WHAT I want to seek is the simplest implementation. I don’t want to introduce others’ frameworks, because I know everything about them, and I don’t have to rely on others’ upgrades to meet the requirements of future weirdo. This implementation is actually very simple, check it out.

Implementation effect

Time the light color

Code implementation

Define the AppTheme class to configure different ThemeData

class AppTheme {

  ThemeData themeData;

  AppTheme(this.themeData);

  // ignore: non_constant_identifier_names
  static final AppTheme DARK_THEME = AppTheme(ThemeData.dark());

  // ignore: non_constant_identifier_names
  static final AppTheme LIGHT_THEME = AppTheme(
      ThemeData(brightness: Brightness.light, primaryColor: Colors.grey[50]));
}
Copy the code

LIGHT_THEME Light theme, light title bar default blue, here I changed to light gray

StreamController defines StreamController to dynamically change data

class ThemeBloc { // ignore: close_sinks final _themeStreamController = StreamController<AppTheme>(); / / / change the theme calls the method get changeTheTheme = > _themeStreamController. Sink. Add; / / / theme data get themeData = > _themeStreamController. Stream; } final bloc = ThemeBloc();Copy the code

Package the original MaterialApp with a layer of StreamBuilder

 StreamBuilder<AppTheme>(
        initialData: AppTheme.LIGHT_THEME,
        stream: bloc.themeData,
        builder: (context, AsyncSnapshot<AppTheme> snapshot) {
          return MaterialApp(
            title: 'Jetpack',
            theme: snapshot.data.themeData,
            home: PageHome(),
            routes: <String, WidgetBuilder>{
              "/qq": (context) => PageQQLink(),
              "/pageChatGroup": (context) => PageChatGroup(),
            },
          );
        })
Copy the code

InitialData The default data stream assigns bloc. ThemeData to it, which is used to listen for data changes and give a snapshot of data changes to the Snapshot, which is eventually fed to the Theme of the MaterialApp for dynamic changes. How do you trigger the change data?

SwitchListTile(
          secondary: Icon(_isEnabled ? Icons.brightness_4 : Icons.brightness_5),
          title: Text("Dark Themes."),
          subtitle: Text("Make the theme dark."),
          value: _isEnabled,
          onChanged: (value) {
            setState(() {
              _isEnabled = value;
            });
            if (value) {
              bloc.changeTheTheme(AppTheme.DARK_THEME);
            } else{ bloc.changeTheTheme(AppTheme.LIGHT_THEME); }},)Copy the code

Here we call bloc. ChangeTheTheme to changeTheTheme. Changing themes is as simple as that, if you have any questions, how can I change other themes (text, buttons, dialogs, etc.)

ThemeData

Now let’s see I have to implement

  static final AppTheme LIGHT_THEME = AppTheme(
      ThemeData(brightness: Brightness.light, primaryColor: Colors.grey[50]));
Copy the code

I changed the Brightness and primaryColor here. In fact, there are many others

 ThemeData({
    Brightness brightness,
    VisualDensity visualDensity,
    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,
    NavigationRailThemeData navigationRailTheme,
    Typography typography,
    CupertinoThemeData cupertinoOverrideTheme,
    SnackBarThemeData snackBarTheme,
    BottomSheetThemeData bottomSheetTheme,
    PopupMenuThemeData popupMenuTheme,
    MaterialBannerThemeData bannerTheme,
    DividerThemeData dividerTheme,
    ButtonBarThemeData buttonBarTheme,
  }
Copy the code

You can modify all the themes in this file. You can see AppBarTheme, DialogTheme, TextTheme, BottomSheetThemeData, etc. You don’t need to explain it.

conclusion

Why use someone else’s framework when you can just add 20 lines of code? Isn’t it.

Repetitive sentence

Plan is really catch up with change, no hurry, slowly improve ha.

The source code

Please go to github code to see the full implementation

ToDo

This part of the content will be updated slowly, please don’t worry objectively, of course, you can participate in the private chat I oh.

• The example section prepares the next implementation, jumps to the details page, and shows the use cases. Source code is complete click to jump to Github.
• Tags will be implemented in the next phase, which also requires a new UI presentation. The function of Tags is similar to search, providing a faster way to find the desired function.
• Message function design, there will be different suggestions in the process of your use, with this function can know your voice, so this is also a function we need to achieve.
• Excellent project recommendations, there are many excellent projects waiting for us to discover, I alone have limited ability, if more people to recommend, will continue to enrich our Jetpack content.
• Blogs, considering that there are a lot of great people who have written relevant technical blogs, help you find the best resources. The function design is as follows: add button.
  

  

The end of the

You are welcome to visit jetpack.net.cn and I hope you can help you on your way to learn Flutter.