ElevatedButton is one of the button widgets in flutter and is used as a click item which calls a callback function enabling interactive application.

In this tutorial, we are going to discuss how can we style the ElevatedButton in Flutter using ElevatedButton.styleFrom(). The ButtonStyle provides a lot of styles that we can use to customize the buttons and make them even more beautiful. It has lots of fields and let's explore them.

ElevatedButton Style Attributes:

• primary: It is the background fill colour of the Button.

• onPrimary: It is the default colour or the overlay colour of the Button Text.

• onSurface: Similar to onPrimary.

• shadowColor: It is used to set the shadowColor.

• surfaceTintColor: It is used to set the surface tint colour.

• elevation: It takes a double type of value and is used to set the shadow distance.

• textStyle: It is used to set the TextStyle of the child widget if it is a TextWidget.

• padding: It is used to set the padding of the Button with its child.

• minimumSize: The minimum size the button should have.

• fixedSize: It is used to fix the size of the button.

• maximumSize: Here we need to specify the maximum size that the button could have.

• side: It is used to set the border side.

• shape: We can change the shape of the border with this field.

• enabledMouseCursor: If true, the mouse cursor can be used on it.

• disabledMouseCursor: If true, the mouse cursor is disabled.

• visualDensity: It is used to set the visual density.

• tapTargetSize: It is used to set the radius where the tap would be recognized from the button.

• animationDuration: It is used to set the duration of the animation of the splash effect.

• enableFeedback: If true, the HapticFeedback is turned on.

• alignment: It is used to set the alignment of the contents of the Button.

• splashFactory: We can set our own InkSplash with this.

Syntax: Apply the style of ElevatedButton as follows:

style: ElevatedButton.styleFrom(
  primary: Colors.green,
),

Example: In the following example, we have some ElevatedButtons of different colours and sizes.

main.dart

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

  @override
  State<ElevatedButtonStyleTutorial> createState() =>
      _ElevatedButtonStyleTutorialState();
}

class _ElevatedButtonStyleTutorialState
    extends State<ElevatedButtonStyleTutorial> {
  void showToast() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text(
          "Welcome to All About Flutter",
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ElevatedButton.styleFrom() Tutorial"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                showToast();
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                textStyle: const TextStyle(
                  fontSize: 24.0,
                ),
              ),
              child: const Text("Press Me"),
            ),
            ElevatedButton(
              onPressed: () {
                showToast();
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.green,
                textStyle: const TextStyle(
                  fontSize: 26.0,
                ),
              ),
              child: const Text("Press Me"),
            ),
            ElevatedButton(
              onPressed: () {
                showToast();
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.red,
                textStyle: const TextStyle(
                  fontSize: 32.0,
                ),
              ),
              child: const Text("Press Me"),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Example 2: In the following example, we have changed the border to rounded corners using the shape field as follows:

ElevatedButton.styleFrom(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
),

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'All About Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ElevatedButtonStyleTutorial(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<ElevatedButtonStyleTutorial> createState() =>
      _ElevatedButtonStyleTutorialState();
}

class _ElevatedButtonStyleTutorialState
    extends State<ElevatedButtonStyleTutorial> {
  void showToast() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text(
          "Welcome to All About Flutter",
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ElevatedButton.styleFrom() Tutorial"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showToast();
          },
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
            textStyle: const TextStyle(
              fontSize: 32.0,
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
          child: const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text("Press Me"),
          ),
        ),
      ),
    );
  }
}

Output

Reference: api.flutter.dev/flutter/material/ElevatedBu..