Common layout of Flutter

Common layout of Flutter

In the world of UI programming, each view is nested within the layout to render the appropriate UI effect. Let’s take a look at the layout of Flutter today.

Since everything in the world of Flutter is a Widget, the natural layout is no exception. Flutter provides 31 layout widgets. The layout controls are divided in great detail. Some of the same (or similar) effects can be achieved with multiple layout widgets, giving Flutter more layout types than native Android and iOS platforms. Based on past experience, layouts can be divided into monadic Widget layouts and multi-child Widget layouts.

Monad Widget layout

The monadic Widget layout class container is relatively simple and is generally used to style its unique child widgets, such as limiting size, adding background color styles, inner spacing, rotation, and so on. These layout widgets include Container, Padding, and Center.

What are these layouts? For details on the layout of widgets, see Container, Padding, and Center

Container

Container is one of the most commonly used layouts. You can set width and height, margin, padding, background color, shape, alignment of child widgets, and so on.

Padding

When you only need to set the padding for the widget, you can use a simpler layout — padding.

Center

To Center a widget in the parent container, use Center.

Multi-child Widget layout

After looking at three commonly used monadic widget layouts, it must be easy. Let’s dive into the multi-child widget layout. The multiple sub-widget layouts commonly used in Flutter are Row, Column, and Expanded.

Row

Row: Represents a Row, and the child widgets are arranged horizontally. Let’s first look at the constructor in Row

Row({ Key key, MainAxisAlignment MainAxisAlignment = MainAxisAlignment. Start, / / shaft alignment MainAxisSize MainAxisSize = Max,// width, MainAxisSize. Max means full parent container, MainAxisSize. Min means adaptive, CrossAxisAlignment CrossAxisAlignment = CrossAxisAlignment center, / / vertical axis alignment TextDirection TextDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline textBaseline = TextBaseline.alphabetic, List<Widget> children = const <Widget>[], })Copy the code

Main axis: represents the direction in which the container places the child widgets. The vertical axis is the other direction perpendicular to the main axis. Let’s look at an example:

Column

Column: represents a Column, and the child widgets are aligned horizontally. Let’s first look at the constructors in Column

  Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })
Copy the code

It turns out that it’s exactly the same as Row, and it’s used the same way, so I’m not going to go into it too much,

Expanded

With Row and Column controls alone, the container cannot be filled when the child widgets are small, and the visual style is ugly. In such a scenario, Expanded controls can be used to make allocation rules to fill the remaining space of the container. Use the Android LinearLayout weight layout_weight to set the weight of the widget to the rest of the controls.

Stack Widget layout: Stack and Positioned

The Stack container is very similar to the absolute positioning in the front end and the Frame layout in Android. Child widgets can be superimposed on each other and can be positioned based on the position of the top, bottom, left, and right corners of the parent container. The Stack provides the container in a stacked position, while the position of the child widgets provides the ability to set.

MaterialApp

It is an entry Widget commonly used in app development in accordance with the Design concept of MaterialApp Design. It can be seen from the source code that there are multiple parameters in the construction method of this Widget. MaterialApp

