Buttons Widgets- Flutter Widget Guide By Flutter Agency
What is the Button in Flutter ?
Buttons Widget is a user interface control that is used to perform an action whenever the user clicks or tap on it.
There are certain types of different Buttons Widget used in a flutter. In this article, we will explore how to use Buttons Widget in a flutter. Basically there are three types of buttons in a flutter.
1. FlatButton Widget
2. RaisedButton Widget
3. OutlineButton Widget
Let’s get started with the FlatButton widget.
FlatButton Widget: FlatButton Widget is a simple button that has no much-highlighted decoration and mostly used on toolbar and dialog etc. FlatButton widget has two required property Child and onPressed(). FlatButton widget doesn’t have an elevation like a RaisedButton also there is no default color to the button and the text color is black.
How to use FlatButton Widget in Flutter?
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28.0),
),
color: Colors.orangeAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Add",
),
],
),
);
FlatButton widget
Now, we will discuss RaisedButton Widget in detail. RaisedButton widget is a button with elevation. Users can set many properties like TextColor, ButtonColor, Color of Button when disabled, animation, time, shape, elevation, padding.etc.
Just like FlatButton Widget, we will create a stateless widget called RaisedButton Widget.
How to use RaisedButton Widget in Flutter?
The code snippet for RaisedButton Widget is as below :
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
),
color: Colors.orangeAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Submit",
),
],
),
);
RaisedButton widget
Now we will discuss OutlineButton Widget in detail.
OutlineButton widget is similar to FlatButton Widget with a thin rounded rectangle border. Here as well we will create a stateless widget called it OutlineButton Widget.
How to use OutlineButton Widget in Flutter?
OutlineButton(
onPressed: () {
},
borderSide: BorderSide(
color: Colors.orangeAccent, //Color of the border
style: BorderStyle.solid, //Style of the border
width: 0.8, //width of the border
),
child: Center(
child: Text(
"Outline button",
textAlign: TextAlign.center,
),
),
),
OutlineButton widget
The complete source code for above all buttons can be found from below :
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: blocksizeVertical * 8,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28.0),
),
color: Colors.orangeAccent,
onPressed: () {
// To do
},
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 0,
horizontal: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"FlatButton",
style: Theme.of(context).textTheme.caption.copyWith(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
],
),
),
),
),
SizedBox(
height: 10,
),
Container(
height: blocksizeVertical * 8,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
),
color: Colors.orangeAccent,
onPressed: () {},
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 0,
horizontal: 12,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Submit",
style: Theme.of(context).textTheme.caption.copyWith(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
],
),
),
),
),
SizedBox(
height: 10,
),
Container(
height: blocksizeVertical * 8,
color: Colors.orangeAccent,
child: OutlineButton(
onPressed: () {},
borderSide: BorderSide(
color: Colors.orangeAccent, //Color of the border
style: BorderStyle.solid, //Style of the border
width: 0.8, //width of the border
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 0,
horizontal: 12,
),
child: Center(
child: Text(
"Outline button",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.caption.copyWith(
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
),
),
),
),
],
);
It will give us output like below :
Conclusion:
In this article, we have learned about What is Button in Flutter along with How to use it in a Flutter?
Do let us know your suggestion/Feedback for this article.
We would love to assist you.
Keep Flirting Flutter !!!
Do let us know if you need any assistance with Flutter.
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.
