Divide a Row into two equal halves in Flutter

Question

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:

Any ideas?

have your tried anyting yet to obtain the above functionality? please attach the code you already tried . — basudev nayak, Jan 28 '21 at 20:27

BambinoUA · Accepted Answer · 2021-01-29T09:11:21.323

12

Try this

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

edited Jan 29 '21 at 09:11

answered Jan 28 '21 at 20:37

BambinoUA

6,126
5
35
51

1

Almost.. with a Center widget, it works. `Expanded(child: Center(child: TextButton(...))),`. Thank you! – Fabio Jan 28 '21 at 21:01

score 4 · Answer 2 · answered Sep 02 '21 at 11:19

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: ...
              ),
          ]
        ),
      ],
    );
  }

Divide a Row into two equal halves in Flutter

2 Answers2