Hello guys, creating a rounded button in flutter is very easy. In this blog, you will learn different ways of creating rounded buttons in a flutter. So let’s get started.
Ways of creating rounded button in Flutter
- Using MaterialButton Widget.
- Using Container and InkWell Widget.
- Using ElevatedButton Widget.
- Using OutlinedButton widget.
- Using TextButton Widget.
Demo of flutter rounded button
Using MaterialButton widget
- First, create a Text Widget and give your button name.
- Then Wrap the Text Widget as MaterialButton.
- Decorate the material button using color and shape property. The code is given below,
MaterialButton(
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
onPressed: () {},
child: Text(
"MaterialButton",
style: TextStyle(color: Colors.white),
),
)Using Container and InkWell widget
- First, create a Text Widget and give your button name.
- Then, wrap the text widget as a Container widget.
- Then, decorate the container using decoration property.
- To make a click event wrap the container widget as an InkWell widget. The code is given below,
InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(18.0),
),
child: Text(
"Container and InkWell",
style: TextStyle(color: Colors.white),
),
),
)Using OutlinedButton Widget
- First, create a Text Widget and give your button name.
- Then Wrap the Text Widget as OutlinedButton.
- Decorate the OutlinedButton using style property. The code is given below,
OutlinedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
onPressed: () {},
child: Text(
"OutlinedButton",
style: TextStyle(color: Colors.white),
),
)Using ElevatedButton Widget
- First, create a Text Widget and give your button name.
- Then Wrap the Text Widget as ElevatedButton.
- Decorate the ElevatedButton using style property. The code is given below,
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
onPressed: () {},
child: Text("ElevatedButton"),
)Using TextButton Widget
- First, create a Text Widget and give your button name.
- Then Wrap the Text Widget as TextButton.
- Decorate the TextButton using style property. The code is given below,
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
onPressed: () {},
child: Text(
"TextButton",
style: TextStyle(color: Colors.white),
),
)Important Note:
The FlatButton, RaisedButton, and OutlineButton are deprecated. Don’t use that widget. The alternatives are given below,
| Old Widget | Old Theme | New Widget | New Theme |
|---|---|---|---|
FlatButton | ButtonTheme | TextButton | TextButtonTheme |
RaisedButton | ButtonTheme | ElevatedButton | ElevatedButtonTheme |
OutlineButton | ButtonTheme | OutlinedButton | OutlinedButtonTheme |
Reference, visit official docs.
