How to make a L-shape layout with Row and Column?

Question

I would like to make the following layout within a Card widget (card within Sized Box to control the height):

layout description is:

• Blue : height: same as Card's height, width: fixed
• Green: height: fixed, width: remaining width of the card
• Purple: height: remaining height of the card, width: fixed
• Pink: height: remaining height of the card, width: remaining width of the card

Thanks in advance.

Answer 1

The code you are looking for is below

SizedBox(
              height: 100,
              child: Row(
                children: [
                  Container(width: 100,color: Colors.blue),
                  Expanded(
                    child: Column(
                      children: [
                        Container(height: 30,color: Colors.green,),
                        Expanded(
                          child: Row(
                            children: [
                              Container(width: 100,color: Colors.purple),
                              Expanded(child:
                              Container(color: Colors.pinkAccent),)
                            ],
                          ),
                        ),
                      ],
                    ),
                  )

                ],
              ),
            ),

Output