preface

Recently UI little sister gave me a picture of a football team line-up, a 4-3-3 or something.

I thought it would be easy to use Column or Row to set the mainAxisAlignment, but the two 3’s in the figure required that the space in the middle should be half of the two sides. I found that there was no mainAxisAlignment I wanted!!

Although it can be implemented in other ways, for example, Row, 👇 I’m using Spacer().

Row(
  children: [
    Spacer(flex: 2),
    Container(
      color: Colors.*lightBlue*,
      width: 50,
      height: 50,
    ),
    Spacer(flex: 1),
    Container(
      color: Colors.*amber*,
      width: 50,
      height: 50,
    ),
    Spacer(flex: 1),
    Container(
      color: Colors.*green*,
      width: 50,
      height: 50,
    ),
    Spacer(flex: 2),
  ],
)
Copy the code

Spacer() allows space to be rendered to scale, which is flexible, but I never found it good enough or convenient enough.

So I’m going to modify the source code directly! Build your own custom MainAxisAlignment!

MainAxisAlignment

Looking at the source flex. Dart file, MainAxisAlignment defines six (easy to see delete comments).

enum MainAxisAlignment {
  start,
  end,
  center,
  spaceBetween,
  spaceAround,
  spaceEvenly,
}
Copy the code

There are actually three variables defined when calculating position:

Final Double remainingSpace = math.max(0.0, actualSizeDelta); // The space in front of the column can be seen as the space above, and the space in the row can be seen as the space left. /// Late final double betweenSpace;Copy the code

Change the three variables above 👆 by switching six mainAxisaligns.

MainAxisAlignment.start

Note:

/// Place the children as close to the start of the main axis as possible. /// /// If this value is used in a horizontal  direction, a [TextDirection] must be /// available to determine if the start is the left or the right. /// /// If this value is used in a vertical direction, a [VerticalDirection] must be /// available to determine if the start is the top or the bottom.Copy the code

In the switch:

// The rest of the space is placed in the rear, and the sub-components are arranged closely. Case MainAxisAlignment. Start: leadingSpace = 0.0; BetweenSpace = 0.0; break;Copy the code

MainAxisAlignment.end

Note:

/// Place the children as close to the end of the main axis as possible.
///
/// If this value is used in a horizontal direction, a [TextDirection] must be
/// available to determine if the end is the left or the right.
///
/// If this value is used in a vertical direction, a [VerticalDirection] must be
/// available to determine if the end is the top or the bottom.
Copy the code

In the switch:

// The rest of the space is put in front, and the child components are arranged from close together. case MainAxisAlignment.end: leadingSpace = remainingSpace; BetweenSpace = 0.0; break;Copy the code

MainAxisAlignment.center

Note:

/// Place the children as close to the middle of the main axis as possible.
Copy the code

In the switch:

// The remaining space is evenly divided between left and right (up and down), and the child components are closely aligned. Case MainAxisAlignment. Center: leadingSpace = remainingSpace / 2.0; BetweenSpace = 0.0; break;Copy the code

MainAxisAlignment.spaceBetween

Note:

/// Place the free space evenly between the children.
Copy the code

In the switch:

// The remaining space is divided between the child components. Case MainAxisAlignment. SpaceBetween: leadingSpace = 0.0; betweenSpace = childCount > 1 ? RemainingSpace/(childCount - 1) : remainingSpace; break;Copy the code

MainAxisAlignment.spaceAround

Note:

/// Place the free space evenly between the children as well as half of that
/// space before and after the first and last child.
Copy the code

In the switch:

// The space on both sides is half of the space between. case MainAxisAlignment.spaceAround: betweenSpace = childCount > 0 ? RemainingSpace/childCount: 0.0; LeadingSpace = betweenSpace / 2.0; break;Copy the code

MainAxisAlignment.spaceEvenly

Note:

/// Place the free space evenly between the children as well as before and
/// after the first and last child.
Copy the code

In the switch:

// Divide the remaining space evenly. case MainAxisAlignment.spaceEvenly: betweenSpace = childCount > 0 ? RemainingSpace/(childCount + 1) : remainingSpace; leadingSpace = betweenSpace; break;Copy the code

Modify the source code

The benefits of Flutter One, you can modify the original code directly. He will pop up the prompt, OK press 😁😁. Note that a warning will appear when you upgrade a flutter after modification. Backup is recommended if the change is important.

Start by adding custom content to the enumeration

enum MainAxisAlignment { start, end, center, spaceBetween, spaceAround, spaceEvenly, MySpaceAround,}Copy the code

Because rear space = front space =2∗ space rear space = front space =2 * spacing space rear space = front space =2∗ space

So spacing = free space /(Number of subcomponents +3) Spacing = free space /(Number of subcomponents +3) Spacing = free space /(Number of subcomponents +3)

In the switch:

case MainAxisAlignment.mySpaceAround:
  betweenSpace = remainingSpace / (childCount+3);
  leadingSpace = betweenSpace *2;
  break;
Copy the code

Then you can use it directly!!

Row(
  mainAxisAlignment: MainAxisAlignment.mySpaceAround,
)
Copy the code

If someone wants to steal your code, you must give them a copy of the modified source code