Flutter ElevatedButton Tutorial

Flutter ElevatedButton

Flutter ElevatedButton class is used to display at button with an elevation from the background/surrounding widget.

By default, when an Elevated button is pressed, the elevation of the button increases.

Syntax

The syntax to display an ElevatedButton widget with onPressed callback and text inside the button, is shown in the following.

ElevatedButton(
  onPressed: () { },
  child: const Text('Click Me'),
)

Example

In the following Flutter Application, we shall display an ElevatedButton with the text 'Click Me'.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// main application widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Tutorial';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// stateless widget that the main application instantiates
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ElevatedButton Tutorial')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ElevatedButton(
              onPressed: () { },
              child: const Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshot – Android Emulator