Build the Flutter theme with the abstract factory method

Be sure to retweet brother for more Flutter posts at ~~~~

Ducafecat WeChat group

B stationhttps://space.bilibili.com/40…

The original

https://vbacik-10.medium.com/…

code

https://github.com/VB10/flutt…

reference

https://zeplin.io

The body of the

The largest number of applications created at least one theme. Maybe that’s enough for the first release, but what if the project continues to grow? Let’s see how to do that.

We know how important the theme of the project design is, so we will create a theme manager for the project. Let’s create a theme manager as well as this shopping page.

The design draft https://adobe.ly/xdfreshfoodu…

First, it requires a page design, such that the page can be connected to the service. (I created this endpoint for this sample page.)

Background Background
App bar – App bar
Search Bar – Search Icon ー Search Icon – Search Text – Search Text – Smartphone Icon
ListView — Product Card ー
Tabbar – Tabbar Icons ー Tabbar

Therefore, we need a palette to use for this project. If your design kit has a color palette, you can get all the colors in the design kit.

The project must use this palette when new widgets are needed. In fact, it’s easier for projects to grow thanks to a subject manager. Finally, we’re ready for Hacking time, so we’ll use both the factory method mode and the page atomic design.

Hacking Time

First, I prefer to write the core features first, which is why we don’t double down when the code is complete:

ITheme abstract classes with different colors and styles
The ThemeFactory class for managing different topics from a single point

Factory design is one of the innovation models. This pattern provides high-level objects because the client knows nothing. Now, the pattern creates a custom object so that the project can use the schema.

Now we know what this structure requires, because we can write an interface that contains both text and color. This interface provides a central point of view, so the project needs it. Let’s write down the main points.

Text Theme Interface

Every project needs this because most usage points to the textual guide for the project. So once we’ve created the basic style guide, it’s very easy to use from the view. Just because we need to customize text styles sometimes doesn’t mean you don’t use the current style. We can use the copyWith function so that we can use the view like Headline5, or we can add custom attributes such as text color.

abstract class ITextTheme {
  final Color? primaryColor;
  late final TextTheme data;
  TextStyle? headline1;
  TextStyle? headline3;
  TextStyle? headline4;
  TextStyle? headline5;
  TextStyle? headline6;
  TextStyle? subtitle1;
  TextStyle? subtitle2;
  TextStyle? bodyText1;
  TextStyle? bodyText2;
  String? fontFamily;

  ITextTheme(this.primaryColor);
}

If you have a kit for your project design, you can use the Zeplin tool. This tool gets all the text styles in the Styles Guide TAB.

https://zeplin.io/

Color Theme Interface

Pointing to items is very important because you know that color is everywhere. So how we manage more projects is easy to control. Each project has a specific color pattern that you must use in your code. If you don’t use patterns and the project has a static color code, you won’t add multi-theme options, and you can’t manage color issues.

abstract class IColors {
  _AppColors get colors;
  Color? scaffoldBackgroundColor;
  Color? appBarColor;
  Color? tabBarColor;
  Color? tabbarSelectedColor;
  Color? tabbarNormalColor;
  Brightness? brightness;

  ColorScheme? colorScheme;
}

I said something like Paragraph about Zeplin. Again you can use this and all the color properties you can.

Abstract Factory Manager

A manager created for multiple interfaces. This manager will create the ThemeData instance for the project. Thanks to this interface, you can create a new topic instance. This new theme only needs a color scheme etc.

abstract class ITheme {
  ITextTheme get textTheme;
  IColors get colors;
}

Yes, it seems simple enough to be useful on any project. Finally, we are ready to use the core theme drawing operation, so the project can declare a custom theme for this structure. Perhaps, these topic interfaces could be improved to a more advanced level. That’s enough for this project right now.

Finally we need the factory creator and the theme manager that we use for this project

