What is The Elevated Button Flutter Widget | Basics of the Widget (2023)

This tutorial demonstrates how to use the Elevated Button flutter widget in Flutter, starting with a basic use case and moving on to button customization.

One of the buttons in Material Design called Elevated Button has the feature that as the user presses it, its elevation rises. The Elevated Button flutter widget can be used to create a Material Design elevated button. As of Flutter 1.22, the widget is accessible.

Properties of Elevated Button Flutter

autofocus: provides a boolean value that corresponds to the button’s initial focus.

clipBehavior: determines whether or not the content is clipped.

focusNode: depicts the widget’s focus node.

ButtonStyle: determines how the button will be styled.

onLongPress: the action to be performed when the user long presses the button.

enabled: returns a boolean value indicating whether or not the button is active.

hashcode: selects the button’s hashcode

Key: Determines how one widget replaces another in the tree.

onFocusChanged: a method that is called when the focus of a button changes.

onHover: an action that is performed when the user hovers over a button.

The Procedures Offered by an Elevated Button

createElement(): Make a StatefulElement to manage the position of the button in the widget tree.

createState(): Generates the mutable state for this widget at a specified location in the tree.

build(BuildContext context): Describes a user interface component.

createElement(): creates a StatelessElement to manage the widget’s position in the tree.

debugDescribeChildren(): This method returns a list of DiagnosticsNode objects that describe the children of this node.

debugFillProperties(): Add additional properties associated with the node.

noSuchMethod(): Called when a non-existent method or property is accessed.

toDiagnosticsNode(): Returns a debug representation of the object used by debugging tools. 

toString(): Returns a string representation of this object.

toStringDeep(): This function returns a string representation of this node and its descendents.

toStringShallow(): Returns a one-line detailed description of the object.

toStringShort(): This widget’s textual description in a short string.

The Issue

When you add an ElevatedButton to your app, it changes the background color of a button to the primarySwatch color. For instance, if you recently created a new app, the ElevatedButton may have a blue background due to the primarySwatch being set to Colors.blue.

child:  ElevatedButton(
          onPressed: () {},
          child: const Text(
            'Elevated Button',
            style: TextStyle(fontSize: 40),
          ),
        ),

Output:

flutter default elevated button

Reminder

The majority of mobile and web applications have buttons that users can press to interact. Elevated buttons can be made in Flutter using the ElevatedButton widget.

RaisedButton is no longer supported and has been replaced by ElevatedButton.

Upgrade to Flutter 1.22.0 or a later version if you want to use ElevatedButton without getting any errors or warnings. Run this command: flutter upgrade to make it simple to do that. To ensure that they are compatible with Flutter 2.8.1 and later, the code snippets in this article were recently updated.

How to Change the Elevated Button Color Flutter

The Elevated button’s background color may need to be changed, but the primarySwatch should remain the same.

Simply set the Elevated Button’s style property from the Elevated Button Color Flutter to change the Elevated Button’s color. To change the primary property’s color, use the static styleFrom() method.

These are the actions:

  1. Place the ElevatedButton widget there.
  2. ElevatedButton is assigned after the style parameter is added inside it. styleFrom().
  3. Add the main parameter and any color to ElevatedButton.styleFrom.
  4. Launch the app.
child:  ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.green, // Background color
          ),
          child: const Text(
            'Elevated Button',
            style: TextStyle(fontSize: 40),
          ),
        )

Output:

elevated button color

Enable/Disable

Simply set the onPressed parameter to null to disable an ElevatedButton. Set the onPressed parameter to a void function to enable an ElevatedButton.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("FLUTTER SERVICE"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(25),
          child: Column(
            children: [
              // An enabled button
              ElevatedButton(
                child: const Text('Enabled Button'),
                onPressed: () {},
              ),

              // A disabled button
              const ElevatedButton(
                  onPressed: null, child: Text('Disabled Button'))
            ],
          ),
        ),
      ),
    );
  }
}

Output 

elevated button enable disable

Color Modification for the Elevated Button Flutter

You might occasionally want to modify the Elevated Button’s text color. Simply assign the color of your choice to the onPrimary property to accomplish this.

What to do is as follows:

  1. ElevatedButton.styleFrom() is assigned after the style parameter is added inside it.
  2. Add any color to the onPrimary parameter (within ElevatedButton.styleFrom).
  3. Fire up the app!
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.black, // Background color
    onPrimary: Colors.amber, // Text Color (Foreground color)
  ),
  child: const Text(
    'Elevated Button',
    style: TextStyle(fontSize: 40),
  ),
)

Output 

elevated button style from

How to Change the Elevated Button Flutter Color on hover

The ButtonStyle widget can be used to alter the Elevated button’s hover color. The overlayColor property can be added inside the ButtonStyle widget, and colors can be assigned based on state, such as on press, on hover, and on focused.

Here’s how to go about it:

  1. Incorporate the ElevatedButton widget.
  2. In the ElevatedButton, add the overlayColor parameter and assign the aterialStateProperty. resolveWith().
  3. Verify if the state is hovered, and if it is, run the color of your choice again.
ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                overlayColor: MaterialStateProperty.resolveWith<Color?>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.hovered))
                      return Colors.redAccent; //<-- SEE HERE
                    return null; // Defer to the widget's default.
                  },
                ),
              ),
              child: const Text(
                'Elevated Button 1',
                style: TextStyle(fontSize: 24),
              ),
            ),

