Flutter - the most detailed (Expanded) tutorial

Introduction to Expanded

Creates a widget that expands the children of a [Row], [Column] or [Flex] so that the children fill the available space along the main axis of the Flex widget. Similar to the Android linear layout layout_weight attribute

scenes to be used:

Each interface is a scaffolding, through which the architecture is realized and the layout effect is beautiful.

Attributes	effect
flex	layout width ratio
child	sub layout

import 'package:flutter/material.dart';
import 'package:flutter_demo/utlis/colors_utlis.dart';

class ExpandedPage extends StatefulWidget {
    
    
  const ExpandedPage({
    
    Key? key}) : super(key: key);

  @override
  State<ExpandedPage> createState() => _ExpandedPageState();
}

class _ExpandedPageState extends State<ExpandedPage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text("ExpandedPage"),
      ),
      body: Column(
        children: <Widget>[
          buildRow([0, 0, 0]),
          const SizedBox(
            height: 10,
          ),
          buildRow([0, 2, 1]),
          const SizedBox(
            height: 10,
          ),
          buildRow([1, 1, 1]),
          const SizedBox(
            height: 10,
          ),
          buildRow([2, 3, 3]),
          const SizedBox(
            height: 10,
          ),
          buildColumn([1, 2, 3]),
          const SizedBox(
            height: 10,
          ),
          buildColumn([2, 2, 4]),
        ],
      ),
    );
  }

  Widget buildRow(List<int> num) {
    
    
    return Row(
        children: num.map((e) => Expanded(
              flex: e,
              child: Container(
                alignment: Alignment.center,
                width: 50,
                height: 50,
                color: ColorsUtils.randomColor(),
                child: Text(
                  'flex=$e',
                  style: const TextStyle(color: Colors.white),
                ),
              ),
            )).toList());
  }
  Widget buildColumn(List<int> num) {
    
    
    return SizedBox(
      height: 200,
      child: Column(
          children: num.map((e) => Expanded(
                flex: e,
                child: Container(
                  alignment: Alignment.center,
                  color: ColorsUtils.randomColor(),
                  child: Text(
                    'flex=$e',
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              )).toList()),
    );
  }
}

When the ratio is 0, it is equivalent to using the width and height set by itself. buildRow([0, 0, 0]) shows the rendering

buildRow([0, 2, 1]) rendering

It is equivalent to the width of the equally divided screen, buildRow([1, 1, 1]) rendering

In the vertical direction , make a scale view
buildColumn([1, 2, 3]),
buildColumn([2, 2, 4]),