masamune_universal_ui 2.3.50 copy "masamune_universal_ui: ^2.3.50" to clipboard
masamune_universal_ui: ^2.3.50 copied to clipboard

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

Masamune logo

Masamune Universal UI

Follow on Twitter Follow on Threads Maintained with Melos

GitHub Sponsor


[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]


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.

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.

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.

@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.
  • LoadingFuturesLoadingWidget
    • 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.
  • widthheightborderRadius
    • 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 UniversalListViewResponsive.

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

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

GitHub Sponsors #

Sponsors are always welcome. Thank you for your support!

https://github.com/sponsors/mathrunet

6
likes
140
pub points
70%
popularity

Publisher

verified publishermathru.net

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

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, katana, masamune, universal_platform, url_launcher, visibility_detector

More

Packages that depend on masamune_universal_ui