In this tutorial, we are going to learn and implement the ElevatedButton widget in Flutter. Buttons in applications are provided to add actions and functionalities. Those can be used as submit buttons, to do some action like adding, removing, etc. It is one of the fundamental parts of the application.
Creating an ElevatedButton
The ElevatedButton widget takes two required parameters as follows:
onPressed(): This is a void callback and is triggered when the button is pressed or tapped.
child: This field takes a widget which is displayed in the button. We can place an icon or Text widget.
Other parameters are as follows:
onLongPress(): This is a void callback and is triggered when the button is pressed for a long time.
onHover(): This is a void callback with a boolean value that the button is being hovered over or not.
onFocusChange(): This is a void callback with a boolean value that the focus from the button is changed or not.
style: This takes a button style type of widget and we can customize the Button widget.
autofocus: This is by default set to false and is used to set whether the button should be auto focussed or not.
Syntax: The syntax of the ElevatedButton widget is as follows:
ElevatedButton(
onPressed: () {},
child: const Text(
'Click Me',
),
),
Example: In the following example, we have an ElevatedButton that shows a Snackbar when pressed.
class ElevatedButtonTutorial extends StatelessWidget {
const ElevatedButtonTutorial({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AllAboutFlutter'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Welcome to AllAboutFlutter"),
),
);
},
child: const Text(
'Click Me',
),
),
),
);
}
}
Output
Styling an ElevatedButton using ElevateButton.styleFrom()
Flutter provides a whole bunch of tools to style its widget. We can style the buttons using the ButtonStyle. We will be using the ElevatedButton.styleFrom() which provides the ButtonStyle widget customized for ElevatedButton.
ElevatedButton(
onPressed: () {},
child: const Text(
'Click Me',
),
style: ElevatedButton.styleFrom(),
),
There are lots of parameters to customize the Buttons.
Example: In the following example, we will be customizing the colour, text size and padding of the Button.
class ElevatedButtonTutorial extends StatelessWidget {
const ElevatedButtonTutorial({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AllAboutFlutter'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Welcome to AllAboutFlutter"),
),
);
},
child: const Text(
'Click Me',
),
style: ElevatedButton.styleFrom(
primary: Colors.amber,
textStyle: const TextStyle(
fontSize: 32.0,
),
padding: const EdgeInsets.all(20),
),
),
),
);
}
}
Output
