flutter – ElevatedButton border radius only

Flutter – ElevatedButton border radius only for specified corners

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 add only specified corners rounded-border to the ElevatedButton. That means we will apply the border radius for only the specified corners, not all the corners. Here we will use the ElevatedButton class’s styleFrom() method to add specified corners rounded border around the ElevatedButton widget.

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 sending a value to the styleFrom() method’s shape parameter.

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

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 is a BorderRadius object instance that specifies the radii for each corner. By using this parameter value we make the ElevatedButton border’s specified corners rounded.

The BorderRadius class is an immutable set of radii for each corner of a rectangle. The BorderRadius.only({Radius topLeft = Radius.zero, Radius topRight = Radius.zero, Radius bottomLeft = Radius.zero, Radius bottomRight = Radius.zero}) constructor creates a border radius with only the given non-zero values. The other corners will be right angles. So using this BorderRadius constructor we can add a rounded corner border to the ElevatedButton where its specified corners are only 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. The style property is the style of this side of the border.

In this flutter example code, we only rounded the ElevatedButton’s top right and bottom left corners. Other corners remain unchanged and rectangle-shaped. Here we draw a solid-styled border around the ElevatedButton.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.cyan),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("ElevatedButton Border Radius Only")
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: (){},
              child: const Text("Click Me"),
              style: ElevatedButton.styleFrom(
                  shape:RoundedRectangleBorder(
                      borderRadius: const BorderRadius.only(
                          topRight: Radius.circular(24),
                          bottomLeft: Radius.circular(24)
                      ),
                      side: BorderSide(
                          color: Colors.cyan.shade600,
                          width: 2,
                          style: BorderStyle.solid
                      )
                  ),
                  fixedSize: const Size(200,75)
              ),
            ),
          )
      ),
    ),
  );
}

More flutter tutorials

• flutter – How to change status bar color
• flutter – How to hide status bar
• flutter – Transparent status bar
• flutter – How to draw a line through the Text
• flutter – How to set Text line height
• 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 – How to create rounded corners ElevatedButton