Construct the Flutter theme using abstract factory method

Old iron remember to forward, Brother Cat will present more Flutter good articles ~~~~

Ducafecat WeChat group

B stationspace.bilibili.com/404904528

The original

Vbacik-10.medium.com/flutter-bui…

code

Github.com/VB10/flutte…

reference

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 and this shopping page.

Layouts adobe. Ly/xdfreshfood…

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

Background Background
App Bar – Application bar
Search Bar – Search Bar — Search Icon — Search Icon — Search Text — Search Text — Microphone Icon
ListView — Product Card * *
TabBar – TabBar Icons * TabBar set of Icons

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

Projects must use this palette when they need new widgets. In fact, projects are easier to grow because of subject managers. Finally, we’re ready for Hacking time, so we’ll use both factory method patterns and 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 done:

ITheme abstract class with different colors and styles
ThemeFactory class for managing different themes from a single point

Factory design is one of the innovative modes. This pattern provides high-level objects because the client knows nothing. The schema now 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 the central point of view required by the project. Let’s write down these points.

Text-themed interface

Every project needs this, because most usage points to the textual guide for the project. So after we created the basic style guide, it was very easy to use from the view. Just because we sometimes need to customize the text style doesn’t mean you don’t use the current style. We can use the copyWith function so we can use the view like headline5, or we can add custom properties such as text colors.

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);
}
Copy the code

If your project design has a kit, you can use the Zeplin tool. This tool gets all the text styles in the Style guide TAB.

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 projects have a static color code, you won’t add multi-theme options, plus 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;
}
Copy the code

I said 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 creates the ThemeData instance for the project. Thanks to this interface, you can create a new theme instance. This new theme just needs a color scheme etc.

abstract class ITheme {
  ITextTheme get textTheme;
  IColors get colors;
}
Copy the code

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

Finally, the factory creator and we need to use the topic manager for this project

abstract class ThemeManager {
  staticThemeData 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); }Copy the code

I plan only specific fields, 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 create a custom theme with this structure, and we’ll show you the advantages of using it.

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();
}
Copy the code

Of course, dark themes are created like this, so just changing the style of the guidelines and items can be used directly. You can access the dark Theme code here.

TextTheme Light needs to draw the base color of the default color of the text, 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;
}
Copy the code

Ok, so if we want to see 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;
}
Copy the code

Sometimes styles need to be prepared because there is not enough knowledge of style. At this point you can use an instance of a color scheme for your project so that you can get a material color scheme and therefore add your own custom business layer.

The Light theme is ready for use. The project only needs the topic factory method, and you can write this class instance. This is acceptable for all content of the project color.

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

Yes, we can start drawing on the search results screen. Not forgetting this method in particular, let’s see how to create a theme instance for this project.

abstract class ThemeManager {
  staticThemeData 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); }Copy the code

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

Feature Page

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

Now the 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 theme 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 additional topic managers and widget tree structures. First, let’s create a TAB view structure in the 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()),
        ));
  }
Copy the code

In fact, we saw the Fab button and we needed a custom color because it 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 property 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: () {},
  );
}
Copy the code

After that, let’s show the search results page design. We talked about how the design of the page had hurt the article. This is very important for flutter planning. You always have to think about the tree. 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()),
          ],
        ),
      ),
    );
  }
Copy the code

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

Widget textFieldSearch(BuildContext context) {
 return TextField(
 decoration: InputDecoration(
 border: InputBorder.none,
 prefixIcon: Icon(Icons.search_sharp,
 color: Theme.of(context).colorScheme.onPrimary.withOpacity(0.5)),
 suffixIconConstraints: BoxConstraints(maxHeight: 30),
 suffixIcon: FloatingActionButton(
 onPressed: () {},
 mini: true,
 child: Icon(Icons.mic_sharp),
)),
);
}
Copy the code

This code design does not require additional code. You can use what you need here from the topic context. Let’s look at an example text style:

Text buildTextSub(BuildContext context) {
  returnText( items.searchResults, style:Theme.of(context).textTheme.headline6? .copyWith( letterSpacing:0.2,
      fontWeight: FontWeight.w400,
      ),
  );
}
Copy the code

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

You can see the item attributes, which may be important for comments. If you have all constant-valued classes and want to create only 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';
}
Copy the code

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

The Yees project has been completed. If you want to change a theme, like darkness, we just change this instance to darkness and we’re done.

Therefore, we adopted abstract factory design capabilities and manageable code design. It sounds great for developing power, as 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, because you know we create interfaces. Different themes just fit into those interfaces, and it’s all done.

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

Thank you for reading “Thank you for reading” For Your Life and Health.

Github.com/VB10/flutte…

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Strapi manual translation

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…