How to make a rectangles in this order at flutter ?

CodePudding user response：

The correct approach is to wrap a container and two rows in a column.

Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.blue,
            ),
          ),
          Expanded(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: Container(
                      color: Colors.red
                  ),
                ),
                Expanded(
                  child: Container(
                      color: Colors.green
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: Container(
                      color: Colors.yellow
                  ),
                ),
                Expanded(
                  child: Container(
                      color: Colors.orange
                  ),
                ),
              ],
            ),
          ),
        ],
      )

CodePudding user response：

It can be something like this:

  Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Text('Top Rectangle'),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(child: Text('Row 1 - Col 1'),),
            Expanded(child: Text('Row 1 - Col 2'),),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(child: Text('Row 2 - Col 1'),),
            Expanded(child: Text('Row 2 - Col 2'),),
          ],
        )
      ],
    ),

Or this:

   Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Text('Top Rectangle'),
        ),
        Container(
          height: 400,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Expanded(
                    child: Text('Row 1 - Col 1'),
                  ),
                  Expanded(
                    child: Text('Row 1 - Col 2'),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Expanded(
                    child: Text('Row 2 - Col 1'),
                  ),
                  Expanded(
                    child: Text('Row 2 - Col 2'),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    ),

• It's not a good idea to have a bunch of Expanded widgets in a parent widget, you should have Containers or similar widgets and give them fixed or dynamically calculated heights, then you can have an Expanded which gets all remaining space