How to Use ElevatedButton Widget Flutter

Hello Guys How are you all? hope you all are fine. As we know RaisedButton is deprecated and the Elevated button is replacing Raised Button widget with its new features. So here we learn all about ElevatedButton Widget Flutter. So without wasting your time let’s start this article.

How to Use ElevatedButton Widget Flutter?

Basic Usage of ElevatedButton

Let’s Use ElevatedButton with basic Usage. ElevatedButton Require two main Property. The first one is Child() and the second one is OnPressed(). Let’s explore examples.

Example

 ElevatedButton(
    child: Text('FlutterCorner.com'),
    onPressed: () {
      print('Button Pressed');
    },
  )

Ouput

ElevatedButton With Icon and Text

Here we are going to use our ElevatedButton with Icon And Text. Just simply use ElevatedButton.icon Instead of ElevatedButton. Let’s explore examples.

Example

            ElevatedButton.icon(
              label: Text('FlutterCorner.com'),
              icon: Icon(Icons.android_outlined),
              onPressed: () {
                print('Button Pressed');
              },
            ),

Output

Background color of Elevated Button in Flutter

Now, Suppose we need to change Elevated Button Background color then? Elevated Button has a style Property And style property need ButtonStyle(). ButtonStyle has backgroundColor property which requires MaterialStateProperty. You can simply assign background color by MaterialStateProperty.all<Color>(Colors.green). Let’s explore examples of Background color of Elevated Button in Flutter.

Example

            ElevatedButton(
              onPressed: () {
                print('Button Pressed');
              },
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
              ),
              child: Text('FlutterCorner.com'),
            ),

Output

ElevatedButton Text Style

What if we want to style Our Text of ElevatedButton then? Don’t worry You can simply assign TextStyle property to ElevatedButton‘s style. ElevatedButton.styleFrom has textStyle property so you can simply use this property. Let’s explore examples.

Example

            ElevatedButton(
              onPressed: () {
                print('Button Pressed');
              },
              child: Text('FlutterCorner.com'),
              style: ElevatedButton.styleFrom(
                textStyle: TextStyle(
                  color: Colors.black,
                  fontSize: 30,
                  fontStyle: FontStyle.normal,
                ),
              ),
            ),

Output

ElevatedButton Shadow and Elevation

Do we need to give shadow to the button then? we can use ElevatedButton.styleFrom and this property has shadowColor Property with Elevation property. so you can simply give shadow with elevation in ElevatedButton. Let’s explore examples.

Example

            ElevatedButton(
              child: Text('FlutterCorner.com'),
              style: ElevatedButton.styleFrom(
                onPrimary: Colors.white,
                shadowColor: Colors.red,
                elevation: 20,
              ),
              onPressed: () {
                print('Button Pressed');
              },
            )

Output

ElevatedButton Border

Now let’s suppose we need to give a border to our ElevatedButton. so we can use ElevatedButton.styleFrom’s side property which requires BorderSide. You can simply give side to BorderSide(color: Colors.red, width: 5). Let’s explore examples.

Example

            ElevatedButton(
              child: Text(
                'FlutterCorner.com',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              style: ElevatedButton.styleFrom(
                primary: Colors.yellow,
                onPrimary: Colors.white,
                side: BorderSide(color: Colors.red, width: 5),
              ),
              onPressed: () {
                print('Button Pressed');
              },
            )

Output

ElevatedButton Shape

Lets Change the button shape can be done by passing an OutlinedBorder as shape parameter. For example, you can pass a BeveledRectangleBorder.

Example

            ElevatedButton(
              child: Text(
                'FlutterCorner.com',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              style: ElevatedButton.styleFrom(
                onPrimary: Colors.white,
                shape: const BeveledRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(5),
                  ),
                ),
              ),
              onPressed: () {
                print('Button Pressed');
              },
            )

Output

So this is all Example to make your elevatedButton stylish now, Let’s Introduce ElevatedButton Properties, Its DataType, and Its Usage in a flutter.

ElevatedButton Properties

• 1. autofocus [ bool ] : True if this widget will be selected as the initial focus when no other node in its scope is currently focused
• 2. child [ Widget ] : Typically the button’s label.
• 3. clipBehavior [ Clip ] : The content will be clipped (or not) according to this option
• 4. enabled [ bool ] : Whether the button is enabled or disabled
• 5. focusNode [ FocusNode ] : An optional focus node to use as the focus node for this widget
• 6. hashCode [ int ] : The hash code for this object
• 7. key [ Key ] : Controls how one widget replaces another widget in the tree
• 8. onLongPress [ VoidCallback ] : Called when the button is long-pressed
• 9. onPressed [ VoidCallback ] : Called when the button is tapped or otherwise activated
• 10. runtimeType [ Type ] : A representation of the runtime type of the object.
• 11. style [ ButtonStyle ] : Customizes this button’s appearance

Faqs

Summery

So it’s all About How to Use ElevatedButton Widget Flutter. Hope this above-all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?