Flexible, Expanded and Spacer

Preface:

This is the 19th day of my participation in the August More Text Challenge. In preparation for the Nuggets’ August challenge, I’m going to pick 31 components this month that I haven’t covered before for a full analysis and attribute presentation. These articles will serve as important material for future compilation of Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

First, recognize Flexible components

The Flexible component can only be used in a Row, Column, or Flex component. We know that Row and Column are Flex components at heart, having written about using Flex a long time ago. Today we’ll take a look at the custom peripherals for Flex components. Flexible gives subcomponents the flexibility to fill the available space of the spindle.

1.Flexible basic information

Flexible inherits from ParentDataWidget

. The parent component of this type is probably unknown, since we rarely customize ParentDataWidget components. The Child component must be passed in the Flexible construct. There are two additional arguments: flex, of int type, and Fit, of FlexFit enumerated type.

The definition of a class is relatively simple. Let’s take a look at the use of this component and the use of the two properties.

2. The use of Flexible

We use the Row component as follows for testing. The outer box is the area of the Row component. Currently, there is only one head in the area, and the space is dark blue. Previously mentioned: Flexible gives the child component the flexibility to fill the available space in the spindle. So the available space here is Row divided by dark blue.

class FlexibleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 200,
        height: 54,
        color: Colors.grey.withAlpha(11),
        child: Row(
            children:[
              buildHead(),
            ],
      ),
    );
  }

  Widget buildHead(){
    return Padding(
      padding: const EdgeInsets.all( 8.0),
      child: Image.asset('assets/images/icon_head.png',width: 40,height: 40,),); }}Copy the code

Now do a little test. Add a blue Container to the Row to see how it looks. What about placeholders for Container components?

Row(
    children:[
      buildHead(),
      Container(
        color: Colors.blueAccent,
      ),
    ]
)
Copy the code

You can see that the default constraint for Container in Row 54 is [w(0,0) -h (0,54)]. Add in the fact that the Container extends over the parent region, and the Size is Size(0,54), which means that it is not visible.

Of course, we can modify the zone constraints by specifying the width to make the Container appear. But there’s a problem: How do you get the Container to fill the rest of the space?

Although we can set the width of the Container by calculating the remaining size, this calculation process is quite troublesome. In particular, there are many sub-components in the Row or they are not fixed, so it is quite difficult to calculate. In fact, the Flutter is already made for you internally and exposes a Flexible component for you to use. We just need a simple Flexible.

Row(children:[buildHead(), Flexible(//<-- use Flexible Child: Container(color: Colors. BlueAccent,),],)Copy the code

It can be seen that with the Flexible component, the constraint becomes [w(0,144) -h (0,54)], where 144 is calculated internally by the framework. Wouldn’t it be nice to just use Flexible components and not worry about computing details?

3.Flexible’s Flex property works

If there is only one subcomponent Flexible, the Flex property is set to be the same for everything. When there are multiple Flexible components, the remaining space will be divided up according to the Flex value, as shown in blue 3 red 1.

Row(
    children:[
      buildHead(),
      Flexible(
        flex:3,
        child: Container(
          color: Colors.blueAccent,
        ),
      ),
      Flexible(
        flex: 1,
        child: Container(
          color: Colors.red,
        ),
      )
    ],
),
Copy the code

This is the percentage of the remaining width (3/(3+1)) that is blue. The remaining width is 144. As you can see from the tree, the width of the first Container is 108. When there are multiple Flexible components, we can determine the proportion of the spare space of the component according to the Flex property.

4.Flexible fit attribute function

Fit is a FlexFit type enumeration with only two elements tight and Loss, so it’s not too hard. The default is Loss.

enum FlexFit {
  tight,
  loose,
}
Copy the code

So what does Tight and Loss do? Let’s take a look at the previous example: If the Flexible package has a fixed size for its sub-components, loss cannot extend its area by default, nor even the Flexible itself.

Row(
    children:[
      buildHead(),
      Flexible(
        fit: FlexFit.loose,
        child: Container(
          width: 40,
          color: Colors.blueAccent,
        ),
      ),
    ],
),
Copy the code

When tight, Flexible forces extension. That’s the big difference between the two.

Row(
    children:[
      buildHead(),
      Flexible(
        fit: FlexFit.tight,
        child: Container(
          width: 40,
          color: Colors.blueAccent,
        ),
      ),
    ],
),
Copy the code

The above example may not be obvious about the malleability of containers themselves. This can be illustrated by a fixed size Icon: loose on the left, tight on the right. Just remember that Tight forces his area to stretch.

Ii. Realization of Expanded components

Expanded’s implementation is very, very simple, and here’s the full code. Expanded is a Flexible component that inherits the Flexible component and keeps the FIT value tight.

There is no difference in use between the two. Flexible can set fit values, so it is more useful than Expanded. Scenarios that force extension use Expanded component semantics are better and simpler.

Implementation of the Spacer component

Spacer’s implementation is also very simple, and here’s the full code. It is a StatelessWidget that internally relies on the Spacer component for its functionality, with the distinction that it cannot set child components and is itself used as a blank placeholder.

In general, the capabilities of Spacer and Expanded are implemented based on Flexible components. If you know the Flexible component, you’ll know everything. That’s the end of this article. Thanks for watching and see you tomorrow