UniversalScaffold class

Create Scaffold to provide a consistent UI across web, desktop and mobile.

UniversalScaffold can be used with UniversalAppBar and UniversalListView to create a responsive modern UI.

It is basically available in the same way as Scaffold.

You can specify UniversalAppBar, SliverAppBar, AppBar or PreferredSizeWidget for appBar. If you specify a Sliver-compatible widget, the whole page will scroll Sliver-compatible.

If breakpoint is specified, the UI will change to a mobile-oriented UI when the window size becomes smaller than the breakpoint. In this case, sideBar will be placed on drawer and the width will be maximized.

If loadingFutures is specified, the loading widget will be displayed until the specified Future is completed. loadingWidget to change the loading widget.

Setting waitTransition to true will prevent body from being displayed during the transition animation, resulting in a smooth animation.

Webとデスクトップ、モバイルで一貫したUIを提供するためのScaffoldを作成します。

UniversalScaffoldは、UniversalAppBarとUniversalListViewなどを使用して、UIを構築するとレスポンシブ対応なモダンUIが作成可能です。

基本的にはScaffoldと同じように利用可能です。

appBarにUniversalAppBar、SliverAppBar、AppBarやPreferredSizeWidgetを指定できます。Sliver対応のウィジェットを指定すると、ページ全体がSliver対応のスクロールになります。

breakpointを指定するとそのブレークポイント以下のウインドウサイズになると、モバイル向けのUIに変化します。その際sideBarはdrawerに配置されるようになり、横幅は最大化されます。

loadingFuturesを指定すると、指定したFutureが完了するまでローディングウィジェットを表示します。 loadingWidgetを指定すると、ローディングウィジェットを変更できます。

waitTransitionをtrueにするとトランジションアニメーションの間にbodyを表示しないようにすることができ、スムーズなアニメーションを実現できます。

@override
Widget build(BuildContext context) {
  return UniversalScaffold(
    appBar: UniversalAppBar(
      title: Text("UniversalViewPage"),
      subtitle: Text("UniversalViewPage"),
      titlePosition: UniversalAppBarTitlePosition.bottom,
      background: UniversalAppBarBackground(theme.asset.image.provider),
    ),
    body: UniversalListView(
      children: [
        ResponsiveRow(
          children: [
            ...List.generate(100, (i) {
              return ListTile(
                tileColor: Colors.red,
                title: Text((i + 1).toString()),
              );
            }).mapResponsiveCol(sm: 6, md: 4),
          ]
        ),
      ],
    ),
  );
}

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• UniversalScaffold

Available extensions

• UniversalUIClipExtensions
• UniversalUIDecorationExtensions
• UniversalUIGestureDetectorExtensions
• UniversalUIPaddingExtensions
• UniversalUIWidgetStructureExtensions

Constructors

UniversalScaffold({Key? key, Widget? appBar, Widget? body, Widget? floatingActionButton, FloatingActionButtonLocation? floatingActionButtonLocation, FloatingActionButtonAnimator? floatingActionButtonAnimator, List<Widget>? persistentFooterButtons, Widget? drawer, void onDrawerChanged(bool)?, Widget? endDrawer, Widget? header, Widget? footer, void onEndDrawerChanged(bool)?, Widget? bottomNavigationBar, Widget? bottomSheet, Color? backgroundColor, bool? resizeToAvoidBottomInset, bool primary = true, DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start, bool extendBody = false, bool extendBodyBehindAppBar = false, Color? drawerScrimColor, double? drawerEdgeDragWidth, bool sideBarOnDrawerAlways = false, bool drawerEnableOpenDragGesture = true, bool endDrawerEnableOpenDragGesture = true, String? restorationId, List<FutureOr>? loadingFutures, Widget? loadingWidget, bool waitTransition = false, Breakpoint? breakpoint, AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd, PreferredSizeWidget? sideBar, double? width, double? height, BorderRadiusGeometry? borderRadius, AlignmentGeometry alignment = Alignment.center})

Create Scaffold to provide a consistent UI across web, desktop and mobile.

const

Properties

alignment → AlignmentGeometry

You can specify where to place the UniversalScaffold itself.

final

appBar → Widget?

The AppBar to display at the top of the scaffold.

final

backgroundColor → Color?

The color to be applied to the background of Scaffold.

final

body → Widget?

The primary content of the scaffold.

final

borderRadius → BorderRadiusGeometry?

Specify rounded corners.

final

bottomNavigationBar → Widget?

The widget to display at the bottom of the scaffold.

final

bottomSheet → Widget?

The widget to display at the bottom of the scaffold.

final

breakpoint → Breakpoint?

You can specify the breakpoint at which the UI will change to a mobile-oriented UI.

final

drawer → Widget?

The widget to display behind the Scaffold's appBar. This widget is usually a Drawer.

final

drawerDragStartBehavior → DragStartBehavior

Determines the way that drag start behavior is handled.

final

drawerEdgeDragWidth → double?

The width of the area that responds to edge drags.

final

drawerEnableOpenDragGesture → bool

Whether to allow the user to open the Drawer by dragging from the edge of the screen.

final

drawerScrimColor → Color?

The color to use for the scrim that obscures primary content while a Drawer is open.

final

endDrawer → Widget?

The widget to display behind the Scaffold's appBar.

final

endDrawerEnableOpenDragGesture → bool

Whether to allow the user to open the endDrawer by dragging from the edge of the screen.

final

extendBody → bool

Whether the body extends underneath the Scaffold's FloatingActionButton.

final

extendBodyBehindAppBar → bool

Whether the body extends underneath the Scaffold's AppBar.

final

floatingActionButton → Widget?

A floating action button displayed in front of body (and other floatingActionButtonLocation widgets) with an elevation that animates when the scaffold scrolls.

