Posts: 0
Threads: 0
Joined: Jan 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
I have seen that I can't set the width of a `ElevatedButton` in Flutter. If I have well understood, I should put the `ElevatedButton` into a `SizedBox`. I will then be able to set the width or height of the box. Is it correct? Is there another way to do it?
This is a bit tedious to create a `SizedBox` around every buttons so I'm wondering why they have chosen to do it this way. I'm pretty sure that they have a good reason to do so but I don't see it.
The scaffolding is pretty difficult to read and to build for a beginner.
new SizedBox(
width: 200.0,
height: 100.0,
child: ElevatedButton(
child: Text('Blabla blablablablablablabla bla bla bla'),
onPressed: _onButtonPressed,
),
),
|
Posts: 0
Threads: 0
Joined: May 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
This piece of code will help you better solve your problem, as we cannot specify width directly to the RaisedButton, we can specify the width to it's child
double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
width: width,
child: Text(
StringConfig.acceptButton,
textAlign: TextAlign.center,
));
RaisedButton(
child: maxWidthChild,
onPressed: (){},
color: Colors.white,
);
|
Posts: 0
Threads: 0
Joined: May 2020
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
You need to use an Expanded Widget. But, if your button is on a column, the Expanded Widget fills the rest of the column. So, you need to enclose the Expanded Widget within a row.
Row(children: <Widget>[
Expanded(
flex: 1,
child: RaisedButton(
child: Text("Your Text"),
onPressed: _submitForm,
),
),),])
|
Posts: 0
Threads: 0
Joined: Aug 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
If you want globally change the height and the minWidth of all your `RaisedButton`s, then you can override `ThemeData` inside your `MaterialApp`:
@override
Widget build(BuildContext context) {
return MaterialApp(
...
theme: ThemeData(
...
buttonTheme: ButtonThemeData(
height: 46,
minWidth: 100,
),
));
}
|
Posts: 1
Threads: 1
Joined: Mar 2018
Reputation:
0
Level: 1 []
Total Points: 0
Rank 0 / 1
99% to upload Level
Activity 0 / 1
99% to upload your Rank
Experience 1
99% to upload Experience
Points: 50
|
you can do as they say in the comments or you can save the effort and work with RawMaterialButton . which have everything and you can change the border to be circular
and alot of other attributes. ex shape(increase the radius to have more circular shape)
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25
and you can use whatever shape you want as a button by using GestureDetector which is a widget and accepts another widget under child attribute.
like in the other example here
GestureDetector(
onTap: () {//handle the press action here }
child:Container(
height: 80,
width: 80,
child:new Card(
color: Colors.blue,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
elevation: 0.0,
child: Icon(Icons.add,color: Colors.white,),
),
)
)
|
Posts: 0
Threads: 0
Joined: Jul 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
As said in documentation [here][1]
> Raised buttons have a minimum size of 88.0 by 36.0 which can be
> overidden with ButtonTheme.
You can do it like that
ButtonTheme(
minWidth: 200.0,
height: 100.0,
child: RaisedButton(
onPressed: () {},
child: Text("test"),
),
);
[1]: [To see links please register here]
|
Posts: 1
Threads: 1
Joined: Jun 2022
Reputation:
0
Level: 1 []
Total Points: 0
Rank 0 / 1
99% to upload Level
Activity 0 / 1
99% to upload your Rank
Experience 1
99% to upload Experience
Points: 50
|
My preferred way to make Raise button with match parent is that wrap it with Container.
below is sample code.
Container(
width: double.infinity,
child: RaisedButton(
onPressed: () {},
color: Colors.deepPurpleAccent[100],
child: Text(
"Continue",
style: TextStyle(color: Colors.white),
),
),
)
|
Posts: 0
Threads: 0
Joined: Aug 2020
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
If the button is placed in a `Flex` widget (including `Row` & `Column`), you can wrap it using an [Expanded Widget]( [To see links please register here] ) to fill the available space.
|
Posts: 0
Threads: 0
Joined: Nov 2016
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
Wrap RaisedButton inside Container and give width to Container Widget.
e.g
Container(
width : 200,
child : RaisedButton(
child :YourWidget ,
onPressed(){}
),
)
|
Posts: 0
Threads: 0
Joined: Oct 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
You can create global method like for button being used all over the app. It will resize according to the text length inside container. FittedBox widget is used to make widget fit according to the child inside it.
Widget primaryButton(String btnName, {@required Function action}) {
return FittedBox(
child: RawMaterialButton(
fillColor: accentColor,
splashColor: Colors.black12,
elevation: 8.0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
),
onPressed: () {
action();
},
),
);
}
If you want button of specific width and height you can use constraint property of RawMaterialButton for giving min max width and height of button
constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),
|
|