0

Why does the 1st two work but not the 3rd?? what's the alternative to add vertical divider with height that stretch to the max height of the row?

These 2 works

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      // crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          child: Text('Kicukiro'),
        ),
        Container(width: 1,color: Colors.black,height: double.infinity,),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10),
            child: Text('Kicukiro'),
          )
      ],
    )
Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Container(
            child: Text('Kicukiro'),
          ),
        ),
        // Container(width: 1,color: Colors.black,height: double.infinity,),
        Expanded(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text('Kicukiro'),
            ),
        )
      ],
    )

this does not work

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Container(
            child: Text('Kicukiro'),
          ),
        ),
        Container(width: 1,color: Colors.black,height: double.infinity,),
        Expanded(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text('Kicukiro'),
            ),
        )
      ],
    )
2
  • Please paste the code as text, it will be easier to reproduce for us... Mar 30, 2022 at 20:51
  • done @WilsonToribio Mar 30, 2022 at 21:07

3 Answers 3

1

Test this and it will work

 IntrinsicHeight(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                     Expanded(
                       child: Container(
                           child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
                     ),
                    Container(color:Colors.black, width: 1),
                     Expanded(
                       child: Container(
                         padding: const EdgeInsets.symmetric(horizontal: 10),
                           child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
                     ),
                  ],
                ),
              ),
0

In the last screenshot please add the Container under an Expanded widget. Use children property under Row widget.

Here is an example code

 Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'This is question',
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
        Expanded(
            child: Padding(
          padding: EdgeInsets.all(10.0),
          child: FlatButton(
            //textColor: Colors.white,
            color: Colors.green,
            child: Text(
              'True',
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
            onPressed: () {},
          ),
        )),
        Expanded(
            child: Padding(
          padding: EdgeInsets.all(10.0),
          child: FlatButton(
            //textColor: Colors.white,
            color: Colors.red,
            child: Text(
              'False',
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
            onPressed: () {},
          ),
        )),
      ]
3
  • yeah but i don't the widget to be expanded as it will mess up the width of that middle widget. check the code Mar 30, 2022 at 21:09
  • Did you try to use Sizebox() widget for working as a divider?
    – pr0mila
    Mar 30, 2022 at 21:26
  • I am trying to keep that height dynamic and relative to the Row height Mar 30, 2022 at 21:29
0

The third is true, in fact, its existence in an SingleChildScrollView has created a problem It is fixed by putting SizedBox in Row and giving it height The reason for this problem is the size of the height of the container, which is determined by double.infinity and due to its presence in an SingleChildScrollView, it continues indefinitely and an error was created.

   SingleChildScrollView(
        child: SizedBox(
          height: 250,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
               Expanded(child: Container(child: Text("Kicukiro"))),
               Container(
                 width: 1,color: Colors.black,height: double.infinity,
               ),
               Expanded(child: Container(
                 padding: EdgeInsets.symmetric(horizontal: 10),
                   child: Text("Kicukiro"))),
            ],
          ),
        ),
      ),
4
  • The height is actually the problem, I would have guessed that Expanded inside a Row instead of Column wouldn't cause height errors. And I want the height to stay dynamic. Mar 30, 2022 at 21:27
  • I get that the height grows indefinitely downward but why is it not a problem on the 1st piece of code though? Mar 30, 2022 at 21:33
  • I tested the first one and it got a bug. Put it in SingleChi.. again Mar 30, 2022 at 21:37
  • the middle Container is supposed to be a vertical divider with fixed width but dynamic height. Also crossAxisAlignment: CrossAxisAlignment.stretch, is throwing errors too. Mar 30, 2022 at 21:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.