How to align expanded widgets in a row-CodePudding

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'),
            ),
        )
      ],
    )

CodePudding user response：

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),)),
                     ),
                  ],
                ),
              ),

CodePudding user response：

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: () {},
          ),
        )),
      ]

CodePudding user response：

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"))),
            ],
          ),
        ),
      ),