Create Rounded Buttons in Flutter

Buttons are an essential part of any user interface, allowing users to interact with the app. In Flutter, you can easily create a rounded button using the ElevatedButton, OutlinedButton  or TextButton widgets along with the BorderRadius.circular property. In this tutorial, I will walk you through the steps to create a rounded button in Flutter.

1. Creating a Rounded Button

To create a rounded button in Flutter, we will use the ElevatedButton widget. This widget allows us to customize the button's style, including its shape and border.

To begin, let us create an instance of the ElevatedButton widget to achieve a rounded button. The ElevatedButton widget provides a button that appears raised on the screen and provides visual feedback when pressed. Here is an example of the code you can use to create a rounded button:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rounded Buttons demo',
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 150,
            height: 60,
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              child: const Text(
                'Rounded button',
                style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

To customize the button shape, we use the ElevatedButton.styleFrom method and specify the shape property. Here, we use the RoundedRectangleBorder class to define a rounded rectangle shape for the button. The BorderRadius.circular method allows us to specify the desired radius for the rounded corners. Feel free to adjust the radius value to suit your requirements.

The ElevatedButton is wrapped by the SizedBox widget to increase the size of the ElevatedButton.

The RoundedRectangleBorder is not the only class that can be used to define the shape of the button, here are some other classes:BeveledRectangleBorder, ContinuousRectangleBorder, StadiumBorder, and CircleBorder.

2. Creating a Custom Button Widget

Now that we have learned how to create a rounded button, let us proceed to create a reusable RoundedButton widget. This will simplify the process of using the rounded button throughout our application, promoting code reusability and maintainability.

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const RoundedButton({
    required this.text,
    required this.onPressed,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 150,
      height: 60,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
        ),
        child: Text(
          text,
          style: const TextStyle(fontSize: 16),
        ),
      ),
    );
  }
}

As you can see we extracted the ElevatedButton  from the previous code snippet into a separate widget called RoundedButton. In the RoundedButton widget, we pass the text that should be displayed on the button and an onPressed callback function to handle the button action. Other than that our button remains the same as before.

Now that we have our custom RoundedButton we can use it in our application.

import 'package:flutter/material.dart';
import 'package:flutter_rounded_buttons/rounded_button.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyAppView(),
    );
  }
}

class MyAppView extends StatelessWidget {
  const MyAppView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RoundedButton(
          text: 'Click me!',
          onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              duration: Duration(seconds: 1),
              backgroundColor: Colors.green,
              content: Text(
                'The button has been clicked!',
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The RoundedButton widget is created with the text "Click me!" and an onPressed callback function. When the button is clicked, the onPressed function is triggered. In this code, the onPressed function shows a SnackBar using the ScaffoldMessenger.of(context).showSnackBar() method.

You can replace the placeholder code inside the onPressed callback with your desired functionality.

3. Conclusion

Creating rounded buttons in Flutter is simple and straightforward. By using the ElevatedButton, OutlinedButton or TextButton widgets along with the BorderRadius.circular property, you can easily create buttons with rounded corners that look great and provide interactivity.

In this tutorial, we learned how to create a custom RoundedButton widget that handles the rounded button functionality. By setting the button's shape using the shape property of the ElevatedButton.styleFrom method, we achieved the desired rounded corners.

Feel free to experiment with different button styles, colors, and layouts to create visually pleasing and intuitive user interfaces. Remember, buttons are just one of many interactive elements you can create with Flutter, so keep exploring and building extraordinary applications!

Tags

• Flutter
• Dart