Building grid layouts with Flutter

Question

I am very new at Flutter and was confused with how to use the widgets to create a sustainable replacement for Native Androids, RelativeLayout and ConstraintLayout but was not able to use the Column, Row widgets appropriately. I am trying to build this layout but wasn't able to up until now.

I have started by adding a container for the entire thing, then a column for every 'block' and then use Rows/Containers for the rest of them. Here is the code I have written up until now but this doesn't show anything:

Container(
            height: 250,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: LinearGradient(
                        colors: colorItems // a color list at global scope with 2 items
                      ),
                      color: Colors.black
                    ),
                  )
                ],
              ),
            ),
          )

Edit

Please give an explanation of your hierarchy of widgets like this:

Container
  - Column
    - Row

Answer 1

I added a full example of what you are trying to get:

Below is how the widget tree should look like:

WIDGET HEIRARCHY
Container
  - Column
    - Container
    - SizedBox
    - Expanded
      -Row
        - Container
        - SizedBox
        -Expanded
          - Column
            - Container
            - SizedBox
            - Expanded
              - Row
                - Expanded
                  - Container
                - Expanded
                  - Container
                - Expanded
                  - Container

CODE

class StackOver extends StatelessWidget {
  final BoxDecoration _boxDecoration = BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(
      15.0,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Tab bar',
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        // parent container housing all other widgets
        child: Container(
          height: 250,
          child: Column(
            children: [
              // frist container [give it a height, it takes up the width of the parent]
              Container(
                height: 80,
                decoration: _boxDecoration,
              ),

              // add spacing
              SizedBox(
                height: 15,
              ),

              // second child of the column [consists of a Row with children]
              Expanded(
                child: Row( // row 
                  children: [
                    Container( // first child 
                      width: 80, // give it a width, it takes up the height of parent since it is wrapped with an expanded widget
                      decoration: _boxDecoration,
                    ),

                    // add spacing
                    SizedBox( // second child
                      width: 15,
                    ),


                    Expanded( // thrid child [consists a column with children ]
                      child: Column(
                        children: [
                          Container( 
                            height: 80, // give it a height, it takes up the width of parent since it is wrapped with an expanded widget
                            decoration: _boxDecoration,
                          ),

                          // add spacing
                          SizedBox( // second child
                            height: 20,
                          ),


                          Expanded( // third child [consists of a row with 3 containsers]
                            child: Row( 
                              children: [
                                Expanded( // first container
                                  child: Container(
                                    decoration: _boxDecoration,
                                  ),
                                ),

                                // add spacing
                                SizedBox(
                                  width: 15,
                                ),
                                Expanded( // second container
                                  child: Container(
                                    decoration: _boxDecoration,
                                  ),
                                ),

                                // add spacing
                                SizedBox(
                                  width: 15,
                                ),
                                Expanded( // third container
                                  child: Container(
                                    decoration: _boxDecoration,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

OUTPUT