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

Solution 1

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:

Solution 2

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

Solution 3

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.

Solution 4

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

View more solutions