Flutter – ElevatedButton Widget

Elevated Button is a flutter component included inside the material package i.e. “package:flutter/material.dart“. The main characteristic these buttons hold is the slight elevation in their surface towards the screen on getting 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. 

Constructor for Elevated Button

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. 

Properties of Elevated Button

• 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 style: 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 to be executed when the user hovers the button

Methods Provided in an Elevated Button

• createElement(): create a StatefulElement to manage 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.

Styling a Button

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 button theme to ThemeData. Styling for elevated button is done using ElevatedButton.styleFrom. Specific styling for a button explicitly is done using ButtonStyle parameter as given below:

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
          ),
          onPressed: () {},
        ),

Output:

Changing Text Style

Passing values to the textStyle property of the button helps in altering the text styling 

 ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            textStyle: const TextStyle(
                color: Colors.white,
                 fontSize: 10, 
                 fontStyle: FontStyle.normal),
          ),
          onPressed: () {},
        ),

Output:

Changing Border

Using BorderSide as a parameter to side property of the Elevated Button helps in modifying the border 

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            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:

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            // 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:

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            // 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,
              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(
            primary: Colors.green,
            // 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,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('This is your new screen')),
    );
  }
}

Output: