[shutter] shutter layout component (wrap component | expanded component)

One 、Wrap Components

---

Wrap Components : This component is a horizontal linear layout component that can wrap lines , And Row Similar between components , But you can change lines ;

class Wrap extends MultiChildRenderObjectWidget { 
      /// Creates a wrap layout.  ///  /// By default, the wrap layout is horizontal and both the children and the  /// runs are aligned to the start.  ///  /// The [textDirection] argument defaults to the ambient [Directionality], if  /// any. If there is no ambient directionality, and a text direction is going  /// to be necessary to decide which direction to lay the children in or to  /// disambiguate `start` or `end` values for the main or cross axis  /// directions, the [textDirection] must not be null.  Wrap({ 
        Key key,    this.direction = Axis.horizontal,    this.alignment = WrapAlignment.start,    this.spacing = 0.0, //  Horizontal spacing     this.runAlignment = WrapAlignment.start,    this.runSpacing = 0.0, //  Vertical spacing     this.crossAxisAlignment = WrapCrossAlignment.start,    this.textDirection,    this.verticalDirection = VerticalDirection.down,    List<Widget> children = const <Widget>[], //  Set of child components   }) : super(key: key, children: children);}

Wrap Component usage :

• Set the horizontal spacing : spacing Field ;
• Set the vertical spacing : runSpacing Field ;
• Set the sub components in the layout : children Field ;

//  Horizontal linear layout with auto wrapping Wrap(  //  Set horizontal margins   spacing:  Spacing value  ( double  type  ),  //  Set the vertical spacing   runSpacing:  Spacing value  ( double  type  ),  children: <Widget>[  	 Set up several sub components    ])

Code example : Chip Component usage reference 【Flutter】StatelessWidget Components ( CloseButton Components | BackButton Components | Chip Components ) Blog ;

//  Horizontal linear layout with auto wrapping Wrap(  //  Set horizontal margins   spacing: 40,  //  Set the vertical spacing   runSpacing: 10,  children: <Widget>[    Chip(      //  Set the body label text       label: Text(" Song Jiang "),      //  Set the left round avatar       avatar: CircleAvatar(        //  Set the background color         backgroundColor: Colors.green.shade600,        child: Text(" The song dynasty "),      ),    ),    Chip(      //  Set the body label text       label: Text(" Jun-yi lu "),      //  Set the left round avatar       avatar: CircleAvatar(        //  Set the background color         backgroundColor: Colors.green.shade600,        child: Text(" Lou "),      ),    ),    Chip(      //  Set the body label text       label: Text(" Wu Yong "),      //  Set the left round avatar       avatar: CircleAvatar(        //  Set the background color         backgroundColor: Colors.green.shade600,        child: Text(" Wu "),      ),    ),    Chip(      //  Set the body label text       label: Text(" Gongsun Sheng "),      //  Set the left round avatar       avatar: CircleAvatar(        //  Set the background color         backgroundColor: Colors.green.shade600,        child: Text(" Gongsun "),      ),    ),    Chip(      //  Set the body label text       label: Text(" Guan Sheng "),      //  Set the left round avatar       avatar: CircleAvatar(        //  Set the background color         backgroundColor: Colors.green.shade600,        child: Text(" Turn off "),      ),    ),  ],),

Running effect :

Two 、Expanded Components

---

Expanded Components : This component can automatically identify the direction of the parent container , Fill the remaining space vertically or horizontally ;

class Expanded extends Flexible { 
      /// Creates a widget that expands a child of a [Row], [Column], or [Flex]  /// so that the child fills the available space along the flex widget's  /// main axis.  const Expanded({ 
        Key key,    int flex = 1,    @required Widget child,  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);}

Expanded Components stay Row Components The remaining space in the horizontal direction will be automatically filled in ;

Expanded Components stay Column Components Will automatically fill the remaining space in the vertical direction ;

Code example :

