top of page

ElevatedButton.styleFrom() in Flutter - Tutorial

Updated: Nov 27, 2022

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: https://api.flutter.dev/flutter/material/ElevatedButton/styleFrom.html





Related Posts

See All

The image sharing apps, shopping apps, etc. have image zoom functionality required to see the image in detail. Today, we will learn to implement the same with the help of a widget, InteractiveViewer.

bottom of page