Question 221744 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Element won't take all the vertical space

What is needed to take all the vertical space for the red square and text(cover yellow part)?

        return (Container(
            height: 50,
            color: Colors.amber[colorCodes[index % 2]],
            child: Row(children: [
              //Center(child: Text(entries[index])),
              Expanded(
                  child: Container(child:
                 const Column(
                children: [
                  Row(children: [
                    Expanded(
                        flex: 8, 
                        child: DecoratedBox(
                            decoration: BoxDecoration(color: Colors.red),
                            child: Text("hello"))),
                    Expanded(flex: 4, child: Text("world")),
                  ]),
                  Expanded(
                      child: Align(
                          alignment: Alignment.bottomLeft,
                          child: LinearProgressIndicator(
                              minHeight: 3,
                              backgroundColor: Colors.redAccent,
                              value: 0.50)))
                ],
              ))),
            ])
            //child: Center(child: LinearProgressIndicator(backgroundColor: Colors.greenAccent,value: 20))
            ));
      }),
);

enter image description here

Tags:

2

Answers


  1. 0

    You can use crossAxisAlignment: CrossAxisAlignment.stretch, on Row.

    Container(
      height: 50,
      color: Colors.amber,
      child: Row(children: [
        //Center(child: Text(entries[index])),
        Expanded(
          child: Container(
            child: const Column(
              children: [
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        flex: 8,
                        child: DecoratedBox(decoration: BoxDecoration(color: Colors.red), child: Text("hello")),
                      ),
                      Expanded(flex: 4, child: Text("world")),
                    ],
                  ),
                ),
                Align(
                  alignment: Alignment.bottomLeft,
                  child: LinearProgressIndicator(minHeight: 3, backgroundColor: Colors.redAccent, value: 0.50),
                )
              ],
            ),
          ),
        ),
      ])
      //child: Center(child: LinearProgressIndicator(backgroundColor: Colors.greenAccent,value: 20))
      )
    Login or Signup to reply.
  2. 0

    You can add an Expanded widget to the DecoratedBox and the Text widgets in the Row children, in order to make them take the available space

        return Container(
  height: 50,
  color: Colors.amber[colorCodes[index % 2]],
  child: Row(
    children: [
      Expanded(
        child: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    flex: 8,
                    child: DecoratedBox(
                      decoration: BoxDecoration(color: Colors.red),
                      child: Center(child: Text("hello")),  // Center text within the DecoratedBox
                    ),
                  ),
                  Expanded(
                    flex: 4,
                    child: Center(child: Text("world")),  // Center text within the Expanded
                  ),
                ],
              ),
            ),
            LinearProgressIndicator(
              minHeight: 3,
              backgroundColor: Colors.redAccent,
              value: 0.50,
            )
          ],
        ),
      ),
    ]
  )
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search