abstract class ThemeManager { static ThemeData craeteTheme(ITheme theme) => ThemeData( fontFamily: theme.textTheme.fontFamily, textTheme: theme.textTheme.data, cardColor: theme.colors.colorScheme? .onSecondary, floatingActionButtonTheme: FloatingActionButtonThemeData( foregroundColor: theme.colors.colors.white, backgroundColor: theme.colors.colors.green), appBarTheme: AppBarTheme(backgroundColor: theme.colors.appBarColor), scaffoldBackgroundColor: theme.colors.scaffoldBackgroundColor, colorScheme: theme.colors.colorScheme); }

I plan to only have specific areas as it only has two pages for the project as you know this sample. You must create text styles and other areas of the color scheme area. Let’s use this structure to create a custom theme, and we’ll demonstrate the use advantage.

Ligh Theme on Project

In fact, we have a structure and project on how to create a light theme.

class AppThemeLight extends ITheme {
  @override
  late final ITextTheme textTheme;

  AppThemeLight() {
    textTheme = TextThemeLight(colors.colors.mediumGrey);
  }

  @override
  IColors get colors => LightColors();
}

Of course, dark themes are created this way, so just change the style guidelines and projects can be used directly. You can access the dark theme code here.

TextTheme Light needs to draw the base color of the text default color, while the Light color has been created from the Zeplin style.

class TextThemeLight implements ITextTheme { @override late final TextTheme data; @override TextStyle? bodyText1; @override TextStyle? bodyText2; @override TextStyle? headline1; @override TextStyle? headline3; @override TextStyle? headline4; @override TextStyle? headline5; @override TextStyle? headline6; @override TextStyle? subtitle1; @override TextStyle? subtitle2; final Color? primaryColor; TextThemeLight(this.primaryColor) { data = TextTheme( headline6: TextStyle(fontSize: 20, fontWeight: FontWeight. Normal), subtitle1: textStyle (fontSize: 16.0),). Apply (bodyColor: PrimaryColor); fontFamily = GoogleFonts.arvo().fontFamily; } @override String? fontFamily; }

Okay, so if we want to look at a light-colored theme instance, it shows that.

class LightColors implements IColors {
  @override
  final _AppColors colors = _AppColors();

  @override
  ColorScheme? colorScheme;
  @override
  Color? appBarColor;

  @override
  Color? scaffoldBackgroundColor;

  @override
  Color? tabBarColor;

  @override
  Color? tabbarNormalColor;

  @override
  Color? tabbarSelectedColor;

  LightColors() {
    appBarColor = colors.white;
    scaffoldBackgroundColor = colors.white;
    tabBarColor = colors.green;
    tabbarNormalColor = colors.lighterGrey;
    tabbarSelectedColor = colors.darkerGrey;
    colorScheme = ColorScheme.light()
        .copyWith(onPrimary: colors.green, onSecondary: colors.white);
    brightness = Brightness.light;
  }

  @override
  Brightness? brightness;
}

Sometimes it is necessary to prepare the style because there is not enough style knowledge. At this point you can use an instance of the color scheme for your project, so you can get the material color scheme, so you can add your own custom business layer.

The Light theme is ready to be used. This project only needs the topic factory method, which you can write as an instance of the class. This is acceptable for all aspects of the project color.

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '@VB10', theme: ThemeManager.craeteTheme(AppThemeLight()), home: SampleView(), ); }}

Yes, we can start drawing on the search results screen. In particular, not forgetting this method, let’s look at how to create a topic instance for this project.

abstract class ThemeManager { static ThemeData craeteTheme(ITheme theme) => ThemeData( fontFamily: theme.textTheme.fontFamily, textTheme: theme.textTheme.data, cardColor: theme.colors.colorScheme? .onSecondary, tabBarTheme: TabBarTheme( indicator: BoxDecoration(), labelColor: theme.colors.tabbarSelectedColor, unselectedLabelColor: theme.colors.tabbarNormalColor, ), floatingActionButtonTheme: FloatingActionButtonThemeData( foregroundColor: theme.colors.colors.white, backgroundColor: theme.colors.colors.green), appBarTheme: AppBarTheme(backgroundColor: theme.colors.appBarColor), scaffoldBackgroundColor: theme.colors.scaffoldBackgroundColor, colorScheme: theme.colors.colorScheme); }

Now the project is directly dependent on all the theme instances, because we just change the theme values after the project goes to a new color scheme, and the project never requires any code design time. This means that the design of your project has done all the work