final

floatingActionButtonAnimator → FloatingActionButtonAnimator?

The FloatingActionButtonAnimator used to animate the floatingActionButton.

final

floatingActionButtonLocation → FloatingActionButtonLocation?

The FloatingActionButtonLocation used to position the floatingActionButton.

final

footer → Widget?

Specify the widget to be displayed at the bottom of body.

final

hashCode → int

The hash code for this object.

no setter, inherited

header → Widget?

Specify the widget to be displayed at the top of body.

final

height → double?

You can specify the size of the UniversalScaffold itself.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

loadingFutures → List<FutureOr>?

The loading widget will now be displayed until the specified Future is completed.

final

loadingWidget → Widget?

You can specify which widgets to display when loadingFutures is specified.

final

onDrawerChanged → void Function(bool)?

Called when the drawer is opened or closed.

final

onEndDrawerChanged → void Function(bool)?

Called when the endDrawer is opened or closed.

final

persistentFooterAlignment → AlignmentDirectional

The alignment of persistentFooterButtons relative to the Scaffold's ScaffoldGeometry.floatingActionButtonArea.

final

persistentFooterButtons → List<Widget>?

A list of widgets to display at the bottom of the scaffold.

final

primary → bool

Whether the appBar is part of the primary Scaffold widget.

final

resizeToAvoidBottomInset → bool?

Whether the body should resize to avoid the window padding when the keyboard is displayed. If true, resize.

final

restorationId → String?

The restoration ID to save and restore the state of the Scaffold.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

sideBar → PreferredSizeWidget?

Create a sidebar.

final

sideBarOnDrawerAlways → bool

If set to true, the sidebar will always be placed in the drawer regardless of screen size.

final

waitTransition → bool

Setting this to true will prevent body from being displayed during the transition animation, resulting in a smooth animation.

final

width → double?

You can specify the size of the UniversalScaffold itself.

final

Methods

alignAt(Alignment alignment, {Key? key, double? heightFactor, double? widthFactor}) → Align

Available on Widget, provided by the UniversalUIWidgetStructureExtensions extension

Move Widget to alignment.

background(Color backgroundColor) → DecoratedBox

Available on Widget, provided by the UniversalUIDecorationExtensions extension

Change the backgroundColor of the Widget.

border(BoxBorder border) → DecoratedBox

Available on Widget, provided by the UniversalUIDecorationExtensions extension

Add border to Widget.

centerAt() → Center

Available on Widget, provided by the UniversalUIWidgetStructureExtensions extension

Center the Widget.

clipOval({CustomClipper<Rect>? clipper, Clip clipBehavior = Clip.antiAlias}) → ClipOval

Available on Widget, provided by the UniversalUIClipExtensions extension

Clip Widget in a circle.

clipRect({required BorderRadiusGeometry borderRadius, CustomClipper<RRect>? clipper, Clip clipBehavior = Clip.antiAlias}) → ClipRRect

Available on Widget, provided by the UniversalUIClipExtensions extension

Clip Widget with a rounded rectangle.

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<StatefulWidget>

Creates the mutable state for this widget at a given location in the tree.

override

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

decoration({Color? backgroundColor, BoxBorder? border}) → DecoratedBox

Available on Widget, provided by the UniversalUIDecorationExtensions extension

Add a backgroundColor background or border to the Widget.

expanded({int flex = 1}) → Expanded

Available on Widget, provided by the UniversalUIWidgetStructureExtensions extension

Give Expanded to Widget.

flexible({int flex = 1}) → Flexible

Available on Widget, provided by the UniversalUIWidgetStructureExtensions extension

Give Flexible to Widget.

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

onDoubleTap(VoidCallback callback) → GestureDetector

Available on Widget, provided by the UniversalUIGestureDetectorExtensions extension

callback when a double-tap is performed.

onDoubleTapWithInk(VoidCallback callback) → InkWell

Available on Widget, provided by the UniversalUIGestureDetectorExtensions extension

callback when a double-tap is performed.

onLongPress(VoidCallback callback) → GestureDetector

Available on Widget, provided by the UniversalUIGestureDetectorExtensions extension

Execute callback when a long press is performed.

onLongPressWithInk(VoidCallback callback) → InkWell

Available on Widget, provided by the UniversalUIGestureDetectorExtensions extension

Execute callback when a long press is performed.

onTap(VoidCallback callback) → GestureDetector

Available on Widget, provided by the UniversalUIGestureDetectorExtensions extension

callback when a tap is performed.

onTapWithInk(VoidCallback callback) → InkWell

Available on Widget, provided by the UniversalUIGestureDetectorExtensions extension

callback when a tap is performed.

opacity({required double opacity}) → Opacity

Available on Widget, provided by the UniversalUIDecorationExtensions extension

Change the transparency of Widget to opacity.

padding(EdgeInsetsGeometry padding) → Padding

Available on Widget, provided by the UniversalUIPaddingExtensions extension

Set Widget padding to padding.

paddingLTRB(double left, double top, double right, double bottom) → Padding

Available on Widget, provided by the UniversalUIPaddingExtensions extension

Set the padding of Widget based on left, top, right, and bottom.

shadow({Color shadowColor = const Color(_kColorDefault), double blurRadius = 0.0, double spreadRadius = 0.0, Offset offset = Offset.zero, BlurStyle blurStyle = BlurStyle.normal}) → DecoratedBox

Available on Widget, provided by the UniversalUIDecorationExtensions extension

Add shadow to Widget.

sizeTo({double? width, double? height}) → SizedBox

Available on Widget, provided by the UniversalUIClipExtensions extension

Set the size of the Widget to width and height.

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Methods

of(BuildContext context) → UniversalScaffoldScope?

Pass context to get Breakpoint set by UniversalScaffold at the top.