Foundation of Flutter layout

1. Introduction of features

• Everything is a Widget.

1.1 There are two types of Flutter widgets

• Stateful:StatefulWidget
• Stateless:StatelessWidget
• To customize a Widget to be able to render: implementation is requiredThe build method!

1.1.2. Why there are many properties of final modifications in Flutter, and the constructor of const modifications (constant objects).

• Because the rendering logic of Flutter is incremental.The Widget structure is a tree structure.
• To change the screen content, change the Widget object directly.
• Constant objects are created more efficiently!

1.2,MaterialApp(App material)

• Home property (home page)

  • Need a Widget

  • Scaffold widget

    • With navigation bar (appBar)
      • Elevation: 0.0The shadow under the navigation bar is set to none
    • The body attribute
      • actions: Navigation bar button
    • bottomNavigationBar: at the bottom of the tabbar
      • The defaultEven item controls may become transparent, you canSet type Indicates the type change

  • DebugShowCheckedModeBanner properties.

    • Whether to display the Debug flag (so we can do things in the Debug version)

  • FloatingActionButton properties

    • Hover button, must be implementedonPressed:

  • title

    • On Android, cross the title of the taskbar

  • Theme: You can change the water ripple effect by clicking on the theme

  • MediaQuery.removePadding():Elimination subunitThe built-in padding property (e.gListView reserved fringe height)

  • Mediaquery.of (context).size: Gets the screen size

  • PopupMenuButton(itemBuilder:itemBuilder): Hover dropdown window

1.3,ListView

• It’s like a TableView in iOS
• ListView.builder(itemCount,itemBuilder)
  • itemCountThe current listView has a total ofHow many item(There’s no section and row like in iOS, just the total number of items)
  • itemBuilder: is a callback function.function(BuildContext context,int index)(The layout of the cell)
  • controller: Scroll page (You can create a ScrollController for it)

1.4,ContainerThe widget

• Ios-like UIView. An empty widget. Is very common
• marginattribute
  • Margin, the margin around the distance between parts
  • Margin: EdgeInsets. Only (left: 10), 10 px to the left
• paddingattribute
  • The size of the widget that extends outward from the internal layout (the size widget that supports outward)
  • EdgetInsets. All (10). Expand 10 px up, down, left, and right.
  • If width and height are specified and margin and padding are set, the component layout will be displayed according to margin and padding, and then the width and height will be clipped according to the specified width and height. Therefore, the internal layout of the component may be displayed incorrectly
  • Alignment: Relative position attribute, parameter:X and Y (range -1 to 1).The origin is in the middle
• decoration:BoxDecoration(): Set rounded corners

1.5,ImagePicture widget

• Image.network(url)Constructor: Loads an image from the network.

1.6,SizedBox

• A placeholder widget that is commonly used in complex layouts.

1.7,ChipThe widget

• Air bubbles

2. Elastic box layout

2.1,Center

• Make the child part display in the center of the part
• In the Container

2.2,Row & Column

• The horizontal layoutRow.
  • The sub-parts are arranged in the main axis (transverse) direction. The main axis goes from left to right
  • textDirection: TextDirection.rtl: Special content, okChange the main axis of the Row.Move the child parts from right to leftorder
• Longitudinal layoutColumn.
  • The sub-parts are arranged in the main axis (longitudinal). The main axis goes from top to bottom
• Each UI widget can be viewed as a rectangular “box”
• Each box has an outer Margin and an inner Margin padding.
• The spindle:MainAxisAlignment
  • spaceBetween: The remaining space is evenly distributed between the widgets!
  • spaceAround: The remaining space is evenly distributed around the widgets!
  • spaceEvenly:The rest of the space is divided evenly with the widgets!
  • Start: align to the direction from the main axis
  • End: align to the end direction of the main axis
  • Center: center the main axis
• Cross axis:CrossAxisAlignmentPerpendicular to the principal axis
  • baseline:Bottom line
  • stretch:Fill the cross axis direction;
  • Center: align the cross axes in the center
  • End: aligned towards the end of the intersecting axis
  • Start: align to the beginning of the intersecting axis

2.3,ExpandedFill in the layout

• inThere is no gap left in the principal axis. Expanded wrapped parts are stretched and compressed
  • Spindle transverse, width setting invalid
  • Spindle longitudinal, height setting failure
• whenText is wrapped in Expanded.Text can be wrapped automatically. This is also called flexible layout.

2.4,Stack

• A Stack is a multi-tiered layout with the main axis running from inside out
• alignmentProperties: Locatable.
  • Alignment: alignment (x, y)X and y
  • Range -1.0 to 1.0
  • X = 0, y = 0 as the center
• PositionedThe widget
  • Left, top, right, and bottom attributes are located
  • The argument is the pixel position
• AspectRatioAspect ratio widget
  • Its Settings affect the parent layout (which is equivalent to an AspectRatio property of the parent, set as a widget, so AspectRatio is a widget, but child is discouraged)
  • sepectRatioProperty: Aspect ratio.
  • When the parent layout has both width and height, then the aspect ratio fails

2.5 State management of Flutter

• StatelessWidget StatelessWidget
• StatefulWidget has a StatefulWidget
  • Inherits the StatefulWidget to provide interfaces externally
    • implementationcreateStateMethods methods
  • Inheriting State is used to manage State
    • Hot reloading does not change the state data, only the interface, the data is in the state
    • throughsetStateSet up/change data in real time (rebuild)
  • initState:Initialize data

  class StateFulDemo extends StatefulWidget { @override _StateFulDemoState createState() => _StateFulDemoState(); } class _StateFulDemoState extends State<StateFulDemo> { int count = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.lightGreenAccent, appBar: AppBar( title: Text('statefulDemo'), ), body: Center( child: Chip( label: Text('$count'), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: (){ setState(() { count += 1; print('count = $count'); }); },),),); }}Copy the code

2.6, gesturesGestureDetector

• Package the widget that adds gestures into the GestureDetector

2.6.1, onVerticalDrugDown: (DragDownDetails details) {}

• Start vertical drag and drop down
• details.globalPosition: when pressedGlobal coordinates

2.6.2, onVerticalDrugUpdate: (DragUpdateDetails details) {}

• Vertical drag and drop real-time status

RenderBox box = context.findRenderObject();
print(box.globalToLocal(details.globalPosition));
Copy the code

3, pubspec yaml

• Configure tripartite libraries, startup diagrams, image access paths, etc

3.1. Configure the image resource path

• useAssetImage(path/filename),Image.asset(filename)The calling

4, practical method induction

4.1, RenderBox

• Get the current widget’s box (in which widget to use, to get that widget)

RenderBox box = context.findRenderObject();
Copy the code

• .globalToLocal(position): Gets the global positionRelative position in box (origin 0,0 in upper left corner)

  Double x = box-tolocal (details.globalPosition).dx; double x = box-tolocal (details.globalPosition).dx; double x = box-tolocal (details.globalPosition). double y = box.globalToLocal(details.globalPosition).dy;Copy the code

Personal learning use, will continue to enrich the content