Feature Page

We have a topic instance, so we just call that instance and we’re all set. First, drawing the page tree is very important to better understand.

Now coding is pretty easy, because we know how to draw this. In particular, you pay close attention to coding time, so you can always use topic instances in your page design. The project has a theme design because you can call this variable directly. For example, any page can need a background color, so we don’t need to write it over and over again because we have theme instances that use this situation.

Yes, we are going to develop another theme manager and widget tree structure. First, let’s create a Tab view structure in our code.

  final List<MapEntry<Widget, IconData>> _pages = [
    MapEntry(SampleView(), Icons.search),
    MapEntry(Container(), Icons.search),
    MapEntry(Container(), Icons.search),
    MapEntry(Container(), Icons.search),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _pages.length,
        child: Scaffold(
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: floatingActionButton(context),
          bottomNavigationBar: _bottomAppBar(),
          body: TabBarView(children: _pages.map((e) => e.key).toList()),
        ));
  }

In fact, we saw the FAB button and we needed a custom color because the color was created for blue, but we added this custom code to the theme and just wrote a floating action button. This button reads the own attribute in the topic instance from the context.

I said you don’t need any extra code, just call the widget.

FloatingActionButton floatingActionButton(BuildContext context) {
  return FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  );
}

After that, let’s display the search results page design. We talked about the impact of the page design on the article. This is very important for the flutter program. You have to keep thinking about this tree structure. You can make a great page with the idea of a widget tree.

@override Widget build(BuildContext context) { return Scaffold( appBar: buildAppBar(context), body: Padding( padding: EdGeInSets. Only (top: MediaQuery.of(context).size.width * 0.08), child: Column(children: [ textFieldSearchCard(context), Expanded(child: buildGridViewBody()), ], ), ), ); }

That says a lot. Let’s take a look at some widgets to see how themes can be used. Our design has a custom search bar with a search icon and a microphone button.

Widget textFieldSearch(BuildContext context) { return TextField( decoration: InputDecoration( border: InputBorder.none, prefixIcon: Icon(Icons.search_sharp, color: The Theme of (context). ColorScheme. OnPrimary. WithOpacity (0.5)), suffixIconConstraints: BoxConstraints (maxHeight: 30), suffixIcon: FloatingActionButton( onPressed: () {}, mini: true, child: Icon(Icons.mic_sharp), )), ); }

This code design requires no additional code. You can use what you need here from the topic context. Let’s look at an example of text styles:

Text buildTextSub(BuildContext context) { return Text( items.searchResults, style:Theme.of(context).textTheme.headline6? .copywith (letterSpacing: -0.2, fontWeight: fontWeight.w400,),); }

As you can see this is a very simple and manageable piece of code, I just added some custom code and did all the work.

You can see the entry attributes, which may have something to do with the comments. If you have all the constant value classes and only want to create constant values, you can add the @Immutable annotation after the class is secure.

@immutable
class AppTextItems {
  final String searchResults = 'Search Results';
  final String brocoliText = 'Broccoli';
}

Yes, this project may be a sample of understanding the architecture, but always write strong code.

The YEES project has been completed. If you want to change a theme, like dark, we just change the instance to dark, and we’re done.

Therefore, we adopted abstract factory design capabilities and manageable code design. It sounds like a good fit for developing power, because flutter can improve patterns and special angles.

Completed. Now we can directly implement our own projects and manage everything. On the other hand, this project does not require knowledge of how to create new topics, as you know we create interfaces. The different themes fit just right into these interfaces, and then everything is done.

In fact, the main goal of this article is how to use this pattern in topic instances, so knowledge of this is very important to your development life.

Thank you for reading “Health for Your Life”

https://github.com/VB10/flutt…

https://ducafecat.tech/

https://github.com/ducafecat

The issue of

Open source

GetX Quick Start

https://github.com/ducafecat/…

News Client

https://github.com/ducafecat/…

Strapi manual translation

https://getstrapi.cn

WeChat discussion group Ducafecat

A series of collections

The translation

https://ducafecat.tech/catego…