[Flutter 2-9] Flutter’s Hands-On tutorial on UI Layout and Widgets — Flexible Layout control

The author | | vlad source vlad (public number: fulade_me)

Flexible

Flexible allows children of Row, Column, and Flex to be filled with parent controls. It can be used flexibly and has the property of weight. A similar control to Flexible is Expanded. Let’s start with Flexible’s constructor

Const Flexible({// key key key, this.flex = 1) const Flexible({// key key key, this.flex = 1); /// The default fit parameter is flexfit. loose which means that the child control can be laid out in the smallest possible size this.fit = flexfit. loose, @required Widget child,}).

Scale layout

Flexible’s parameter Flex is the value that represents the proportion. If we have three children inside the Column and each of them has a Flex value of 1, then the height of the three children will be one third of the height of the Column (the width in the case of Row). That means the three children will split the height of the Column (the width in the case of Row) evenly.

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
    ],
)

The diagram below:

Then we set Flex to 1, 2, and 3, so the height of the three controls is 1/5, 2/5, and 3/5, respectively

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 3,
        ),
    ],
)

The effect is as follows:

FlexFit. Loose and FlexFit. Tight

Enumerated values	describe
loose	LOOSE means that the smallest height (width under the Row) layout is allowed to ignore the Flex value
tight	Must be displayed with the maximum Flex value set

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset(
            "images/image_demo.jpg",
            height: 80,
            ),
            fit: FlexFit.loose,
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
    ],
)

We set it for the second controlflexThe value is 2. GiveImageSet the height to80To givefitIs set toFlexFit.looseAt this time, the priority isFlexFit.loose.flexThe value of theta is going to be ignored, so theta hereImageIt’s going to be the height80The size to display.

The effect is as follows:

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset(
            "images/image_demo.jpg",
            height: 80,
            ),
            fit: FlexFit.tight,
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
    ],
)

We put theFlexFit.looseInstead ofFlexFit.tightThe height of the current setting is ignored80, directly using the scale to display.

The effect is as follows:

Layout priority

If we set flex to 0, then Flexible is not assigned a height of 0. Instead, Flexible with flex of 0 will take priority and use as much height as possible for the Column

Column( children: [ Flexible( child: Image.asset("images/image_demo.jpg"), flex: 1, ), Flexible( child: Image.asset("images/image_demo.jpg"), flex: 2, ), Flexible( child: Image.asset("images/image_demo.jpg"), flex: 0,),,)

You can see the third oneFlexibleIs the highest in height, because it takes the highest height first.

Fill the remaining space

In many cases, not only is there a Flexible control within a Column, but there is also a control such as a Container. In both cases, the Container will prioritize the layout and use the desired height, and the remaining height will be filled by the Flexible control. If you have multiple Flexible controls, they will divide the remaining height according to the Flex value they set.

Column(
    children: [
        Container(
            child: Image.asset("images/image_demo.jpg"),
            width: 100,
            height: 100,
        ),
        Container(
            child: Image.asset("images/image_demo.jpg"),
            width: 100,
            height: 100,
        ),
        Flexible(
            child: Container(
                decoration: BoxDecoration(color: Colors.green),
                width: 300,
            ),
        ),
    ],
)

The effect is as follows:

To experience the operation effect of the above example, you can check my GitHub warehouse project flutter_app->lib->routes->flexible_page.dart, and you can download and run it and experience.

---