Flutter Rounded ElevatedButton - Dart

The ElevatedButton widget in Flutter is a Material Design style button with a raised appearance. By default, it has sharp corners, but you can make it more visually appealing by rounding its corners. In this tutorial, we’ll show you how to create a rounded ElevatedButton in Flutter using Dart.

Prerequisites

Before proceeding with this tutorial, you should have a basic understanding of Flutter and Dart programming languages.

Steps for creating a rounded ElevatedButton

1. First, you need to create a new Flutter project in your preferred IDE.

2. Open the Dart file where you want to create a rounded ElevatedButton.

3. Import the ElevatedButton widget from the material package:

import 'package:flutter/material.dart';

4. Use the ElevatedButton widget and set its parameters as follows:

ElevatedButton(
  onPressed: () {},
  child: Text('Click Me'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

In the code snippet above, we created an ElevatedButton with a child Text widget the text ‘Click Me’. We also set the onPressed property to an empty function, which means the button is not doing anything when clicked. The most important part of this code is the ElevatedButton.styleFrom property, where we set the shape of the button to a RoundedRectangleBorder. We make the corners rounded by specifying the borderRadius as 20.

5. Save the Dart file and run the app in your emulator or on your device.

Conclusion

Creating a rounded ElevatedButton in Flutter is quite simple. By applying the shape property of the ElevatedButton.styleFrom method, you can make the button more visually appealing. We hope that this tutorial was helpful in your Flutter development journey.