Elevated Button Flutter | New Widget Examples


Elevated Button Flutter :

Elevated Button Widget in Flutter app is used to display a button with new theme i.e., you ca make use of multiple options through this implementation.

In this tutorial on Elevated Button Flutter  we will see the easiest way of designing a button with various properties like elevation, backgroundColor, shadowColor, minimumSize, fixedSize, side and more…

This type of button declaration is not only easy but also helps you design a attractive button for your app which in turn improves or adds upon the app look.

We have seen the easiest way of adding icon to the button if you have any query in this implementation go through the below video tutorial for complete information.

main.dart :

Providing the code for elevated button implementation.We have seen through the general properties of how a button will implement and added few properties like elevation, text Style, back ground color, shadow color and few others.

You can also try to implement few other properties by tapping on the elevated button from mac as cmd + tap on widget and windows ctrl + tap.

There are few functionality’s like onHover which can be used only in websites but as a part of tutorial i have mentioned here which will not work in mobile apps.


import 'package:flutter/material.dart';

void main(){

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Elevated Button"),),
        body: Center(
          child: ElevatedButton.icon(
           icon: const Icon(Icons.store,
           color: Colors.white70,),
            onPressed: (){
              print("On Pressed");
            onLongPress: (){
              print("On Long Pressed");
            label: const Text("Submit"),
            onHover: update(),
            style: ButtonStyle(
              textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20.0)),
              elevation: MaterialStateProperty.all<double>(10.0),
              backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
              shadowColor: MaterialStateProperty.all<Color>(Colors.amberAccent),
              minimumSize: MaterialStateProperty.all(Size(100,50)),
              fixedSize: MaterialStateProperty.all(Size(200,100)),
              side: MaterialStateProperty.all(BorderSide(color: Colors.black)),

  update() {



Output :

Providing the link to the tutorial do visit for complete information.

If you have any query’s in this tutorial do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.



Show Buttons
Hide Buttons
Read previous post:
Flutter Mixins : Get started with mixins

  Flutter Mixins : Flutter Mixins is mainly used to make use of the code in multi level hierarchy's i.e.,...