How to make button width match parent?
FlutterFlutter LayoutFlutter Problem Overview
I want to know that how can I set a width to match parent layout width
new Container(
width: 200.0,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
I know about little bit on Expanded widget but Expanded expands view to both direction, i dont know how to do it.
Flutter Solutions
Solution 1 - Flutter
Update:
With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton. you can use minimumSize like this:
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
),
onPressed: () {},
child: Text('Text Of Button'),
)
Old answer for Flutter less than 2.0:
The correct solution would be to use the SizedBox.expand widget, which enforces its child to match its parent's size.
SizedBox.expand(
child: RaisedButton(...),
)
There are many alternatives, which allows for more or less customization:
SizedBox(
width: double.infinity,
// height: double.infinity,
child: RaisedButton(...),
)
or using a ConstrainedBox
ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: RaisedButton(...),
)
Solution 2 - Flutter
Container(
width: double.infinity,
child: RaisedButton(...),
),
Solution 3 - Flutter
The size attribute can be provided using ButtonTheme with minWidth: double.infinity
ButtonTheme(
minWidth: double.infinity,
child: MaterialButton(
onPressed: () {},
child: Text('Raised Button'),
),
),
or after https://github.com/flutter/flutter/pull/19416 landed
MaterialButton(
onPressed: () {},
child: SizedBox.expand(
width: double.infinity,
child: Text('Raised Button'),
),
),
Solution 4 - Flutter
After some research, I found out some solution, and thanks to @Günter Zöchbauer,
I used column instead of Container and
set the property to column CrossAxisAlignment.stretch to Fill match parent of Button
new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
],
),
Solution 5 - Flutter
The simplest way is to use a FlatButton wrapped inside a Container, The button by default takes the size of its parent and so assign a desired width to the Container.
Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: 60,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {},
color: Colors.red[300],
child: Text(
"Button",
style: TextStyle(
color: Colors.black,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
),
)
Output:
Solution 6 - Flutter
You can set match parent of the widget by
1) set width to double.infinity :
new Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
2) Use MediaQuery:
new Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
Solution 7 - Flutter
@Mohit Suthar,
Found one of the best solution for match parent to width as well as height as below
new Expanded(
child: new Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
border: new Border.all(color: Colors.black, width: 1.0)),
child: new Text("TejaDroid")),
),
Here you can check that the Expanded Controller acquire whole remain width and height.
Solution 8 - Flutter
The simplest way to give match-parent width or height in the given code above.
...
width: double.infinity,
height: double.infinity,
...
Solution 9 - Flutter
For match_parent you can use
SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(...)
)
For any particular value you can use
SizedBox(
width: 100, // specific value
child: RaisedButton(...)
)
Solution 10 - Flutter
you can do that with MaterialButton
MaterialButton(
padding: EdgeInsets.all(12.0),
minWidth: double.infinity,
onPressed: () {},
child: Text("Btn"),
)
Solution 11 - Flutter
There are many ways to make full width button. But I think you should understand the concept of making full width widgets in different scenarios:
When you are using nested widgets then it is hard to identify width of parent widget. Simply you can't specify width in nested widgets. So you should use either Expanded or Column with CrossAxisAlignment as Strech.
In other cases, you can use media query width or double.infinity.
Here are some examples for Nested widgets and single widget:
First:
Expanded( // This will work for nested widgets and will take width of first parent widget.
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Second:
Column( // This will not work if parent widget Row.
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
]
)
Third:
ButtonTheme( // if use media query, then will not work for nested widgets.
minWidth: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Forth:
SizedBox( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Fifth:
Container( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
From my point of view, recommended will be the First one. Also you can change MaterialButton to ElevatedButton or TextButton or RaisedButton (Depreciated) or any other widget.
Cheers!
Solution 12 - Flutter
The most basic approach is using Container by define its width to infinite. See below example of code
Container(
width: double.infinity,
child:FlatButton(
onPressed: () {
//your action here
},
child: Text("Button"),
)
)
Solution 13 - Flutter
OutlineButton(
onPressed: () {
logInButtonPressed(context);
},
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: Text(
“Log in”,
textAlign: TextAlign.center,
),
),
)
Something like this works for me.
Solution 14 - Flutter
The Following code work for me
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
Solution 15 - Flutter
This is working for me in a self contained widget.
Widget signinButton() {
return ButtonTheme(
minWidth: double.infinity,
child: new FlatButton(
onPressed: () {},
color: Colors.green[400],
textColor: Colors.white,
child: Text('Flat Button'),
),
);
}
// It can then be used in a class that contains a widget tree.
Solution 16 - Flutter
This is working for me.
SizedBox(
width: double.maxFinite,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: new Text("Button 2"),
color: Colors.lightBlueAccent,
onPressed: () => debugPrint("Button 2"),
),
),
Solution 17 - Flutter
RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) )
It works for me.
Solution 18 - Flutter
With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton.
minimumSize property of ElevatedButton widget exactly does that.
Example code:
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
shadowColor: Colors.greenAccent,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
minimumSize: Size(100, 40), //////// HERE
),
onPressed: () {},
child: Text('MyButton'),
)
Solution 19 - Flutter
You can set the fixedSize.width of the ButtonStyle to a very large number, like double.maxFinite. You can also use Size.fromWidth() constructor if you don't want to specify the height:
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(double.maxFinite),
),
),
Live Demo
Solution 20 - Flutter
Using a ListTile also works as well, since a list fills the entire width:
ListTile(
title: new RaisedButton(...),
),
Solution 21 - Flutter
new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)
Solution 22 - Flutter
This one worked for me
width: MediaQuery.of(context).size.width-100,
Solution 23 - Flutter
Wrap your (child widget having a fixed width) with a center widget. This will center your widget:
Center(child:Container(width:250,child:TextButton(child:Text("Button Name),),)