//  Normal style  RowRow(  children: <Widget>[    Container(      //  The background is set to black       decoration: BoxDecoration(        color: Colors.black,      ),      //  Set the font to yellow       child: Text(        "Text  Original style ",        style: TextStyle(color: Colors.yellow),      ),    ),  ],),//  Blank line SizedBox(  width: 10,  height: 20,),//  Used  Exoanbded  Component's  RowRow(  children: <Widget>[    Expanded(      child: Container(        //  The background is set to black         decoration: BoxDecoration(          color: Colors.black,        ),        //  Set the font to yellow         child: Text(          "Text  Original style ",          style: TextStyle(color: Colors.yellow),        ),      ),    ),  ],),//  Blank line 

Execution effect :

The first component is Row There is no use of Expanded Components ;

The second component is Row Used in Expanded Components ;

3、 ... and 、 Complete code example

---

Complete code example :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget { 
      @override  _LayoutPageState createState() => _LayoutPageState();}class _LayoutPageState extends State<LayoutPage> { 
      ///  The currently selected bottom navigation bar index   int _currentSelectedIndex = 0;  // This widget is the root of your application.  @override  Widget build(BuildContext context) { 
        //  Text component style  ,  Can be set to  Text  Text component     //  Set font size  20,  The color is red     TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);    return MaterialApp(      title: ' Example layout components ',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: Scaffold(        //  Top title bar         appBar: AppBar(title: Text(' Example layout components '),),        //  Bottom navigation bar  BottomNavigationBar  Set up         // items  You can set multiple  BottomNavigationBarItem        bottomNavigationBar: BottomNavigationBar(          //  Set the currently selected bottom navigation index           currentIndex: _currentSelectedIndex,          //  Set the callback event of clicking the navigation bar at the bottom  , index  The parameter is the index value of the click           onTap: (index){ 
                //  Callback  StatefulWidget  Component's  setState  Method of setting state  ,  Modify the currently selected index             //  after  BottomNavigationBar  The component will automatically update the currently selected tab             setState(() { 
                  //  change  int _currentSelectedIndex  The state of the variable               _currentSelectedIndex = index;            });          },          //  entry           items: [          //  Set the bottom navigation bar entry ,  Each entry can be set with an icon           BottomNavigationBarItem(            //  The default icon             icon: Icon(Icons.home, color: Colors.grey,),            //  Icon in active state             activeIcon: Icon(Icons.home, color: Colors.red,),            //  Set title             title: Text(" Home page ")          ),          //  Set the bottom navigation bar entry ,  Each entry can be set with an icon           BottomNavigationBarItem(            //  The default icon             icon: Icon(Icons.settings, color: Colors.grey,),            //  Icon in active state             activeIcon: Icon(Icons.settings, color: Colors.red,),              //  Set title               title: Text(" Set up ")          )        ],),        //  Set the levitation button         floatingActionButton: FloatingActionButton(          onPressed: (){ 
                print(" Click the hover button ");          },          child: Text(" Levitation button assembly "),        ),        // Container  Container usage         body:        _currentSelectedIndex == 0 ?        //  Refresh indicator component         RefreshIndicator(          //  Display content           child: ListView(            children: <Widget>[              Container( //  Corresponding to the bottom navigation bar settings tab                 //  Set the decorator of the container  , BoxDecoration  Is the most commonly used decorator                 //  You can check it by yourself  BoxDecoration  Properties that can be set in                 decoration: BoxDecoration(color: Colors.white),                //  Set up  child  How the sub components are centered ,  Center                 alignment: Alignment.center,                //  Child components ,  The subcomponent is set to a  Column  Components                 child: Column(                  // Column  Child components ,  Set up here  Text  Text component                   children: <Widget>[                    Text(" Main page tab ,  The drop-down refresh "),                    //  A linear layout arranged horizontally                     Row(                      children: <Widget>[                        //  Original picture ,  For comparison                         Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",                          width: 100,                          height: 100,                        ),                        //  Circular clipping component  ,  take  child  Cut the layout into a circle                         ClipOval(                          //  Use  SizedBox  Component constrains layout size                           child: SizedBox(                            width: 100,                            height: 100,                            //  Use  SizedBox  Constrain this  Image  Component size                             child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),                          ),                        ),                        Padding(                          //  Set the inside margin  5                          padding: EdgeInsets.all(15),                          //  Square cutting component  ,  Cut the components into squares                           child: ClipRRect(                            //  Set the clipping fillet ,  Set the radius of the four corners to  10  Fillet of                             borderRadius: BorderRadius.all(Radius.circular(10)),                            //  Modify the transparency component  ,  Set up here  50%  transparency                             child: Opacity(                                opacity: 0.5,                                //  Set up  100x100  Size picture component                                 child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",                                  width: 100,                                  height: 100,                                ),                            ),                          ),                        ),                      ],                    ),                    //  Set up a layout container  ,  For encapsulation  PageView  Components                     Container(                      //  Set height                       height: 200,                      //  Set margins                       margin: EdgeInsets.all(15),                      //  Set decoration ,  Dark orange background                       decoration: BoxDecoration(                          color: Colors.white                      ),                      //  Set up subcomponents  PageView  Cutting components for                       child:                      PhysicalModel(                        color: Colors.transparent,                        //  Set the fillet radius  15                        borderRadius: BorderRadius.circular(50),                        //  Set crop behavior  ,  Anti-Aliasing                         clipBehavior: Clip.antiAlias,                        //  Set up  PageView  Components                         child:                        PageView(                          //  Set up  PageView  Several components encapsulated in                           children: <Widget>[                            //  The first page component                             Container(                              //  Set the center mode  ,  centered                               alignment:Alignment.center,                              //  Decorator settings  ,  Green background                               decoration: BoxDecoration(color: Colors.green),                              //  Main text displayed                               child: Text(" page  0", style: TextStyle(fontSize: 20, color: Colors.black),),                            ),                            //  The second page component                             Container(                              //  Set the center mode  ,  centered                               alignment:Alignment.center,                              //  Decorator settings  ,  Green background                               decoration: BoxDecoration(color: Colors.red),                              //  Main text displayed                               child: Text(" page  1", style: TextStyle(fontSize: 20, color: Colors.white),),                            ),                            //  The third page component                             Container(                              //  Set the center mode  ,  centered                               alignment:Alignment.center,                              //  Decorator settings  ,  Green background                               decoration: BoxDecoration(color: Colors.black),                              //  Main text displayed                               child: Text(" page  2", style: TextStyle(fontSize: 20, color: Colors.yellow),),                            ),                          ],                        ),                      ),                    ),                  ],                ),              ),              Container(                child: Column(                  children: <Widget>[                    //  level / Tile components vertically                     FractionallySizedBox(                      //  Set the width to fill the parent container                       widthFactor: 1,                      //  The level to set  /  Components of tile operation in vertical direction                       child: Container(                        decoration: BoxDecoration(color: Colors.black),                        child: Text(                          " Highly adaptive ,  The width fills the parent container ",                          style: TextStyle(color: Colors.amberAccent),                        ),                      ),                    )                  ],                ),              ),              //  Frame layout               Stack(                children: <Widget>[                  Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",                    width: 100,                    height: 100,                  ),                  //  Set the component location at  Stack  Relative position of                   Positioned(                    left: 0, //  From the right side  0  distance                     top: 0, //  From the bottom  0  distance                     //  Set the component position of the constraint                     child: Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",                      width: 25,                      height: 25,                    ),                  ),                ],              ),              //  Horizontal linear layout with auto wrapping               Wrap(                //  Set horizontal margins                 spacing: 40,                //  Set the vertical spacing                 runSpacing: 10,                children: <Widget>[                  Chip(                    //  Set the body label text                     label: Text(" Song Jiang "),                    //  Set the left round avatar                     avatar: CircleAvatar(                      //  Set the background color                       backgroundColor: Colors.green.shade600,                      child: Text(" The song dynasty "),                    ),                  ),                  Chip(                    //  Set the body label text                     label: Text(" Jun-yi lu "),                    //  Set the left round avatar                     avatar: CircleAvatar(                      //  Set the background color                       backgroundColor: Colors.green.shade600,                      child: Text(" Lou "),                    ),                  ),                  Chip(                    //  Set the body label text                     label: Text(" Wu Yong "),                    //  Set the left round avatar                     avatar: CircleAvatar(                      //  Set the background color                       backgroundColor: Colors.green.shade600,                      child: Text(" Wu "),                    ),                  ),                  Chip(                    //  Set the body label text                     label: Text(" Gongsun Sheng "),                    //  Set the left round avatar                     avatar: CircleAvatar(                      //  Set the background color                       backgroundColor: Colors.green.shade600,                      child: Text(" Gongsun "),                    ),                  ),                  Chip(                    //  Set the body label text                     label: Text(" Guan Sheng "),                    //  Set the left round avatar                     avatar: CircleAvatar(                      //  Set the background color                       backgroundColor: Colors.green.shade600,                      child: Text(" Turn off "),                    ),                  ),                ],              ),              //  Normal style  Row              Row(                children: <Widget>[                  Container(                    //  The background is set to black                     decoration: BoxDecoration(                      color: Colors.black,                    ),                    //  Set the font to yellow                     child: Text(                      "Text  Original style ",                      style: TextStyle(color: Colors.yellow),                    ),                  ),                ],              ),              //  Blank line               SizedBox(                width: 10,                height: 20,              ),              //  Used  Exoanbded  Component's  Row              Row(                children: <Widget>[                  Expanded(                    child: Container(                      //  The background is set to black                       decoration: BoxDecoration(                        color: Colors.black,                      ),                      //  Set the font to yellow                       child: Text(                        "Expanded  In the component  Text  Components ",                        style: TextStyle(color: Colors.yellow),                      ),                    ),                  ),                ],              ),              //  Blank line               SizedBox(                width: 10,                height: 100,              ),            ],          ),          //  Method of callback during refresh           //  When a drop-down operation occurs in the list ,  Call back the method           //  The callback is  Future  Type of           onRefresh: _refreshIndicatorOnRefresh,        )        :        Container( //  Corresponding to the bottom navigation bar settings tab           //  Set the decorator of the container  , BoxDecoration  Is the most commonly used decorator           //  You can check it by yourself  BoxDecoration  Properties that can be set in           decoration: BoxDecoration(color: Colors.white),          //  Set up  child  How the sub components are centered ,  Center           alignment: Alignment.center,          //  Child components ,  The subcomponent is set to a  Column  Components           child: Column(            // Column  Child components ,  Set up here  Text  Text component             children: <Widget>[              Text(" Set up page tabs ")            ],          ),        ) , //  This setting is related to  _currentSelectedIndex == 0?  Corresponding , ?:  Ternary operator       ),    );  }  /// RefreshIndicator  When a pull-down operation occurs ,  Call back the method   ///  This is an asynchronous method  ,  Add... Before the method body  async  keyword   Future<Null> _refreshIndicatorOnRefresh() async{ 
        //  Pause  500 ms ,  Use  await  Keyword implementation     //  Here  500 ms  Between  ,  The list is in refresh state     // 500 ms  after  ,  The list becomes non refreshed     await Future.delayed(Duration(milliseconds: 500));    return null;  }}

Operation effect display :

Four 、 Related resources

---

Reference material :

• Flutter Official website : https://flutter.dev/
• Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
• official GitHub Address : https://github.com/flutter
• Flutter The Chinese community : https://flutter.cn/
• Flutter Practical tutorial : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart Chinese document : https://dart.cn/
• Dart Developer website : https://api.dart.dev/
• Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )

Blog source download :

• GitHub Address : https://github.com/han1202012/flutter_cmd ( Keep updating with the progress of the blog , There may not be the source code of this blog )

• Blog source snapshot : https://download.csdn.net/download/han1202012/15484718 ( The source code snapshot of this blog , You can find the source code of this blog )