ElevatedButton Widget in Flutter

ElevatedButton Widget in Flutter

ElevatedButton :

  • An elevated button is a labeled child displayed on a Material widget whose Material.elevation increases when the button is pressed.

  • Buttons in applications are provided to add actions and functionalities.

  • The constructor of the elevated button gives an idea of its functionalities and is shown below:
const ElevatedButton(
{Key? key,
required VoidCallback? onPressed,
VoidCallback? onLongPress,
ButtonStyle? style,
FocusNode? focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
required Widget? child}
)

Example :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: ElevatedButton(onPressed: () {}, child: Text('Elevated Button')),
    ),
  ));
}

Output :

Example :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
            backgroundColor: Colors.orange,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            textStyle: const TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.bold,
            )),
        child: const Text('Elevated Button'),
      ),
    ),
  ));
}