This is the 11th day of my participation in Gwen Challenge

preface

In the previous article, we talked about Row, Column, and Flex layouts and their corresponding effects. The mainAxisAlignment allows you to set the layout between subitems, but it only allows you to set the overall subitems, not the layout subitems. In this article we’ll talk about more refined layout Settings for subclasses.

Flexible (Flexible component)

Here,FlexibleFrom the last postFlexIt looks a bit like this, but in fact the two implementations are completely different, with different components acting on the layout of the whole child and on the layout of the individual child.FlexibleCan look at the source code, here we have a lookFlexThe source code is also very simple.

  • flexFill ratio
  • fitAvailable space filling method
  • childNested child widgets

Flex fill ratio

// Horizontal layout
Row(
  children: [
    Flexible(
      // The first one takes up 1/6
      flex: 1,
      child: getItem(1),
    ),
    Flexible(
      // The second one occupies 2/6
      flex: 2,
      child: getItem(2),
    ),
    Flexible(
      // The third one takes up 3/6
      flex: 3,
      child: getItem(3),),,)Copy the code

getItem

  /// Get subitems (using location parameters here)
  Widget getItem(int index, [double width = 60.double height = 60]) {
    return Container(
      // Set width and height to 60
      width: width,
      height: height,
      // Set the background color
      color: Colors.orange.shade200,
      // Set the gap
      margin: EdgeInsets.all(2),
      // Center the subitem
      alignment: Alignment.center,
      // Set the child
      child: Text('$index')); }}Copy the code

See the effect



What? That’s not what common sense would expect, as we saw abovefitThe default parameter isFlexFit.looseAnd here,getItemThe width and height of the child is set to60, so the above phenomenon will occur.

Do some modification

Here we change getItem to getItem(1, NULL, 60) and set it to unrestricted width to see what happens

Flexible(
  flex: 1,
  fit: FlexFit.loose,
  child: getItem(1.null.60),Copy the code



So that’s what we expect, let’s make some adjustments,getItemThe same, only thefitParameter is changed toFlexFit.tightSee the effect

Flexible(
  flex: 1,
  fit: FlexFit.tight,
  child: getItem(1),Copy the code



This is what we expected. Why is that?

Because Flexfit.loose allows the child to be as large as the maximum available space (1/6), but can be smaller, we set the child width to 60 at the beginning, so it’s 60. If you don’t set the child width, it’s the maximum allowed space. Since flexfit.tight is forced to fill the subclass with available space (1/6), it doesn’t matter if we set the subitem width

The subtotal

  • Flex free space ratio
  • Fit Indicates how to fill the available space of the subitem
    • Flexfit.loose allows children <= free space
    • Flexfit.tight subterm == available space

Expanded (Expanded)

This Widget is also very commonly used. Now let’s take a look at its implementation and see what it means



To see that he inherited fromFlexibleYou kind of get it, and then we’ll look at himfitSet up theFlexFit.tight(subitem == available space), now look at the following code, you say what effect?

Row(
  children: [
    Expanded(
      flex: 1,
      child: getItem(1),
    ),
    Expanded(
      flex: 2,
      child: getItem(2),
    ),
    Expanded(
      flex: 3,
      child: getItem(3),),,)Copy the code



Oh, and, as you’d expect, he and us up thereFlexibleThe last example shown has the same effect.

Application scenarios

Take a look at the following simple exception effects



The implementation code is as follows

Row(
  children: [
    getItem(1),
    Text(
      'Expanded ZeroFlutter chat, ExpandedZeroFlutter talk ExpandedZeroFlutter talk ExpandedZeroFlutter talk ExpandedZeroFlutter talk Expanded') ",Copy the code

In general we have to think about fit, so you might want something like this



The implementation code is as follows, which we useExpandedThe parcelTextAnd then set up a maximum of 2 lines, more than… According to

Row(
  children: [
    getItem(1),
    // Use Expanded wrap Text
    Expanded(
      child: Text(
        'Expanded ZeroFlutter chat, ExpandedZeroFlutter talk ExpandedZeroFlutter talk ExpandedZeroFlutter talk ExpandedZeroFlutter talk Expanded',
        overflow: TextOverflow.ellipsis,
        maxLines: 2),)],)Copy the code

Spacer (bullet fragments)

This Widget may be the first you’ve heard of, but you’ll probably be using it a lot from now on.

// Do you think so?
Row(
  children: [
    getItem(1),
    Expanded(child: SizedBox()),
    getItem(2),
    Expanded(
      child: SizedBox(),
      flex: 2,
    ),
    getItem(3) ",Copy the code

According to the previous study, you are above 👆🏻 think so? In fact, we can be simpler, like the following 👇🏻

Row(
  children: [
    getItem(1),
    Spacer(),
    getItem(2),
    Spacer(flex: 2),
    getItem(3) ",Copy the code

Let’s look at the implementation



Add up the comments66Line of code, in fact, if the official does not provide, if we often use this requirement, we can also package a.

The implementation is what we thought it would be, which is useExpandedWrapped up in aSizedBox 。

Here we see that the StatelessWidget is immutable, whether or not the encapsulated Widget in a Flutter is mutable depends on itself. Here we have flex set it and it will not change. If it does change, Spacer will change due to external changes, so this is important to understand.

The subtotal

Here we have talked about the use of Flexible, Expanded and Spacer, and also made clear their relationship as follows, it will be convenient to use in the future.

  • Flexible => Expanded => Spacer

The last night more difficult, if there is help please support oh

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • Flexible (Flutter Widget of the Week)
  • Flutter-Flexible
  • Expanded (Flutter Widget of the Week)
  • Flutter-Expanded
  • Spacer (Flutter Widget of the Week)
  • Flutter-Spacer

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible