Is there any way to dynamically expand toggle buttons to parent container width without hard coding anything. I found one answer to that which uses MediaQuery of context which only works well for full screen width. I also tried to wrap the buttons in expanded widget but that throws an error
Container(
width: 150.0, // hardcoded for testing purpose
child: ToggleButtons(
constraints:
BoxConstraints.expand(width: MediaQuery.of(context).size.width), // this doesn't work once inside container unless hard coding it
borderRadius: BorderRadius.circular(5),
children: [
ShapeToggleButton(
text: 'Option1',
),
ShapeToggleButton(
text: 'Option2',
),
],
isSelected: [true, false],
onPressed: (index) {},
),
);
The full width is set to the Elevated Button by adding a style parameter. Then you can use the ElevatedButton. styleFrom class to provide the size of the button using the property called minimumSize.
Raised buttons have a minimum size of 88.0 by 36.0 which can be overridden with ButtonTheme. So you can do it like the following: ButtonTheme( minWidth: 200.0, height: 100.0, child: RaisedButton( onPressed: () {}, child: Text("test"), ), );
A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object.
As suggested by psink in comment above answer is to wrap it in LayoutBuilder
Container(
width: 150.0, // hardcoded for testing purpose
child: LayoutBuilder(builder: (context, constraints) {
return ToggleButtons(
renderBorder: false,
constraints:
BoxConstraints.expand(width: constraints.maxWidth / 2), //number 2 is number of toggle buttons
borderRadius: BorderRadius.circular(5),
children: [
Text(
'Option1',
),
Text(
'Option2',
),
],
isSelected: [true, false],
onPressed: (index) {},
);
})))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With