Flutter development is becoming popular and more popular every day, due to its wide range of customisation, custom widgets, and very easy-to-implement approach. Today we will learn about flutter button types, and how we can make different type of buttons in flutter.
This Flutter different type of buttons example will teach you about the different type of buttons available in flutter, as per our need we can choose from. We will see some customisation and some default settings of every button. In past few months flutter had added some new type and removed some old flutter buttons.
- RaisedButton is now ElevatedButton
- OutlineButton is now OutlinedButton
- FlatButton is now TextButton
What we will get in output?
Required Dependencies
No thirdparty dependencies needed.
Let’s start step by step implementation so that we can understand what is need to be done to achieve the desired output.
In this class we will create different type of buttons available in flutter, all buttons are the part of flutter own library. We we see all flutter button types implementation one by one. So that you can learn easily.
You can also read about
Flutter Custom Radio Button with Custom Shapes
Elevated Button With Icon
Elevated button is very easy to use, it have a widget type label property where you can set the label of of button, and also have elevation(shadow) by default. It have a property style which is used to styling the button like change the color, change shape, border etc.
If you want to set icon before Title then there is a simple way to do this, ElevatedButton.icon and it will ask to set an icon, pass the icon widget with icondata and your icon button is ready. Have a look.
ElevatedButton.icon(
icon: const Icon(Icons.thumb_up),
label: const Text("Like"),
onPressed: () => Fluttertoast.showToast(
msg: 'I am elevated button with icon'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
),2. Elevated Button With Stadium Border
Stadium Border is very use full when you want to make left and right side complete round, it looks similar to Flutter Chip widget. Stadium Border is shape so it can used in any widget that have shape property like, we can user it in Container, OutlineButton etc. It will give a nice and clean look to your widget without setting any radius.
ElevatedButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'I am outlined button with stadium border');
},
child: const Text('Button'),
style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
),3. Elevated Button With Border Radius
If you need to set border radius to your widget then you can use this piece of code given below.
ElevatedButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'I am circle elevated button with border radius');
},
child: const Text('Button'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), // <-- Radius
),
),
),4. Elevated Circle Button
ElevatedButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am circle elevated button');
},
child: const Text('Button'),
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(24),
),
),5. Outline Button with Stadium Border
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'I am outlined button with stadium border');
},
child: const Text('Button'),
style: OutlinedButton.styleFrom(
shape: const StadiumBorder(),
),
),6. Outline Circle Button
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am circle outlined button');
},
child: const Text('Button'),
style: OutlinedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(24),
),
),7. Outline Beveled Rectangle Button
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(
msg:
'I am outlined button with Beveled Rectangle Border');
},
child: const Text('Button'),
style: OutlinedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
),8. Outline Button With Icon
OutlinedButton.icon(
icon: const Icon(Icons.star_outline),
label: const Text("Outlined Button"),
onPressed: () => Fluttertoast.showToast(
msg: 'I am outlined button with icon'),
style: ElevatedButton.styleFrom(
side: const BorderSide(width: 2.0, color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
),9. Text Button
TextButton(
child: const Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('Text Button',
style: TextStyle(
color: Colors.teal,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
onSurface: Colors.yellow,
side: const BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
Fluttertoast.showToast(msg: 'I am text button');
},
),10. Flat Button (Deprecated)
FlatButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am old flat button');
},
child: const Text('Stadium Border'),
shape: const StadiumBorder(),
color: Colors.pink,
textColor: Colors.white,
),11. Icon Button
IconButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am icon button');
},
icon: const Icon(Icons.shopping_cart),
color: Colors.redAccent,
),12. Floating Action Button
FloatingActionButton(
onPressed: () {
Fluttertoast.showToast(msg: 'Hello I am floating action button');
},
tooltip: 'Float Action Button',
child: const Icon(Icons.add),
)13. Custom Button
SizedBox(
height: 50.0,
child: GestureDetector(
onTap: () {
Fluttertoast.showToast(msg: 'I am custom button');
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
),Here is the full code in one shot
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
// ignore: slash_for_doc_comments
/**
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
**/
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
const Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'Here are some commonly used buttons',
style: TextStyle(fontSize: 16),
),
),
ElevatedButton.icon(
icon: const Icon(Icons.thumb_up),
label: const Text("Like"),
onPressed: () => Fluttertoast.showToast(
msg: 'I am elevated button with icon'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
),
ElevatedButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'I am outlined button with stadium border');
},
child: const Text('Button'),
style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
),
ElevatedButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'I am circle elevated button with border radius');
},
child: const Text('Button'),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12), // <-- Radius
),
),
),
ElevatedButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am circle elevated button');
},
child: const Text('Button'),
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(24),
),
),
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(
msg: 'I am outlined button with stadium border');
},
child: const Text('Button'),
style: OutlinedButton.styleFrom(
shape: const StadiumBorder(),
),
),
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am circle outlined button');
},
child: const Text('Button'),
style: OutlinedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(24),
),
),
OutlinedButton(
onPressed: () {
Fluttertoast.showToast(
msg:
'I am outlined button with Beveled Rectangle Border');
},
child: const Text('Button'),
style: OutlinedButton.styleFrom(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
OutlinedButton.icon(
icon: const Icon(Icons.star_outline),
label: const Text("Outlined Button"),
onPressed: () => Fluttertoast.showToast(
msg: 'I am outlined button with icon'),
style: ElevatedButton.styleFrom(
side: const BorderSide(width: 2.0, color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
),
TextButton(
child: const Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('Text Button',
style: TextStyle(
color: Colors.teal,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
onSurface: Colors.yellow,
side: const BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
Fluttertoast.showToast(msg: 'I am text button');
},
),
FlatButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am old flat button');
},
child: const Text('Stadium Border'),
shape: const StadiumBorder(),
color: Colors.pink,
textColor: Colors.white,
),
SizedBox(
height: 50.0,
child: GestureDetector(
onTap: () {
Fluttertoast.showToast(msg: 'I am custom button');
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
),
IconButton(
onPressed: () {
Fluttertoast.showToast(msg: 'I am icon button');
},
icon: const Icon(Icons.shopping_cart),
color: Colors.redAccent,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Fluttertoast.showToast(msg: 'Hello I am floating action button');
},
tooltip: 'Float Action Button',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
If you have any query feel free to ask.
Also, check out the
