How to Set the Width of an ElevatedButton in Flutter?

Samara Davis
By Samara Davis
editor

December 30, 2021


  • Categories
  • Most mobile and online applications have buttons that users may push to engage with them. Elevated buttons may be created in Flutter by using the ElevatedButton widget.

    ElevatedButton is the successor to the deprecated RaisedButton. This article will walk you through the process of creating raised buttons and customizing them.

    What is an ElevatedButton in Flutter?

    ElevatedButton is a named child displayed on a Material widget. When the button is clicked, the Material.elevation rises. The Text and Icon widgets of the label are shown using the ButtonStyle of the style. 

    The ButtonStyle determines the foregroundColor and the button’s filled background.backgroundColor. You may also hire flutter developer to make customizations to it.

    Constructor

    The constructor of the raised button illustrates its functionality as follows:

    ElevatedButton:

    ElevatedButton({

      Key? key, 

      required VoidCallback? onPressed, 

      VoidCallback? onLongPress, 

      ButtonStyle? style, 

      FocusNode? focusNode, 

      bool autofocus = false, 

      Clip clipBehavior = Clip.none, 

      required Widget? child

    })

    ElevatedButton with icon:

    ElevatedButton.icon({

      Key key, 

      @required VoidCallback onPressed, 

      VoidCallback onLongPress, 

      ButtonStyle style, 

      FocusNode focusNode, 

      bool autofocus, 

      Clip clipBehavior, 

      @required Widget icon, 

      @required Widget label

    })

    Basic example:

    class MyHomePage extends StatelessWidget {

      const MyHomePage({Key? key}) : super(key: key);

      @override

      Widget build(BuildContext context) {

        return Scaffold(

            appBar: AppBar(

              title: const Text(‘Kindacode.com’),

            ),

            body: Padding(

              padding: const EdgeInsets.all(25),

              child: Column(children: [

                ElevatedButton(onPressed: () {}, child: const Text(‘I gotta pee’)),

                ElevatedButton.icon(

                  onPressed: () {},

                  label: const Text(‘Plus One’),

                  icon: const Icon(Icons.plus_one),

                )

              ]),

            ));

      }

    }

    Enable/Disable

    Change the onPressed argument to null to deactivate an ElevatedButton. Set the onPressed argument to a void function to enable an ElevatedButton.

    Example:

    class MyHomePage extends StatelessWidget {

      const MyHomePage({Key? key}) : super(key: key);

      @override

      Widget build(BuildContext context) {

        return Scaffold(

          appBar: AppBar(

            title: const Text(‘Kindacode.com’),

          ),

          body: Padding(

            padding: const EdgeInsets.all(25),

            child: Column(

              children: [

                // An enabled button

                ElevatedButton(

                  child: const Text(‘Enabled Button’),

                  onPressed: () {},

                ),

                // A disabled button

                const ElevatedButton(

                    onPressed: null, child: Text(‘Disabled Button’))

              ],

            ),

          ),

        );

      }

    }

    Style (Color, Border, Elevation…)

    ElevatedButton may be styled using either the styleFrom static function or the ButtonStyle class. The first option is more practical than the second.

    Style an ElevatedButton by using styleFrom:

    ElevatedButton(

          child: Text(‘Button’),

          onPressed: () {},

          style

    From({

              Color? primary, // Use this to set the background color

              Color? on

              Primary, 

              Color? on

              Surface, 

              Color? shadow

              Color, 

              double? elevation, 

              TextStyle? textStyle, 

              EdgeInsets 

              Geometry? padding, 

              Size? minimumSize, 

              Size? fixed 

              Size, // Use this for sizing the button

              BorderSide? side, 

              Outlined Border? shape, // Button shape

              MouseCursor? enabled

              MouseCursor, 

              Mouse

              Cursor? disabled

              MouseCursor, 

              VisualDensity? visualDensity, 

              Material 

              TapTargetSize? tap 

              TargetSize, 

              Duration? animation 

              Duration, 

              bool? enable 

              Feedback, 

              Alignment 

              Geometry? alignment, 

              InteractiveInkFeatureFactory? splashFactory

          })

    );

    Example:

    ElevatedButton(

              child: const Text(‘Button’),

              onPressed: () {},

              style: ElevatedButton.style

    From(

                  primary: Colors.purple,

                  padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),

                  textStyle:

                      const TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),

            ),

    How to style an ElevatedButton using ButtonStyle:

    ButtonStyle({

      MaterialStateProperty<TextStyle?>? textStyle, 

      MaterialStateProperty<Color?>? backgroundColor, 

      MaterialStateProperty<Color?>? foregroundColor, 

      MaterialStateProperty<Color?>? overlayColor, 

      MaterialStateProperty<Color?>? shadowColor, 

      MaterialStateProperty<double?>? elevation, 

      MaterialStateProperty<EdgeInsetsGeometry?>? padding, 

      MaterialStateProperty<Size?>? minimumSize, 

      MaterialStateProperty<Size?>? fixedSize, 

      MaterialStateProperty<BorderSide?>? side, 

      MaterialStateProperty<OutlinedBorder?>? shape, 

      MaterialStateProperty<MouseCursor?>? mouseCursor, 

      VisualDensity? visualDensity, 

      MaterialTapTargetSize? tapTargetSize, 

      Duration? animationDuration, 

      bool? enableFeedback, 

      AlignmentGeometry? alignment, 

      InteractiveInkFeatureFactory? splashFactory

    })

    Example:

    ElevatedButton(

              child: const Text(‘Button’),

              onPressed: () {},

              style: ButtonStyle(

                  backgroundColor: MaterialStateProperty.all(Colors.red),

                  padding: MaterialStateProperty.all(const EdgeInsets.all(50)),

                  textStyle:

                      MaterialStateProperty.all(const TextStyle(fontSize: 30))),

            ),

    How to Set Width and Height of ElevatedButton in Flutter?

    An elevated button can be sized in a variety of ways.

    1. You may precisely specify the width and height of a raised button by using the fixedSize argument of the styleFrom static method as follows:

    style: ElevatedButton.style

    From(fixedSize: Size([width], [height])),

    This code generates a button that is raised and has a width of 240 and a height of 80:

    ElevatedButton(

              onPressed: () {},

              child: const Text(‘240 x 80’),

              style: ElevatedButton.style

    From(

                  fixedSize: const Size(240, 80), primary: Colors.deepOrange),

            ),

    2. Alternatively, you may specify the width and height of an elevated button by enclosing it in a ConstrainedBox widget.

    The following sample code demonstrates how to create an elevated button with a 300 x 200 pixel size:

    Widget build(BuildContext context) {

        return Scaffold(

          appBar: AppBar(

            title: const Text(‘KindaCode.com’),

          ),

          body: Center(

            child: ConstrainedBox(

              constraints: const BoxConstraints.

    tightFor(width: 300, height: 200),

              child: ElevatedButton(

                child: const Text(‘300 x 200’),

                onPressed: () {},

              ),

            ),

          ),

        );

      }

    Button Shape

    The shape argument of the styleFrom function allows you to customize the form of an elevated button.

    Example:

    ElevatedButton(

              onPressed: () {},

              child: const Text(‘Kindacode.com’),

              style: ElevatedButton.style

    From(

                  primary: Colors.pink,

                  fixed

    Size: const Size(300, 100),

                  shape: RoundedRectangleBorder(

                      borderRadius: BorderRadius.circular(50))),

            ),

    ElevatedButton Theme

    ElevatedButtonTheme classes allow you to customize the appearance and behavior of descendent elevated buttons. This enables you to customize the appearance and behavior of many raised buttons simultaneously.

    Example:

    // main.dart

    import ‘package:flutter/material.dart’;

    void main() {

      runApp(const MyApp());

    }

    class MyApp extends StatelessWidget {

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

      @override

      Widget build(BuildContext context) {

        return MaterialApp(

            // Remove the debug banner

            debug ShowCheckedMode Banner: false,

            title: ‘Kindacode.com’,

            theme: ThemeData(

                primarySwatch: Colors.green,

                elevated Button Theme: ElevatedButton ThemeData(

                    style: ElevatedButton.style From(

                        primary: Colors.red,

                        padding: const EdgeInsets.symmetric(

                            vertical: 10, horizontal: 30),

                        textStyle: const TextStyle(

                          fontStyle: FontStyle.italic,

                          fontSize: 24,

                        ))));

            home: const HomePage());

      }

    }

    class HomePage extends StatelessWidget {

      const HomePage({Key? key}) : super(key: key);

      @override

      Widget build(BuildContext context) {

        return Scaffold(

          appBar: AppBar(

            title: const Text(‘Kindacode.com’),

          ),

          body: Padding(

            padding: const EdgeInsets.all(20),

            child: Column(

              crossAxisAlignment: CrossAxisAlignment.start,

              children: [

                ElevatedButton(onPressed: () {}, child: const Text(‘Button 1’)),

                const SizedBox(

                  height: 30,

                ),

                ElevatedButton.icon(

                    onPressed: () {},

                    icon: const Icon(Icons.play_arrow),

                    label: const Text(‘Play Video’))

              ],

            ),

          ),

        );

      }

    }

    Another Example:

    ElevatedButton(

                style: ElevatedButton.styleFrom(

                  // background color

                  primary: Colors.orange,

                  padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),

                  textStyle: const TextStyle(fontSize: 20),

                ),

                child: const Text(‘I am a button’),

                onPressed: () {

                  debugPrint(‘Button clicked!’);

                },

              ),

    Final words

    This article covered the fundamentals of working with Flutter’s ElevatedButton class. Additionally, we discussed multiple instances of how to implement, style, set the background color, set the width and height of an ElevatedButton, and so on. If you wish to add a professional touch to your project, you may consult Flutter Agency a team of healthcare app developers offering top-notch medical apps for pharmacies and hospitals.

    Related Post


    error: Content is protected !!