How to have togglebutton take the whole space in a container?
1,195
To get the full width ToggleButtons you can use LayoutBuilder
.
LayoutBuilder(
builder: (context, constraints) => ToggleButtons(
constraints: BoxConstraints.expand(width: constraints.maxWidth/2),
....
Your CODE
....
)
);
This will dynamically expand your ToggleButtons
to full width.
Author by
Tushar Patil
Updated on December 20, 2022Comments
-
Tushar Patil over 1 year
I'm trying to achieve a flexible behaviour from the togglebutton, my togglebutton is inside a container with a height of 60px and infinte width, how can get the toggle button to take up all the available space?
Sadly I can't use MediaQuery as using it breaks my dropdown functionality somehow, is there any other way?
here is my code for toggle button:
Container( decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(10), ), color: Color.fromRGBO(108, 101, 172, 1), ), width: double.infinity, height: 60, child: Padding( padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5), child: ToggleButtons( borderRadius: BorderRadius.all( Radius.circular(10), ), textStyle: TextStyle( fontWeight: FontWeight.w700, fontFamily: 'OpenSans', color: Colors.black, fontSize: 17, ), selectedColor: Colors.black, fillColor: Colors.white, children: <Widget>[ Text('My country'), Text('Global'), ], onPressed: (int index) { setState(() { for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) { if (buttonIndex == index) { isSelected[buttonIndex] = true; } else { isSelected[buttonIndex] = false; } } if (index == 1) { getGlobalResult(); isGlobal = true; isTotal = true; } else { getCountryTotalResult(selectedValue); isGlobal = false; isTotal = true; isDaySelected = [true, false, false]; } }); }, isSelected: isSelected, ), ), ),
this is what I get,
-
Admin almost 3 yearsit's
expand
, just in case someone gets and error. Thanks -
Eslam Sameh Ahmed about 2 years@LatheeshVMVilla corrected