The simplest way of flutter web site to realize seamless switching of dark theme

Time:2020-5-30

Previous period

  • Flutter web site building tutorial
  • The construction of homepage framework of flutter web site
  • Jetpack formation of flutter web site
  • Scrollview + GridView optimization of flutter web site

Previous review

In the last period, we optimized the usage scenarios of Scrollview + GridView and used more appropriate components. In this period, we want to make a theme change. Why?

  • The first Diablo theme is becoming more and more rigid. Now any mainstream app is embarrassed to go on the shelf without Diablo, and IOS camp is more tough on platform implementation, otherwise, we can’t afford to get off the shelf.
  • The second project is still in its infancy, when the cost of reconstruction and modification is low
  • There are many frameworks on the third topic of change online that can be implemented quickly, but what I want to seek is the simplest one. I don’t want to introduce other people’s frameworks. First, I know everything about myself. Second, I don’t need to rely on other people’s upgrading to meet the needs of wonderful flowers in the future.

In fact, it is very simple to realize this period.

Achieving results

Large screen lightThe simplest way of flutter web site to realize seamless switching of dark theme
Big screen darkThe simplest way of flutter web site to realize seamless switching of dark theme
Small screen light colorThe simplest way of flutter web site to realize seamless switching of dark theme
Small screen darkThe simplest way of flutter web site to realize seamless switching of dark theme

code implementation

Define theme class apptheme to configure different theme data

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]));
}

DARK_ The dark theme
LIGHT_ The light theme and light title bar are blue by default. Here I change them to light gray

Define streamcontroller to dynamically change data

class ThemeBloc {
  // ignore: close_sinks
  final _themeStreamController = StreamController<AppTheme>();
  ///Change subject call method
  get changeTheTheme => _themeStreamController.sink.add;
  ///Subject data
  get themeData => _themeStreamController.stream;
}

final bloc = ThemeBloc();

Package a layer of streambuilder for the original materialapp

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

Initialdata default data
Stream will bloc.themeData Assigned to it to monitor data changes
The snapshot of data changes is finally handed over to the theme of materialapp to realize dynamic changes. How can change data be triggered?
The simplest way of flutter web site to realize seamless switching of dark theme
As shown in the figure, the switch is added to the setting page, and the code is as follows

SwitchListTile(
          secondary: Icon(_isEnabled ? Icons.brightness_4 : Icons.brightness_5),
          Title: text ("dark theme"),
          Subtitle: text ("set theme to dark black"),
          value: _isEnabled,
          onChanged: (value) {
            setState(() {
              _isEnabled = value;
            });
            if (value) {
              bloc.changeTheTheme(AppTheme.DARK_THEME);
            } else {
              bloc.changeTheTheme(AppTheme.LIGHT_THEME);
            }
          },
        )

Call here bloc.changeTheTheme To change the theme.
It’s so easy to change the theme. Do you have any questions about how I can change other themes (such as text, buttons, dialog boxes, etc.)

ThemeData

Let’s see what I have to achieve

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

I have modified brightness and primarycolor here, but there are many more. Please see

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

You can modify all the themes in this. Do you see appbartheme, dialogtheme, texttheme, bottom sheet theme data and so on? Don’t need me to explain. You should know who gets the style.

summary

After 20 lines of new code, why use someone else’s framework? Yeah.

Long winded

The plan really can’t catch up with the changes, don’t rush, and gradually improve.

Source code

Please go to GitHub code to see the complete implementation

ToDo

The content of this part will be updated slowly later. Please be objective and don’t worry. Of course, you can join in and chat with me.

  • The example unit is ready to implement the next phase, jump to the details page, and display the use case. The source code has been clicked to jump to GitHub.
  • Tags will be implemented in the next phase. This part also needs a new UI presentation. The functions of tags are similar to those of search, providing a faster way to find the desired functions.
  • Message function design, you will definitely have different suggestions in the process of using, with this function you can know your voice, so this is also a function we need to achieve.
  • Excellent project recommendation, there are many excellent projects waiting for us to discover. My ability is limited. If more people recommend, our jetpack content will continue to be enriched.
  • Blog, considering that there are many excellent tycoons, who have written relevant technology blogs, to help you find the best resources. The function design is as shown in the figure below.The simplest way of flutter web site to realize seamless switching of dark theme

end

website jetpack.net.cn Welcome to visit frequently and hope to help you learn flutter.

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]