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 can make use of multiple options through this implementation.

These are a fundamental component in Flutter app development, offering users a visually prominent way to interact with your app.

They provide a raised appearance, often used for primary actions like submitting forms or navigating to key sections. With customizable properties like elevation, text style, and background color, elevated buttons offer versatility while enhancing the overall user experience.

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

Elevated Button Video Tutorial :

Please visit the provided link for comprehensive information on the tutorial.

If you have any questions about this tutorial, please feel free to let us know in the comments below. If you found this tutorial helpful, we’d appreciate your likes and shares to stay updated on more interesting content.