This tutorial gives you examples of how to use ElevatedButton
widget in Flutter, from the basic usage, followed by how to customize the button.
Elevated Button is one of Material Design's buttons whose characteristic is the elevation increases when it's being pressed by the user. If you need to create a Material Design's Elevated Button in Flutter, you can use ElevatedButton
widget. The widget has been available since Flutter 1.22.
Using ElevatedButton
You can create an ElevatedButton
in Flutter by calling its constructor.
const ElevatedButton({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
@required Widget child,
})
There are two required parameters. Of course you have to pass a Widget
as child
, typically a Text
or an Icon
. You're also required to pass onPressed
callback which is called when the user presses the button.
If you want to create an elevated button with both Icon
and Text
widgets inside, a static factory method ElevatedButton.icon
makes it easier for you. Instead of child
, you need to pass a Widget
for each of icon
and label
.
factory ElevatedButton.icon({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus,
Clip clipBehavior,
@required Widget icon,
@required Widget label,
})
Basic Usage
The most basic usage only requires you to pass the required parameters
ElevatedButton(
child: Text('Woolha.com'),
onPressed: () {
print('Pressed');
},
)
Output:
The example of using ElevatedButton.icon
is shown below.
ElevatedButton.icon(
label: Text('Woolha.com'),
icon: Icon(Icons.web),
onPressed: () {
print('Pressed');
},
)
Output:
To delect when the user does long press on the button, you can pass another callback function as onLongPress
.
ElevatedButton(
child: Text('Woolha.com'),
onPressed: () {
print('Pressed');
},
onLongPress: () {
print('Long press');
},
)
You may also need to read about GestureDetector
in Flutter in case you want to detect other type of gestures
Setting Button Style
The style of the button can be customized by creating a ButtonStyle
. The ButtonStyle
can be passed as ThemeData
's elevatedButtonTheme
or ElevatedButton
's style
.
To pass the ButtonStyle
as theme data, you have to create an ElevatedButtonThemeData
with the ButtonStyle
passed as style
parameter in the constructor. Then, pass the ElevatedButtonThemeData
as elevatedButtonTheme
in the constructor of ThemeData
. Setting the style as theme data affects the style of all ElevatedButton
widgets under the tree. The best practice for creating a ButtonStyle
for an ElevatedButton
is by using ElevatedButton.styleFrom
.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Woolha.com Flutter Tutorial',
home: _ElevatedButtonExample(),
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.purple,
),
),
),
);
}
}
class _ElevatedButtonExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Center(
child: ElevatedButton(
child: Text('Woolha.com'),
onPressed: () {
print('Pressed');
},
),
),
);
}
}
Output:
For defining a style for a specific button, you can pass ButtonStyle
as style
parameter in the constructor of ElevatedButton
.
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () {
print('Pressed');
},
)
Output:
If you define ButtonStyle
on both ThemeData
's elevatedButtonTheme
and ElevatedButton
's style
, the most specific one which is the one defined as ElevatedButton
's style
will be chosen by Flutter.
What customizations can be created using ButtonStyle
? Below are some of the examples.
Setting Colors
Though ElevatedButton.styleFrom
is used to construct ButtonStyle
, it doesn't have the same parameters as the constructor of ButtonStyle
. ElevatedButton.styleFrom
has its own logic to convert the passed properties into ButtonStyle
's properties.
For setting the background color, you can pass a Color
as primary
. When the button is disabled, you can set another Color
passed as onSurface
. Those parameters are used to construct backgroundColor
property of ButtonStyle
, with the latter's opacity is set to 0.12.
For setting the color used for Text
and Icon
widgets inside the button, you can pass a Color
as onPrimary
. When the button is disabled, you can set another Color
passed as onSurface
. Those parameters are used to construct foregroundColor
property of ButtonStyle
, with the latter's opacity is set to 0.38.
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
onSurface: Colors.grey,
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Text Style
You can define a TextStyle
specific for the button and pass it as textStyle
. The color
property of TextStyle
may not affect the text color, but you can set the color of the text by passing primary
as the parameter of ElevatedButton.styleFrom
.
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
textStyle: TextStyle(
color: Colors.black,
fontSize: 40,
fontStyle: FontStyle.italic
),
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Shadow and Elevation
The characteristic of Elevated Button is the elevation increases when it's on pressed state. It's also possible to set the initial elevation by passing elevation parameter. For this kind of button, the elevation is set to 0 if the button is disabled. An elevation increase of 2 will be applied if the state is hovered or focused, while pressing the button increases the elevation by 6.
When the elevation is above 0, the shadow becomes visible. Changing the shadow color can be done by setting shadowColor
property.
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
shadowColor: Colors.red,
elevation: 5,
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Border
This button doesn't come with default border. If you want to show border, you can pass a BorderSide
as side
parameter.
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
side: BorderSide(color: Colors.red, width: 5),
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Shape
Changing the button shape can be done by passing an OutlinedBorder
as shape
parameter. For example, you can pass a BeveledRectangleBorder
.
ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
shape: const BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
),
onPressed: () {
print('Pressed');
},
)
Output:
Below is the list of named parameters you can pass to ElevatedButton.styleFrom
static method.
Color primary
: Used to constructButtonStyle.backgroundColor
.Color onPrimary
: Used to constructButtonStyle.foregroundColor
andButtonStyle.overlayColor
.Color onSurface
: Used to constructButtonStyle.backgroundColor
andButtonStyle.foregroundColor
when the button is disabled.Color shadowColor
: The shadow color of the button'sMaterial
.double elevation
: The elevation of the button'sMaterial
.TextStyle textStyle
: The style forText
widget.EdgeInsetsGeometry padding
: The padding between the button's boundary and its child..Size minimumSize
: The minimum size of the button.BorderSide side
:The color and weight of the button's outline.OutlinedBorder shape
: The shape of the button's underlyingMaterial
.MouseCursor enabledMouseCursor
: Defines theMouseCursor
when the button is enabled. Used to constructButtonStyle.mouseCursor
.MouseCursor disabledMouseCursor
: Defines theMouseCursor
when the button is disabled. Used to constructButtonStyle.mouseCursor
.VisualDensity visualDensity
: How compact the button's layout will be.MaterialTapTargetSize tapTargetSize
: The minimum size of area where the button may be pressed..Duration animationDuration
: The duration of animated changes forshape
andelevation
.bool enableFeedback
: Whether detected gestures should provide acoustic and/or haptic feedback..
ElevatedButton
Properties
Key key
: The widget's key, used to control if it should be replaced.VoidCallback onPressed
*: The callback to be called when the button is tapped.VoidCallback onLongPress
: The callback to be called when the button is long pressed.ButtonStyle style
: Defines the style for the button.FocusNode focusNode
: Focus node of the widget.bool autofocus
: Whether this widget will be selected as initial focus. Defaults tofalse
Clip clipBehavior
: Defines how the content is clipped. Defaults toClip.none
.Widget child
*: The button's label.
*: required
You can also read about:
OutlinedButton
, a button with an outlined border.TextButton
, a standard button without outlined border and elevation change.