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(){
  runApp(MyApp());
}

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

  @override
  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.