The basic layout of Flutter
Learn Flutter from 0 together!
We mentioned earlier that Flutter is made up of components. There are two types of components, one is a variable state Widget that inherits from a StatefulWidget, and the other is an immutable one that inherits from a StatelessWidget. What’s the difference? The setState() method in the StatefulWidget tells the component to invoke its own build() method to refresh the page. The setState method is missing in the StatelessWidget, so the fixed state cannot be changed. This page contains the application of these two components. The overall structure of MyApp here will not change, so the Stateless widget is used to display the page directly, but the page will still be refreshed when we click the button. So we need to inherit MyHomePage from the StatefulWidget.
To introduce our common layout classes, look at the Column and Row already included in our new project and Flex, Wrap, Stack. Let’s introduce them one by one:
The Column child element is arranged vertically
Arrange all child elements vertically. The way mainAxisAlignment is arranged, The default value is mainAxisalignment. start MainAxisalignment. start child elements are aligned vertically at the top. The mainAxisalignment. end child elements are aligned vertically at the bottom Child elements in the center of the vertically MainAxisAlignment. SpaceBetween child elements in space evenly placed MainAxisAlignment. SpaceAround Shared space according to the number of elements, center child elements respectively. MainAxisAlignment. SpaceEvenly Shared space according to the number of element + 1, child elements, respectively, in the middle.
CrossAxisAlignment The way in which a horizontal display is performed, . The default value CrossAxisAlignment center CrossAxisAlignment. Start child elements on the left shows CrossAxisAlignment. Center child elements centered CrossAxisAlignment. End Child elements on the right shows CrossAxisAlignment. Stretch CrossAxisAlignment child elements with transverse space. The effect of baseline and start to be the same
Children The child element we need to add to it. Other attributes that are not commonly used are not covered, but we can look at them when we need to.
The Row child elements are arranged horizontally
The same as Column, except that the child elements are arranged horizontally.
Flex Flex layout
Column and Row are both Flex subclasses. The difference is that they have different directions and the same usage, so Column and Row are used for specific tasks.
Wrap flow layout
As a multi-line layout, we can automatically fold the lines when we add elements that show more than one line. Axis. Horizontal: All child elements are aligned horizontally. Axis. Vertical Child elements Align vertically This parameter specifies the alignment direction of child elements. The default value is wrapalign. start. WrapAlignment. Start child elements on the left shows WrapAlignment. Center child centered WrapAlignment. End of child elements on the right show WrapAlignment spaceBetween With WrapAlignment. Start the same WrapAlignment. SpaceAround with WrapAlignment. Center WrapAlignment. Same spaceEvenly The spacing between two child elements. The default value is 0. RunSpacing The spacing between two lines after automatic line folding is 0. Children The child element we need to add to it.
Stack Stack layout
Alignment Does not specify the default alignment mode for positioned child elements, . The default value AlignmentDirectional topStart AlignmentDirectional. TopStart stack all child elements on the top left corner AlignmentDirectional. TopCenter all child elements among the stack to the top AlignmentDirectional. TopEnd stack all child elements on the top right hand AlignmentDirectional. CenterStart stack all child elements on the middle left AlignmentDirectional. Center Among all child elements stack to AlignmentDirectional. CenterEnd stack all child elements to the right in the middle of the AlignmentDirectional. BottomStart stack all child elements to the bottom on the left Stack AlignmentDirectional. BottomCenter all child elements to the bottom in the middle of the AlignmentDirectional. BottomEnd stack all child elements to the bottom of the right fit Loose stackfit. expand All child elements fill up the parent space stackfit. loose All child elements display overflow based on the specified size If the size of a subcomponent exceeds the size of the Stack, determine whether to perform trimming. The default value is: Overflow.clip overflow. clip will clip overflow. visible will also display the children we need to add to the overflow. clip
Some of the basic layout widgets are covered, and you can try them out in multiple combinations.