Flutter - ElevatedButton Widget
Last Updated :
04 May, 2025
Elevated Button is a Flutter component included inside the material package, i.e., "package:flutter/material.dart". The main characteristic of these buttons is the slight elevation in their surface towards the screen when tapped by the user. In simple language, elevated buttons are un-deprecated raised buttons with no explicitly defined button styling. Elevated Buttons cannot be styled, i.e., you cannot modify the color of the button, font size, text style, etc, explicitly like raised buttons. This class was launched in version 1.22 of Flutter. You can pass text or icons as a child to them. To handle the styling of the Elevated Button, a ButtonStyle class is used, which allows the styling of a button according to requirements.
ElevatedButton.icon({
Key? key,
required VoidCallback? onPressed,
VoidCallback? onLongPress,
ValueChanged<bool>? onHover,
ValueChanged<bool>? onFocusChange,
ButtonStyle? style,
FocusNode? focusNode,
bool? autofocus,
Clip? clipBehavior,
required Widget icon,
required Widget label
})Parameters
Elevated Button offers two important parameters:
1. child: This represents the button's label.
ElevatedButton(
child: const Text('Raised Button'),
),
2. onPressed: This represents the action to be executed when the button is tapped
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
Here, when the button is tapped, a navigation action to NewScreen is executed.
Property | Description |
|---|
autofocus | Gives a boolean value corresponding to the initial focus of the button |
|---|
clipBehaviour | Decides whether the content is clipped or not |
|---|
focusNode | Represents the focus node of the widget |
|---|
ButtonStyle | Decides the styling of the button |
|---|
onLongPress | The action to be executed when the button is long-pressed by the user |
|---|
enabled | Gives a boolean value for the activity of the button |
|---|
hashcode | Decides the hashcode of the button |
|---|
Key | Controls how one widget replaces another widget in the tree |
|---|
onFocusChanged | A method to be executed on changing the focus of the button |
|---|
onHover | Actin is to be executed when the user hovers over the button |
|---|
Method | Description |
|---|
createElement() | Create a StatefulElement to manage the button's location in the widget tree |
|---|
createState() | Creates the mutable state for this widget at a given location in the tree |
|---|
build(BuildContext context) | Describes the part of the user interface |
|---|
createElement() | Creates a StatelessElement to manage this widget's location in the tree |
|---|
debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children |
|---|
debugFillProperties() | Add additional properties associated with the node |
|---|
noSuchMethod() | Invoked when a non-existent method or property is accessed |
|---|
toDiagnosticsNode() | Returns a debug representation of the object that is used by debugging tools |
|---|
toString() | A string representation of this object |
|---|
toStringDeep() | Returns a string representation of this node and its descendants |
|---|
toStringShallow() | Returns a one-line detailed description of the object |
|---|
toStringShort() | A short, textual description of this widget |
|---|
The styling of an elevated button is quite different from the rest of the buttons. You have to use ButtonStyle as a style parameter. After that, pass ElevatedButtonThemeData is passed as the button theme to ThemeData. Styling for the elevated button is done using ElevatedButton.styleFrom.
Specific styling for a button is explicitly done using the ButtonStyle parameter as given below:
Dart
ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
),
onPressed: () {},
),
Output:
Changing Text Style
Passing values to the textStyle property of the button helps in altering the text styling.
Dart
ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
textStyle: const TextStyle(
color: Colors.white,
fontSize: 10,
fontStyle: FontStyle.normal,
),
),
onPressed: () {},
),
Output:
Changing Border
Using BorderSide as a parameter to the side property of the Elevated Button helps in modifying the border.
Dart
ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
side: BorderSide(color: Colors.yellow, width: 5),
textStyle: const TextStyle(
color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
),
onPressed: () {},
),
Output:
Changing Shape and Shadow
The shape can be changed by passing OutlinedBorder as a parameter to the shape property and shadow can be handled by giving color to shadowColor property. Shadow color is visible only when the button is tapped.
Shape:
Dart
ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
// side: BorderSide(color: Colors.yellow, width: 5),
textStyle: const TextStyle(
color: Colors.white,
fontSize: 25,
fontStyle: FontStyle.normal,
),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
onPressed: () {},
),
Output:
Shadow:
Dart
ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
// side: BorderSide(color: Colors.yellow, width: 5),
textStyle: const TextStyle(
color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
shadowColor: Colors.lightBlue,
),
onPressed: () {},
),
Output:
Let's understand the above explanation with the help of the code given below.
Implementation
Dart
import 'package:flutter/material.dart';
void main() {
runApp(HomeApp());
}
class HomeApp extends StatefulWidget {
HomeApp({Key? key}) : super(key: key);
@override
State<HomeApp> createState() => _HomeAppState();
}
class _HomeAppState extends State<HomeApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
title: const Text('GeeksforGeeks'),
),
body: const FirstScreen()));
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
// side: BorderSide(color: Colors.yellow, width: 5),
textStyle: const TextStyle(
color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
shadowColor: Colors.lightBlue,
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
),
);
}
}
class NewScreen extends StatefulWidget {
const NewScreen({Key? key}) : super(key: key);
@override
State<NewScreen> createState() => _NewScreenState();
}
class _NewScreenState extends State<NewScreen> {
TextEditingController textEditingController = TextEditingController();
@override
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
title: const Text('New Screen'),
),
body: Center(child: Text('This is your new screen')),
);
}
}
Output:
Similar Reads
FlatButton Widget in Flutter
FlatButton is the material design widget in a flutter. It is a text label material widget that performs an action when the button is tapped. Let's understand with the help of examples. Disclaimer: As of May 2021 the FlatButton class in flutter is deprecated. TextButton class should be used instead.
3 min read
Flutter - DropDownButton Widget
In this article, we will learn how to use a DropDownButton and learn various properties of it in flutter. We will use the Flutter DropDownButton widget to display a dropdown list in our application. So first let’s see what is DropDownButton.DropDownButton Widget FlutterIn Flutter, A DropDownButton i
3 min read
Flutter - Expanded Widget
Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column). Â Expanded widget can be taken as the child of Row, Column, and Flex. And in case if we don't
5 min read
Flutter - Custom Widgets
We create Custom Widgets when we want a custom look and feel to our app, and we know that there will be a repetition of a particular widget. We can create the custom widget in a new dart file with all the codes and defining the parameters that we need in the constructor. For more on how to split wid
8 min read
Flutter - Card Widget
Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read
Flutter - CircleAvatar Widget
CircleAvatar widget comes built-in with the flutter SDK. It is simply a circle in which we can add background color, background image, or just some text. It usually represents a user with his image or with his initials. Although we can make a similar widget from the ground up, this widget comes in h
4 min read
Flutter - AnimatedPositioned Widget
The AnimatedPositioned widget in Flutter is used to create animated transitions for a widget's position within a Stack. It allows you to smoothly change the position of a child widget by animating the values of the left, top, right, and bottom properties. In this article, we are going to implement t
4 min read
Flutter - AnimatedBuilder Widget
The AnimatedBuilder widget in Flutter is a powerful utility widget that is used for creating complex animations by rebuilding a part of the widget tree in response to changes in an animation's value. It is especially useful when you want to animate properties of child widgets that cannot be directly
4 min read
Raised Button widget in Flutter
RaisedButton is the material design button based on a Material widget that elevates when pressed upon in flutter. It is one of the most widely used buttons in the flutter library. Let's understand this button with the help of an example. Disclaimer: As of May 2021 the RaisedButton class in flutter i
5 min read
Flutter - ColoredBox Class Widget
A Colored Box is a container that fills it with color according to its child or A widget that paints its area with a specified Color and then draws its child on top of that color. A sample image is given below to get an idea about what we are going to do in this article. Â How to use it? You can simp
3 min read