Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand toggle buttons to parent container width

Tags:

flutter

dart

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) {},
  ),
);
like image 446
LonelyWolf Avatar asked Feb 28 '20 17:02

LonelyWolf


People also ask

How do you expand your high button?

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.

How do you stretch the Hi button in flutter?

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

How do I use the toggle button in flutter?

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.


1 Answers

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) {},
        );
      })))
like image 162
LonelyWolf Avatar answered Sep 22 '22 23:09

LonelyWolf