flutter – How to create rounded corners ElevatedButton

Flutter – Rounded Corners ElevatedButton

The ElevatedButton class represents a material design elevated button. The flutter developers can use elevated buttons to add dimension to otherwise mostly flat layouts such as in long busy lists of content, or in wide spaces. The flutter developers should avoid using elevated buttons on already-elevated content such as dialogs or cards. The flutter developers can override the ElevatedButton style with its style parameter. The static styleFrom() method is a convenient way to create an ElevatedButton ButtonStyle from simple values.

The following flutter application development tutorial will demonstrate how we can create rounded corners ElevatedButton and how we can add a border to it. We will create rounded corners ElevatedButton with a border. Here we will also change the specified ElevatedButton widget’s size.

In the below example code, we will use the ElevatedButton class’s styleFrom() method to make the ElevatedButton corners rounded. Really, we will assign a rounded rectangle border shape to the ElevatedButton widget to make its corners rounded and add a border around it that also rounded shape.

The ElevatedButton class’s styleFrom() method is a static convenience method that constructs an elevated button ButtonStyle given simple values. By default, ElevatedButton class styleFrom() method returns a ButtonStyle that doesn’t override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can add a rounded border to the ElevatedButton by passing a value to the styleFrom() method’s shape parameter. It also changes the ElevatedButton shape.

The styleFrom() method’s shape parameter value is an OutlinedBorder instance which adds a border to the ElevatedButton widget.

The OutlinedBorder class represents a ShapeBorder that draws an outline with the width and color specified by the side. Here we will pass a RoundedRectangleBorder instance for the shape parameter value.

The RoundedRectangleBorder class represents a rectangular border with rounded corners. The RoundedRectangleBorder class borderRadius property value specifies the radii for each corner. Using this parameter value we make the ElevatedButton corners rounded.

The RoundedRectangleBorder class side property value is a BorderSide instance. The BorderSide class represents a side of a border of a box. The BorderSide class color property value is a Color that is the color of this side of the border. The BorderSide class width property value is a double instance that is the width of this side of the border, in logical pixels.

So finally, the flutter app developers can display a rounded corners ElevatedButton widget by passing a RoundedRectangleBorder instance to the ElevatedButton class’s styleFrom() method’s shape parameter.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - ElevatedButton Rounded")
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: (){},
              child: const Text("Click Me"),
              style: ElevatedButton.styleFrom(
                  shape:RoundedRectangleBorder(
                      borderRadius: const BorderRadius.all(
                        Radius.circular(16),
                      ),
                      side: BorderSide(
                          color: Colors.green.shade900,
                          width: 2,
                          style: BorderStyle.solid
                      )
                  ),
                  fixedSize: const Size(200, 75)
              ),
            ),
          )
      ),
    ),
  );
}

More flutter tutorials

• flutter – How to overline Text
• flutter – How to draw Text outline
• flutter – Gradient Text
• flutter – How to set Text background color
• flutter – How to set Text word spacing
• flutter – Text overflow ellipsis
• flutter – Text uppercase
• flutter – How to change ElevatedButton color
• flutter – How to change ElevatedButton width
• flutter – How to change ElevatedButton disabled color
• flutter – How to disable ElevatedButton
• flutter – How to change ElevatedButton border radius
• flutter – How to create circular ElevatedButton
• flutter – How to change ElevatedButton shape
• flutter – ElevatedButton border radius only