Flutter put row into row

Question

I need to create the following:

I could do it with code:

Row(
  children: <Widget>[
    Container(
      width: 30
    ),
    Column(
      children: <Widget>[
        Text("label"),
        Container(
          width: screenSize.width - 30, // <- this is problem
          child: Row(
            children: <Widget>[
              Expanded( child: TextField() ),
              Expanded( child: TextField() ),
            ],
          ),
        ),
      ],
    ),
  ],
);

Is it possible to do it in a different way, namely the line width: screenSize.width - 30?

score 1 · Answer 1 · answered Jun 08 '20 at 04:57

You can use crossAxisAlignment inside Column widget and make it Stretch to get all remaining width in screen

Row(
children: <Widget>[
Container(
  width: 30
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // <- Add this
  children: <Widget>[
    Text("label"),
    Container(
      child: Row(
        children: <Widget>[
          Expanded( child: TextField() ),
          Expanded( child: TextField() ),
        ],
      ),
    ),
  ],
),],);

[Please read official flutter documentation of Column widget]

Column Widget

CrossAxisAlignment

score 0 · Answer 2 · answered Feb 10 '19 at 16:33

Solution

Row(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 50,
    ),
    Expanded(
      child: Column(
        children: <Widget>[
          Text("label"),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField()
                ),
                Expanded(
                  child: TextField()
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

Explanation

It is about where you place Expanded instances.
You have a row, which can fill its parent if it included an Expanded child. So we defined the size of one of its children (Container), and the other is simply Expanded. The same goes for the Column child ..

Maybe starting with a simpler example makes it easier to understand. Please refer to this useful answer.

Output

P.S. Welcome to StackOverFlow, Dmitry!

Flutter put row into row

2 Answers2

Solution

Explanation

Output