ElevatedButton in Flutter

ElevatedButton is a type of button widget in Flutter that displays a button with a raised (3D) effect. It’s a material design button that provides a visual elevation effect when pressed, making it stand out from the surrounding UI.
ElevatedButton is a button widget in Flutter that adheres to Material Design guidelines. It shows a button with an elevated effect, giving the impression that it is elevated above the screen. The button seems three-dimensional thanks to the shadowing effect.

Key Properties:

• child: The content of the button (e.g., text, icon).
• style: The style of the button, including elevation, color, shape, and more.
• onPressed: The callback function to call when the button is pressed.
• onLongPress: The callback function to call when the button is long-pressed.

ElevatedButton(
  child: Text('Login!'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // button color
    onPrimary: Colors.white, // text color
    elevation: 5, // elevation effect
  ),
  onPressed: () {
    print('Logined!');
  },
)

Example

import 'package:flutter/material.dart';

class ElevatedbuttonDemo extends StatefulWidget {
  const ElevatedbuttonDemo({Key? key}) : super(key: key);

  @override
  State<ElevatedbuttonDemo> createState() => _ElevatedbuttonDemoState();
}

class _ElevatedbuttonDemoState extends State<ElevatedbuttonDemo> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "Elevated  Button",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          flexibleSpace: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
              colors: [Colors.deepPurple, Colors.orangeAccent],
              begin: Alignment.topLeft,
              end: Alignment.topRight,
            )),
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: ElevatedButton(
                onPressed: () {
                  // hondle button  press
                },
                style: ElevatedButton.styleFrom(
                  foregroundColor: Colors.white,
                  backgroundColor: Colors.blue, // Text color
                  shadowColor: Colors.black, // Shadow color
                  elevation: 5, // Elevation
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10), // Rounded corners
                  ),
                  padding: EdgeInsets.symmetric(
                      horizontal: 20, vertical: 10), // Padding
                ),
                child: Text("Elevated Button"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output