The sample making: flutterlayout https://github.com/LiuC520/flutterlayout

MaterialApp

A series of flutter layouts: 1-column, 2-row, 3-center, 4-container, and 5-matrix4 Flutter layout -6-MaterialApp Serialized: Flutter layout -7-About dialog serialized: Flutter layout -8- Animated_icons animation pictures

AppBar: Contains status bar and navigation bar

screenshot.png

Let’s take a look at how the figure above is used

appBar: AppBar( title: Container( color: Colors.white10, child: Row( children: <Widget>[Text(' title 1'), Text(' title 2')],),), actions: <Widget>[IconButton(icon: icon (Icons. Playlist_play), tooltip: 'Air it', onPressed: null, ), IconButton( icon: Icon(Icons.playlist_add), tooltip: 'Restitch it', onPressed: null, ), ], leading: Builder( builder: (BuildContext context) { return IconButton( icon: const Icon(Icons.menu), onPressed: () { Scaffold.of(context).openDrawer(); }, tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip, ); },), // we can use flexibleSpace: Text('d12321312'), backgroundColor: color. red, // Navigation and status bar color elevation: Top: PreferredSize(Child: Text('bottom'), PreferredSize: Size(30, 30)), // What is displayed under appBar? Brightness. Light, // Controls the color of the status bar, the lignt text is gray, and the dark is white iconTheme: IconThemeData(color: Colors. Yellow, opacity: 0.5, size: TextTheme: textTheme (), // This theme has many parameters. CenterTitle specifies 13 different font styles for flutter: BottomOpacity: 0.8, // Bottom opacity titleSpacing: 10, // Blank area around title,),Copy the code

1. Title

Can be text or widget, and can be customized such as:

Container(color: Colors. White10, child: Row(children: <Widget>[Text(' title 1'), Text(' title 2')],),), // indicates that two Text are aligned horizontallyCopy the code

// We can also use a text instead of text (' heading 1').Copy the code

2. Actions: Indicates the actions of the button on the right

Is an array of widgets:

actions: <Widget>[
          IconButton(
            icon: Icon(Icons.playlist_play),
            tooltip: 'Air it',
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.playlist_add),
            tooltip: 'Restitch it',
            onPressed: null,
          ),
        ],
Copy the code

It’s two buttons, and it also has the click event, but I’ve made the click event empty.

3. Leading: indicates the action of the left button

This is also a widget that can also customize actions as follows:

leading: Builder( builder: (BuildContext context) { return IconButton( icon: const Icon(Icons.menu), onPressed: () { Scaffold.of(context).openDrawer(); }, tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip, ); },), // Left back button, can have buttons, can have text above to build a new widget, click the event to open the left drawerCopy the code

4. FlexibleSpace:

Stacked behind the toolbar and TAB bar. It is the same height as the app bar as a whole.

Flexible space is not really flexible unless the container of [AppBar] changes the size of [AppBar]. [SliverAppBar] in [CustomScrollView] changes the height of [AppBar] as it scrolls. Also check out the FlexibleSpaceBar

flexibleSpace: Text('d12321312'),
Copy the code

flexibleSpace: FlexibleSpaceBar( title: Text('flexibleSpace'), background: [image.fit] set to [boxfit.cover]. CenterTitle: true, collapseMode: collapseMode Collapsemode. pin, // The background is fixed in place until the minimum range is reached. The default is collapsemode. parallax(will scroll in parallax mode.) And none, scrolling has no effect),Copy the code

BackgroundColor: Colors. Red, // The color of the navigation bar and status bar

The colors and styles of the navigation bar can be configured uniformly in the MaterialApp of Main.dart. But there are times when we have separate designs for some of our pages, and this background can be modified. – 6 – MaterialApp flutter layout

Elevation: 10, // Shadow height

By default there is a height shadow of 4 below the navigation bar, this can also be changed

7. Bottom: Widget displayed below the navigation bar

Look at the bottom text in the picture above

Bottom: PreferredSize(child: Text('bottom'), PreferredSize: Size(30, 30)), // Display the thing under appbarCopy the code

“Bottom” requires PreferredSize, including child and width and height

Did you change the brightness of the Status bar

This is set with [backgroundColor], [iconTheme], and [textTheme]. Default is and ThemeData primaryColorBrightness consistent.

Brightness. Light, white with black. Dark, black with whiteCopy the code

9. IconTheme, the style of the left chart

Opacity: 1; size: 30), //icon theme style. The default color is black, opacity is 1, and size is 24Copy the code

The color is yellow, the opacity is 0.5, and the maximum value is 1; And the size is 30. The default size is 24

10. TextTheme: Style of font

We use merge to set this, so we don’t change the other values.

There are 13 styles by default:

NAME SIZE WEIGHT SPACING 2018 NAME Display4 112.0 Thin 0.0 headline1 Display3 56.0 Normal 0.0 headline2 Display2 45.0 Normal 0.0 headline3 Display1 34.0 normal 0.0 headline4 Headline 24.0 normal 0.0 headline5 title 20.0 Medium 0.0 Headline6 subhead 16.0 normal 0.0 subtitle1 body2 14.0 medium 0.0 body1 body1 14.0 normal 0.0 body2 Caption 12.0 normal Button 14.0 medium 0.0 Button subtitle 14.0 medium 0.0 subtitle2 overline 10.0 normal 0.0 overlineCopy the code

W100 normal is fontweight. w400 medium is fontweight. w500 The spacing between characters is 0.0 and size is the font size

11. CenterTitle: Whether the title is centered

CenterTitle: true, // Whether the title is centered, default is falseCopy the code

The default is false. In general, our design is to center the title of the navigation bar. We do not follow the MD design of Android, but apple’s design

Opacity of the entire navigation bar

BottomOpacity: 0.8, // Bottom opacity

14. TitleSpacing: 10, // Blank area on either side of title,

Example location: github.com/LiuC520/flu…