masamune_universal_ui

Description:

masamune universal ui

Masamune Universal UI
















[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
copied to clipboard
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(),
],
);
}
copied to clipboard
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)
]
)
);
}
copied to clipboard
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.
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,
),
),
],
);
copied to clipboard
GitHub Sponsors #
Sponsors are always welcome. Thank you for your support!
https://github.com/sponsors/mathrunet