Create an Elevated Button with rounded edges or a border radius
There are three major types of Buttons available in Flutter. They are the ElevatedButton, TextButton, and IconButton. In this tutorial, we will learn how to add a border-radius to a button using ElevatedButton as an example. The border-radius can be given using
- Shape property
- Clipping using ClipRRect
Using shape property
To change various features like color, shape, padding of an ElevatedButton, we use the style property. To change the shape, we use shape property inside the ElevatedButton.styleFrom class. Here we have given the value of the shape as RoundedRectangleBorder with a border radius of 10.0. You can also use BeveledRectangleBorder for a bevel shaped corner for the button.
Pill shaped button in Flutter
If you need a pill-shaped button, you can either use RoundedRectangularBorder or StadiumBorder for the shape property.
We can also give border-radius by clipping. For this, you need to wrap the ElevatedButton with a ClipRRect as shown in the example below. Clipping technique can also be used to create buttons with custom shapes. Complex shapes can be created using clippy_flutter or a polygon_clipper package
How to Make Glowing Play Button Animation in Flutter?
This widget can be used in a UI as play button for a music player, start button for games or even as loading indicator.
How to Create Instagram like Story Circle Animation in Flutter?
Simple step by step guide on how to create Instagram story circle animation with Flutter.
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter