[Flutter] Masamune Universal UI

Hello. I'm Masaru Hirose.

Taking advantage of Flutter's multi-platform, single-code app development capabilities, we have created a package that allows you to adjust the look and feel of multiple platforms with a single code.

I summarized how to use it, so please try it out if you're interested!

masamune_universal_ui

masamune_universal_ui | Flutter package

The package provide a universal UI that aims to be written in one code on any platform.

https://pub.dev

Introduction

While Flutter has the advantage of being able to support a variety of platforms, there are drawbacks that can plague developers due to differences in the UI for different platforms

When developing for the Web or desktop, development costs go up because the UI for tablets must also be considered.

Flutter widgets are platform-independent and cannot provide platform-specific UI as-is. Therefore, developers need to customize the UI for each platform.

Masamune Universal UI is a framework package that collects widgets that support responsive design and generates a UI that can be used on various platforms with a single code.

A single code can be developed for Web, iOS, Android, and desktop, and the display changes according to screen size, so developers do not need to customize the UI for each platform.

By using this package, you can proceed with development without worrying about UI differences between platforms.

This package is based on bootstrap, a well-known CSS layout framework.

Twelve horizontal grid layouts can be specified, naturally reconfiguring the screen layout from horizontal to vertical according to the width of the screen.

Installation

Import the following packages

Import the Masamune package as well, since it is assumed that the Masamune framework is used.

Copy

flutter pub add masamune_universal_ui
flutter pub add masamune

Implementation

Advance preparation

It is assumed that the Masamune framework is used.

Pass the UniversalMasamuneAdapter to the masamuneAdapters of the MasamuneApp or runMasamuneApp to initialize it.

Copy

void main() {
  runMasamuneApp(
    (adapters) => MasamuneApp(
      title: title,
      appRef: appRef,
      theme: theme,
      routerConfig: router,
      localize: l,
      authAdapter: authAdapter,
      modelAdapter: runtimeModelAdapter,
      storageAdapter: storageAdapter,
      functionsAdapter: functionsAdapter,
      masamuneAdapters: adapters,
    ),
    masamuneAdapters: [
      const UniversalMasamuneAdapter(),
    ],
  );
}

Basic UI

Basically, it is no different from the way Flutter's UI is created: instead of Scaffold, AppBar, etc., widgets such as UniversalScaffold, UniversalAppBar, etc. are specified to build the UI.

Copy

@override
Widget build(BuildContext context, PageRef ref) {
  return UniversalScaffold(
    appBar: UniversalAppBar(title: Text("Title"), backgroundColor: theme.color.secondary),
    body: UniversalColumn(
      crossAxisAlignment: CrossAxisAlignment.start,
      children:[
        Center(child: CircleAvatar(backgroundImage: theme.asset.userIcon.provider)),
        Text("User Name", style: theme.text.displayMedium)
      ]
    )
  );
}

UniversalScaffold

This widget is a replacement for Scaffold. The following functions are available in addition to the normal Scaffold

Header
- Widgets can be placed at the top of the body.
Footer
- Widgets can be placed at the bottom of the body.
Sidebar
- Widgets can be placed on the left side of the body. For mobile UI, it will be displayed between body and footer.
LoadingFutures、LoadingWidget
- If Future (or FutureOr) is given to loadingFutures, the indicator is displayed without showing the body, etc. until the Future is finished.
- When loadingWidget is specified, the indicator can be changed to the one specified.
width、height、borderRadius
- The entire Scaffold screen can be sized.
- It can be used like a modal when a page transition is made with TransitionQuery.centerModal, etc.

UniversalAppBar

This widget replaces the AppBar.

The position of title and action will be adjusted for PC and mobile.

In addition to the regular AppBar, the following functions are available

subtitle
- A small subtitle to be displayed below the TITLE.

UniversalSliverAppBar

This widget replaces the AppBar and can be used in conjunction with the UniversalScaffold and UniversalUI widgets to enable the use of the Sliver-based AppBar without awareness.

If you wish to add feature images, etc. to the header section, please use this.

It can be used by simply replacing the UniversalAppBar as it is.

UniversalContainer

This is a Container widget that is effective when placed directly under the body of UniversalScaffold.

It is available in the same way as Container, but the padding is automatically adjusted according to the screen size.

UniversalColumn

This is a Column widget that is effective when placed directly under the body of UniversalScaffold.

Available in the same way as Column, but the padding is automatically adjusted according to the screen size.

It is also possible to create a grid design by placing Responsive widgets directly under children. (See below for more details.)

UniversalListView

This is a ListView widget that is effective when placed directly under the body of UniversalScaffold.

It can be used in the same way as ListView, but the padding is automatically adjusted according to the screen size.

It is also possible to create a grid design by placing Responsive widgets directly under children. (See below for more details.)

If UniversalSliverAppBar is used, CustomScrollView is used internally, so the list changes to a Sliver-type list without awareness.

UniversalSideBar

This is a sidebar widget that is effective when placed directly under the sideBar of UniversalScaffold.

Padding is automatically adjusted according to screen size.

Grid design

Please refer to the bootstrap page for basic concepts.

https://getbootstrap.com/docs/5.3/layout/breakpoints/

In this package, you can build a grid design by assembling widgets in the form of UniversalColumn and UniversalListView → Responsive.

In Responsive, each breakpoint (xs, sm, md, lg, xl, xxl) allows you to specify how many of the 12 breakpoints to divide into.

Copy

UniversalListView(
  children: [
    Responsive(
      lg: 12,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Responsive(
      sm: 6,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
    Responsive(
      sm: 6,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
);

Conclusion

I created this for my own use, but please try it if you think the implementation concept matches.

I have also published the source code here, so please feel free to issue or pull request!

Also, if you have any work requests, please contact me directly on my Twitter or website.

Contact - mathru.net | App Development with Flutter, Unity/Music and Video Production/Material Distribution

Offers app development and apps using Flutter and Unity. Includes information on music and videos created by the company. Distribution of images and video materials. We also accept orders for work.