CODEWITHSUNDEEP
flutterflutter-layout
bihire boris
bihire boris

Reputation: 1682

How to align expanded widgets in a row

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

Upvotes: 0

Views: 1767

Answers (3)

behnam bagvand
behnam bagvand

Reputation: 73

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

Upvotes: 1

behnam bagvand
behnam bagvand

Reputation: 73

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

Upvotes: 0

Promila Ghosh
Promila Ghosh

Reputation: 389

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

Upvotes: 0

Related Questions