\

How to develop Flutter layout

• Container
• RendderObjectWidget
• • SingleChildRenderObjectWidget (single node)
  • • Opacity
    • ClipOval
    • ClipRRect
    • PhysicalModel
    • Align Center
    • Padding
    • SizedBox
    • FractionallySizedBox
  • MultChildRenderObjectWidget (nodes)
  • • Stack is used with jam
    • Row
    • Column
    • Wrap
• ParentDataWidget
• • Positioned
  • Flexible Expanded

Container

Parameters of the Container	type	instructions
width	double	The width of the
height	double	high
child	Widget	Subcontainer contents
alignment	AlignmentGeometry	AlignmenttopLeft… Align.bottomright Sets the position of the child widgets.
padding	EdgeInsetsGeometry	From the outside
color	Color	The container color
decoration	Decoration(BoxDecoration)	Decorators, usually BoxDecoration
margin	EdgeInsetsGeometry	From the outside

BoxDecoration parameter

Container(
      margin: EdgeInsets.all(50),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: NetworkImage(
                "Https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1744362770, 11 & gp = 0. 1889985818 & FM = JPG")),
          //image overwrites color!
          color: Colors.black,
          // Gradient background gradient overwrites color

          // SweepGradient
          // RadialGradient
          // LinearGradient
          gradient: LinearGradient(
              begin: Alignment.topRight,  / / that LinearGradient properties
              end: Alignment.bottomLeft,  / / property
              colors: [
                Colors.blue.withOpacity(0.3),
                Colors.black.withOpacity(0.3),
                Colors.red.withOpacity(0.3),
                Colors.yellow.withOpacity(0.3),]),// border: Border.all(
        // color: Colors.red,
        // width: 3,
        // ),
          // the borderRadius property cancels this
        border: Border(
            top: BorderSide(color: Colors.blue, width: 3), // Top border
            right: BorderSide(color: Colors.red, width: 4), // Right border
            bottom: BorderSide(color: Colors.yellow, width: 5), // Bottom border
            left: BorderSide(color: Colors.cyan, width: 6)), // Left border

        // The rounded corner property cancels the border!!
        borderRadius: BorderRadius.all(Radius.circular(200)),
          boxShadow: [
            BoxShadow( // Set the first shadow effect
                color: Colors.green, // The shadow color is green
                offset: Offset(-20, -20),// Set the offset
                blurRadius: 10.// The blur radius is 10
                spreadRadius: 10), // The extension radius is 10
            BoxShadow( // Add a second shadow
                color: Colors.yellow, // The shadow color is yellow
                offset: Offset(10.10), // Lower right offset by 10
                blurRadius: 20,
                spreadRadius: 20),]));Copy the code

Effect:

RendderObjectWidget

SingleChildRenderObjectWidget (single node)

Opacity

 Opacity(
            opacity: 0.8,
            alwaysIncludeSemantics: false,
            child: Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 100,height: 150,),)Copy the code

ClipOval

The rounded components

ClipOval parameters	type	instructions
clipBehavior	Clip	Clip. None does not set rounded corners.
child	Widget	The child Widget component

  ClipOval(
// clipBehavior: clip. none,// Do not set rounded corners
            child: Image.network(
              "http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
              width: 100,
              height: 150.)Copy the code

Effect:

ClipRRect

 ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            child: Image.network(
              "http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",
              width: 100,
              height: 150,),)Copy the code

PhysicalModel

Sets the component transform type control

Note: Bold are required parameters:

Go directly to the code (change PageView for example)

Container(
              height: 200,
              margin: EdgeInsets.all(30),
              alignment: Alignment.center,
              child:PhysicalModel(
                borderRadius: BorderRadius.circular(20),
                clipBehavior: Clip.antiAlias, // Set anti-aliasing this must be added!
                shape: BoxShape.circle,// Set rounded corners
                elevation: 20,
                color: Colors.transparent,
                shadowColor: Colors.greenAccent,// Shadow color
                child:  PageView(
                  children: <Widget>[
                    initPageViewItem("Page1", Colors.white),
                    initPageViewItem("Page2", Colors.yellow),
                    initPageViewItem("Page3", Colors.red),
                  ],
                ),
              )
            )
