CODEWITHSUNDEEP
flutterlayoutwidgetflutter-layoutflutter-row
fabio
fabio

Reputation: 466

Divide a Row into two equal halves in Flutter

I have a Row widget inside a Card, and I want to divide the Row perfectly in half the width of the card and put some centered text in each half. So the separation in half of the row has to be fixed and each text has to be centered in the half where it is. Here is an example:

enter image description here

Any ideas?

Upvotes: 11

Views: 13287

Answers (3)

ali sampson
ali sampson

Reputation: 467

This worked for me:

IntrinsicHeight (
  child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(child: Center(child: TextButton(...))),
    VerticalDivider(thickness: 1.3, color: Colors.red),
    Expanded(child: Center(child: TextButton(...))),
  ],
))

Upvotes: 0

Aathi
Aathi

Reputation: 3234

In my case I tried like this

 @override
  Widget build(BuildContext context) {
    final _screen =  MediaQuery.of(context).size;
    return Column(
      children: [
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                width: _screen.width * 0.45,
                child: ...
              ),
              VerticalDivider(width: 1.0),
              Container(
                width: _screen.width * 0.45,
                child: ...
              ),
          ]
        ),
      ],
    );
  }

Upvotes: 5

BambinoUA
BambinoUA

Reputation: 7100

Try this

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(child: Center(child: TextButton(...))),
    VerticalDivider(width: 1.0),
    Expanded(child: Center(child: TextButton(...))),
  ],
),

Upvotes: 21

Related Questions