MaterialApp({Key Key, this.title = ", // a single line description of the device used to identify the application for the user this.home, // a widget for the default route of the application, which defines when the current application is opened, This. color, // The main color used by applications in the operating system interface. This.theme, // The color used by the application widget. This.routes = const <String, WidgetBuilder>{}, // This. NavigatorKey, // The key used when building the navigator. This. initialRoute, // If the navigator is built, The name of the first route is this.onGenerateRoute. // The route generator used by the application to navigate to the specified route calls this.onUnknownRoute, // Call this.navigatorObservers = const <NavigatorObserver>[] when onGenerateRoute is unable to generate a route (excluding initialRoute). This.builder, // used to insert widgets on top of the navigator, but under other widgets created by the WidgetsApp widget, Or to completely replace the navigator this.onGenerateTitle, // This callback is called to generate the application's title string if it is not empty, otherwise the title is used. This.locale, // The initial locale of the application's localization widget is based on this value. This localizationsDelegates, / / the application commissioned by localization of the widget. Enclosing localeListResolutionCallback, / / the callback is responsible for the application startup and user to change the setting of the region of equipment selected areas of the application Settings. this.localeResolutionCallback, // this.supportedLocales = const <Locale>[Locale('en', 'US')], / / the application is localized region list enclosing debugShowMaterialGrid = false, / / open the drawing baseline grid material application grid paper covering enclosing showPerformanceOverlay = false, / / open the performance superposition enclosing checkerboardRasterCacheImages = false, / / open the raster image cache checkerboard enclosing checkerboardOffscreenLayers = false, / / open the render to the outside of the screen bitmap layer of checkerboard enclosing showSemanticsDebugger = false, / / open the display frame of accessibility information report covering enclosing debugShowCheckedModeBanner = true, // Open a small "DEBUG" banner in selected mode to indicate that the application is in selected mode})Copy the code

There are a lot of parameters, in the use of time can be selected according to the need to configure, not too much, we commonly used is: this.theme, this.home and so on

Scaffold

The Scaffold translates to scaffolding and implements the basic Material Design visual layout structure. This class provides apis for displaying drawers, snackbars, and bottom sheets.

Const Scaffold ({Key Key, enclosing appBar, / / title bar enclosing body, / / is used to display the main content of the Widget interface enclosing floatingActionButton, // A button that floats over the body, The default display in the lower right corner enclosing floatingActionButtonLocation, / / used to set the floatingActionButton shows the location of the enclosing floatingActionButtonAnimator, / / floatingActionButton when moving to a new location of animation enclosing persistentFooterButtons, / / this state button. The drawer, / / drawer on the left of the menu this. EndDrawer, This. '/ / right side of the drawer menu bottomNavigationBar, / / at the bottom of the navigation bar. Enclosing bottomSheet, / / is displayed in the toolbar at the bottom of this. BackgroundColor, / / content this. The background color of resizeToAvoidBottomPadding = true, // Controls whether the body of the interface content is rearranged to avoid being overlaid at the bottom, e.g. when the keyboard is displayed, rearranged to avoid being overlaid by the keyboard. This. primary = true,// Whether that Scaffold is displayed at the top of the page})Copy the code

Take a look at some examples:

Scaffold(appBar: Title: Text), Bottom: TabBar(Tabs) [ Text("Container"), Text("Padding"), Text("Center"), ], ), ), body: TabBarView( children: [ ContainerDemo(), PaddingDemo(), CenterDemo(), ], ), ),Copy the code

DefaultTabController

The top navigation component, TabBar, is usually located below the AppBar. The TabBarView and TabController are commonly used together with the TabBar (the top navigation TAB).

DefaultTabController({Key Key, @required this.length,// Number of tabs this.initialIndex = 0, @required this.child,// Main page content displayed})Copy the code

TabBar

Const TabBar({Key Key, @required this.tabs,// The contents of the Tab to display. May also be other widgets. This controller, / / TabController object enclosing isScrollable = false, whether can / / rolling enclosing indicatorColor, / / color indicator IndicatorWeight = 2.0,// Indicator height this. IndicatorPadding = EdgeInsets. Zero,// indicator bottom padding IndicatorSize,// How to calculate the size of the indicator, TabBarIndicatorSize. TAB: With each TAB width, TabBarIndicatorSize. Label: This. LabelColor,// Select the color of label this.labelStyle,// Select the style of label this.labelPadding, the padding of each label Enclosing unselectedLabelColor, / / not selected the color of the label enclosing unselectedLabelStyle, / / not the style of the selected label})Copy the code

TabBarView

Const TabBarView ({Key Key, @ required this. Children, / / Tab page set of content components. This controller, / / TabController object this. Physics,})Copy the code

Take a look at some examples:

Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold(appBar: Title: Text), Bottom: TabBar(Tabs) [ Text("Container"), Text("Padding"), Text("Center"), ], ), ), body: TabBarView( children: [ ContainerDemo(), PaddingDemo(), CenterDemo(), ], ), ), ), );Copy the code