Display Elevated Button in Flutter

An elevated button is a button with elevation that commonly contains a text label in the center. Elevation increases when the button is pressed by the user. An elevated button is commonly filled with a lighter background color and a shadow. It is a Material Design button.

A ElevatedButton class is used to create an elevated button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Elevated button')),
        body: Center(
            child: ElevatedButton(
          child: const Text('Add'),
          onPressed: () {
            print('Pressed');
          },
        )));
  }
}