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

Crumb

Answer 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:

Sclerotic

Answer 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

Pearly

Answer 3

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

Courlan

Answer 4

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.

Submergible

Answer 5

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

Scottie

Answer 6

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.

Council

Answer 7

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.

Repudiate

Answer 8

Simplest way is to use Padding

SettingTile(
        title: "Toggle",
        trailing: Obx(() {
          return ToggleButtons(
            color: Colors.grey,
            selectedColor: Colors.white,
            fillColor: Colors.blue,
            borderColor: Colors.blue,
            selectedBorderColor: Colors.blue,
            children: const <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15, vertical:0),
                child: Text('Option 1'),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Text('Option 2 '),
              ),
            ],
          );
        }),
      ),

Thereon