Flutter: How to Align multiple ButtonBars such that the radio buttons are one below the other?

Question

here you can see what I currently have: (I'm currently not allowed to insert this picture). I have two TabBars with two Radio Buttons each in a ListView, but it looks horrible. I would like to place the radio buttons one below the other, regardless of the length of the strings.

Here is my code:

 return ListView(
      children: <Widget>[
        //..
        ),
        Container(
            child: ButtonBar(
          alignment: MainAxisAlignment.spaceBetween, // I also tried every other setting here, but none works for me
          children: <Widget>[
            Radio(
              value: 1,
              groupValue: _selectedRadio,
              activeColor: corpColorPrimary,
              onChanged: (val) => setSelectedRadio(val),
            ),
            Text("a long String"),
            Radio(
              value: 2,
              groupValue: _selectedRadio,
              activeColor: corpColorPrimary,
              onChanged: (val) => setSelectedRadio(val),
            ),
            Text("Another long String"),
          ],
        )),

        Container(
          child: ButtonBar(
            alignment: MainAxisAlignment.start,
            children: <Widget>[
              Radio(
                value: 1,
                groupValue: _selectedRadio,
                activeColor: corpColorPrimary,
                onChanged: (val) => setSelectedRadio(val),
              ),
              Text("Hi"),
              Radio(
                value: 2,
                groupValue: _selectedRadio,
                activeColor: corpColorPrimary,
                onChanged: (val) => setSelectedRadio(val),
              ),
              Text(":)"),
            ],
          ),
        ),
        RaisedButton(
          child: Text("Next"),
          onPressed: () {},
        ),

How can I align the Radio buttons correctly?

Lilly · Answer 1 · 2020-03-26T22:43:11.093

0

you can use Spacer(), widget between each Container(), widget and adjust them.

edited Mar 26 '20 at 22:43

answered Mar 22 '20 at 19:20

Lilly

180
1
16

Doesn't work for me. If it works for you can you please share a screenshot? – DarkMath Mar 22 '20 at 21:03
please see the answer, i have updated the answer. Let me know if it helps. – Lilly Mar 26 '20 at 22:44
That doesn't work either. Spacer wigets between the containers will create vertical space and have no effect on the ButtonBar widgets. – DarkMath Mar 27 '20 at 11:18
You can also arg value for these functions, have you tried that? – Lilly Jul 27 '20 at 05:30

score 0 · Answer 2 · answered Jan 05 '22 at 13:07

0

Take Row and in Row take two columns that will solve your issue.

answered Jan 05 '22 at 13:07

Meet Patel

189
9

Flutter: How to Align multiple ButtonBars such that the radio buttons are one below the other?

2 Answers2