How to set width of the flutter togglebuttons widget

Question

I have tried nesting togglebuttons inside container and giving it a custom width however it didn't worked

ToggleButtons(
            borderColor: Colors.deepOrangeAccent[100],
            fillColor: Colors.deepOrange[100],
            borderRadius: BorderRadius.circular(8.0),
            selectedBorderColor: Colors.deepOrange,

            children: <Widget>[
              new Row(children: <Widget>[new Icon(Icons.whatshot,size: 16.0,color: Colors.red,),new SizedBox(width: 4.0,), new Text("HOT",style: TextStyle(color: Colors.red),)],),
              new Row(children: <Widget>[new Icon(Icons.invert_colors,size: 16.0,color: Colors.yellow[800],),new SizedBox(width: 4.0,), new Text("WARM",style: TextStyle(color: Colors.yellow[800]))],),
              new Row(children: <Widget>[new Icon(Icons.ac_unit,size: 16.0,color: Colors.blue,),new SizedBox(width: 4.0,), new Text("COLD",style: TextStyle(color: Colors.blue))],),
            ],
            onPressed: (int index) {
              setState(() {
                EnquiryModel.instance.setStatus(index.toString());
                for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
                  if (buttonIndex == index) {
                    isSelected[buttonIndex] = true;
                  } else {
                    isSelected[buttonIndex] = false;
                  }
                }
              });
            },
            isSelected: isSelected,
          )

score 22 · Accepted Answer · answered Sep 30 '19 at 08:51

I know my answer is not good solution but it works.

children: <Widget>[
    Container(width: (MediaQuery.of(context).size.width - 36)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.whatshot,size: 16.0,color: Colors.red,),new SizedBox(width: 4.0,), new Text("HOT",style: TextStyle(color: Colors.red),)],)),
    Container(width: (MediaQuery.of(context).size.width - 36)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.invert_colors,size: 16.0,color: Colors.yellow[800],),new SizedBox(width: 4.0,), new Text("WARM",style: TextStyle(color: Colors.yellow[800]))],)),
    Container(width: (MediaQuery.of(context).size.width - 36)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.ac_unit,size: 16.0,color: Colors.blue,),new SizedBox(width: 4.0,), new Text("COLD",style: TextStyle(color: Colors.blue))],)),
]

I decrease 36 because my page has page padding. You can change it with your settings.

Here result:

score 4 · Answer 2 · answered Jun 14 '20 at 12:42

4

To set the width dynamically to the parent widget you can use a LayoutBuilder. In the attached link you'll find a cleaner solution.

Expand toggle buttons to parent container width

answered Jun 14 '20 at 12:42

Daniel Schmitz

81
3

score 3 · Answer 3 · answered May 24 '21 at 16:46

Instead of using Container, use BoxConstraints.

ToggleButtons(
    children: <Widget>[
        Row(children: <Widget>[Icon(Icons.whatshot, size: 16.0, color: Colors.red), SizedBox(width: 4.0), Text('HOT', style: TextStyle(color: Colors.red))]),
        Row(children: <Widget>[Icon(Icons.invert_colors, size: 16.0, color: Colors.yellow[800]), SizedBox(width: 4.0), Text('WARM', style: TextStyle(color: Colors.yellow[800]))]),
        Row(children: <Widget>[Icon(Icons.ac_unit, size: 16.0, color: Colors.blue), SizedBox(width: 4.0), Text('COLD', style: TextStyle(color: Colors.blue))]),
    ],
    constraints: BoxConstraints(minWidth: (MediaQuery.of(context).size.width - 36) / 3),
    isSelected: isSelected,
)

score 2 · Answer 4 · answered Dec 10 '19 at 23:06

The Eyupaltindal answer worked for me only in Flutter beta version (I'm using v1.12.13+hotfix.3), on Flutter last release version 1.9.1 I'm not able to change ToggleButtons's children padding or size. Probably in the next Flutter release it will be possible.

P.S.: Sorry I'm leaving this comment as an answer, is just because I don't have the needed reputation level to make comments.

score 0 · Answer 5 · answered Sep 16 '20 at 18:07

I wrote such a function to calculate the width

  double _buttonWidth(BuildContext context) {
final maxWidth = 120.0;
final buttonCount = 3;

final width = (MediaQuery.of(context).size.width - 100) / buttonCount;
if (width < maxWidth) {
  return width;
} else {
  return maxWidth;
}

}

Usage:

  ToggleButtons(
    children: <Widget>[
      Container(
        alignment: Alignment.center,
        width: _buttonWidth(context),
        child: Text('Yes'),
      ),
      Container(
        alignment: Alignment.center,
        width: _buttonWidth(context),
        child: Text('No'),
      ),
      Container(
        alignment: Alignment.center,
        width: _buttonWidth(context),
        child: Text('I dont know'),
      ),
    ],
    onPressed: (int index) {},
    isSelected: [false, true, false],
  ),

score 0 · Answer 6 · answered Oct 21 '21 at 17:20

A clean way is to utilize BoxConstraints property for ToggleButtons.

To achieve square buttons that fit in the screen:

    // get your children to be displayed. Use 1 to compensate empty list case.
    final width = MediaQuery.of(context).size.width * 0.9 / max(1, children.length);

    return ToggleButtons(
      constraints: BoxConstraints(maxWidth: width, minWidth: width, minHeight: width, maxHeight: width),
      children: children,
      isSelected: selections,
    );

Calling minWidth and maxWidth with exact value will force Flutter to render item with the desired width. Same for minHeight and maxHeight.

If you don't want squared buttons, you can play with setting other value (the same) for minHeight and maxHeight.

score 0 · Answer 7 · answered Nov 02 '22 at 10:20

The easiest way to my experience is to use Sizedbox. If you want the same size, you don't need to devide it, for example from your case: 3. Because the width is automatically divided, with the same size:

1. First solution:

SizedBox(
  width: double.infinity,
  child: YourToggleButtons,
)

2. Second solution:

SizedBox.expand(
  child: new YourToggleButtons,
)

Have a nice day.

How to set width of the flutter togglebuttons widget

7 Answers7