Copy the code

Effect:

Align Center

Center(
      child: Text("Centered...?"),Copy the code

Padding

Inside margin component

Padding(
              padding: EdgeInsets.only(left: 60),
              child: Text("I've moved to the left."),Copy the code

Effect:

SizedBox

 SizedBox(
              width: 100,
              height: 100,
              child: Container(
                padding: EdgeInsets.only(top: 30),
                color: Colors.green,
              ),
            )
Copy the code

FractionallySizedBox

The width fills the component

  FractionallySizedBox(
                  widthFactor: 0.9,
                  child: Container(
                    padding: EdgeInsets.only(top: 30),
                    alignment: Alignment.center,
                    color: Colors.yellow,
                    child: Text("FractionallySizedBox",style: TextStyle(fontSize: 10),),),)Copy the code

Effect:

MultChildRenderObjectWidget (nodes)

Stack is used with jam

Fragment is equivalent to Fragment in Android

Stack(
                  fit: StackFit.passthrough,// I don't see the effect
                  overflow: Overflow.clip,// I don't see the effect
                  textDirection: TextDirection.ltr,// I don't see the effect
                  alignment: Alignment.topRight,// I don't see the effect
                  children: <Widget>[
                    Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 100,height: 150,),
                    Positioned(
                      left: 0,
                      top: 0,
                      child: Image.network("http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg",width: 20,height: 30,),) ",Copy the code

Effect:

Row

Column

Equivalent to the horizontal layout in Android LinearLayout

Properties are exactly the same as rows, except that one is horizontal and one is vertical, so you’re not writing repetitive code here.

Wrap

This is the same as the vertical layout of the Android LinearLayout, which is different from the Row. The Wrap automatically wraps

Wrap parameters	type	instructions
direction	Axis	Axis. Horizontal Axis. Vertical Vertical Axis
alignment	WrapAlignment	Alignment (see for yourself)
spacing	double	About spacing
runSpacing	double	Distance between up and down
runAlignment	WrapAlignment	Up-down alignment
textDirection	TextDirection	Textdirection. RTL is sorted from right to left textdirection. LTR is sorted from left to right, which is the default
children	Widget	The child widgets
verticalDirection	VerticalDirection	Up Verticaldirection. down Verticaldirection. down Verticaldirection. down Verticaldirection. down Verticaldirection. down Verticaldirection. down Verticaldirection. down Verticaldirection. down verticaldirection. down

 Container(
                     child: Wrap(
                       direction: Axis.horizontal,// The arrangement
                       alignment: WrapAlignment.end,// Alignment
                       spacing: 5./ / spacing
                       runSpacing: 20.// Up and down spacing
                       runAlignment: WrapAlignment.spaceBetween,
                       textDirection: TextDirection.rtl,
                       verticalDirection: VerticalDirection.down,
                       children: <Widget>[
                         initChipItem("Flutter"),
                         initChipItem("Java"),
                         initChipItem("C++"),
                         initChipItem("Java"),
                         initChipItem("Flutter"),
                         initChipItem("C#"),
                         initChipItem("PHP"),
                         initChipItem("HTML"),
                         initChipItem("Flutter"),
                         initChipItem("Java"),
                         initChipItem("Pathon"),
                         initChipItem("Flutter"),
                         initChipItem("switch"),
                       ],
                     ),
                   )

initChipItem(String lable) {
  return Chip(
    label: Text(lable),
    avatar: CircleAvatar(
      backgroundColor: Colors.black87,
      child: Text(lable.substring(0.1))),// Round head
  );
}
Copy the code

Note: Scaffold packaging is required to use Chip! Check out the results:

ParentDataWidget

Positioned

Flexible Expanded

Expand, often used to fill the vertical height of the parent container

It’s not that hard. One line of code. Go straight to the code, okay

Expanded(
                  child: Container(
                    color: Colors.red,
                  ),
                )
Copy the code

Click here to see the full code.