How to Change the Elevated Button Flutter Border Color

Here’s how to do it if you want to give the Elevated Button a border and change its color:

  1. BorderSide() should be set and the side property added.
  2. Add the width and color properties inside the BorderSide() function, then choose the right color to use.
 body: Center(
        child:ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.black,
            onPrimary: Colors.amber,
            side: BorderSide(color: Colors.red, width: 5),
          ),
          child: const Text(
            'Elevated Button',
            style: TextStyle(fontSize: 40),
          ),
        )
      ),

Output 

elevated button border color

How to Change the Elevated Button Flutter Color on press

Using the ButtonStyle widget, you can modify the Elevated button’s color on PESS. You can include the overlayColor property inside the ButtonStyle widget and assign the color based on state, such as on press, on hover, and on focused.

Here’s how to go about it:

  1. Place the ElevatedButton widget there.
  2. Add the aterialStateProperty and the overlayColor parameter inside the ElevatedButton. resolveWith().
  3. If the state is pressed, check to see if it is pressed, and then run the color of your choice again.
body: Center(
        child:ElevatedButton(
          onPressed: () {},
          style: ButtonStyle(
            overlayColor: MaterialStateProperty.resolveWith<Color?>(
                  (Set<MaterialState> states) {
                if (states.contains(MaterialState.pressed))
                  return Colors.redAccent; //<-- SEE HERE
                return null; // Defer to the widget's default.
              },
            ),
          ),
          child: const Text(
            'Elevated Button 1',
            style: TextStyle(fontSize: 24),
          ),
        )
      ),

How to Change the Shadow Color of the Elevated Button Flutter

You might also want to alter the shadow color of the Elevated Button if you are designing your app to adhere to your brand guidelines in full. Your button must first be elevated in order to change the shadow’s color.

We’ll examine how to alter the shadow’s color now:

  1. The elevation property should be added inside the Elevated Button, and its value should be 20.
  2. Now add the shadowColor property to the elevated button and set it to the shade of gray you desire for the shadow.
  3. Launch the app.
  body: Center(
        child:ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            primary: Colors.black,
            onPrimary: Colors.amber,
            elevation: 20,  // Elevation
            shadowColor: Colors.amber, // Shadow Color
          ),
          child: const Text(
            'Elevated Button',
            style: TextStyle(fontSize: 40),
          ),
        )
      ),

Output 

elevated button shadow color

Elevated Button Color Management at the App Level

It is not permitted to change the color of each Elevated Button in your app. What if the branding of your app is altered? Would you like to spend many hours looking for every button and changing its color? Certainly not, Let’s look at how you can customize the Elevated Button’s theme at the app level. By doing this, every Elevated Button in your app will have the same appearance, and you can change them all at once.

These are the actions:

  1. Go to your main.dart file.
  2. Locate the ThemeData widget inside the MaterialApp.
  3. The elevatedButtonTheme property should be added, and ElevatedButtonThemeData() should be assigned.
  4. As you would for a standard ElevatedButton, add the style property and modify the color.
  5. See where you can place the ElevatedButton widget in your Flutter application.
MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.greenAccent, // background (button) color
        onPrimary: Colors.black, // foreground (text) color
      ),
    ),
  ),
  home: ElevatedButtonColorDemo(),
);
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: ...
      backgroundColor: const Color(0xff6ae792),
    ),
    body: Center(
      child: Column(
        children: [
          SizedBox(
            height: 50,
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text(
              'Elevated Button 1',
              style: TextStyle(fontSize: 24),
            ),
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text(
              'Elevated Button 2',
              style: TextStyle(fontSize: 24),
            ),
          ),
          ElevatedButton(
            onPressed: () {},
            child: const Text(
              'Elevated Button 3',
              style: TextStyle(fontSize: 24),
            ),
          )
        ],
      ),
    ),
  );
}

Conclusion

We learned how to change the Elevated Button flutter color in this tutorial. Additionally, using real-world examples, we looked at how to alter the background and text colors as well as the shadow, border, and disabled state colors. In the end, we discovered how to choose colors for all of the Elevated Buttons in our app from a single location.

Would you like to check other interesting Flutter tutorials?

Read More:

Flutter Liquid Swipe Animation – The Best Liquid Swipe Animation

Related articles

Things To Remember For A Flutter Developer Resume | Mind-blowing

This article will enlighten you about how to write...

How To Flutter Hide Keyboard Easily? 3 Crazy Steps in 2023

This article enlightens you about how to Flutter hide...

How to Make a Flutter Quiz App | Step-by-step App Guide in 2023

In this guide, we’ll find out about the simple...

Flutter Liquid Swipe Animation – The Best Liquid Swipe Animation in 2023

How do you make a flutter liquid swipe animation?...

Case Studies

eDental App

Case Study: eDental Dentist App

Our team recently embarked on an exciting project to develop the eDental Dentist App, a cutting-edge mobile application designed for both Android and iOS...

Voltage Lab SAAS App

Voltage Lab is an Electrical & Electronics Website and App that they wanted to launch a new SAAS app that would allow students to...
google play app store listing

Keyword Research for EEE & Cricket Live Score App

A Cricket Live Score App & Voltage Lab EEE Engineer App aimed to enhance their visibility on Google and the iOS app store, seeking...