Flutter Create Button - ElevatedButton Example

In flutter ElevatedButton widget is a material design button. It is used to add elevated stylish buttons in flutter layout. The ElevatedButton comes with all the button customization options and we can modify it as our layout requirements. It does support onPressed event which trigger a function on button press event.

Flutter Create Button - ElevatedButton Example:

1. Creating ElevatedButton widget.

Explanation:

• backgroundColor : To set background color of button.
• padding : To set padding on button inside text.
• textStyle : To set button inside text style like font size, font color, font family etc.
• onPressed : To set onClick event on button.
• child : To pass a child widget, Basically here we would pass the Text as its child.

ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.teal,
          padding: const EdgeInsets.all(12.5),
          textStyle: const TextStyle(fontSize: 26),
        ),
        onPressed: demo,
        child: const Text('Sample Button'),
      ),

2. Source code for main.dart file:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});

  void demo() {
    print('Function Called...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.teal,
          padding: const EdgeInsets.all(12.5),
          textStyle: const TextStyle(fontSize: 26),
        ),
        onPressed: demo,
        child: const Text('Sample Button'),
      ),
    )));
  }
}

Screenshot: