How to Create Buttons with Rounded Corners in Flutter?

Flutter is a UI toolkit developed by Google. It is being utilized by big tech companies like Alibaba, Airbnb, and Google itself to build apps that serve billions of users around the globe. In this article, we will be seeing how to make Rounded Buttons in Flutter.

Approach:

We will create the buttons and use their style property to give them a border radius using the RoundedRectangleBorder widget.

Syntax:

TextButton(
    onPressed: () {},
    style: TextButton.styleFrom(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(value),
        ),
    ),
)

Example 1:

This example Illustrates how to make the border of the ElevatedButton and the OutlinedButton rounded.

Dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Rounded Buttons in Flutter"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // Add your on pressed event here
              },
              style: ElevatedButton.styleFrom(
                primary: Colors.green,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50),
                ),
              ),
              child: const Text('Rounded Elevated Button'),
            ),
            OutlinedButton(
              onPressed: () {
                // Add your on pressed event here
              },
              style: OutlinedButton.styleFrom(
                primary: Colors.green,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50),
                ),
              ),
              child: const Text('Rounded Outlined Button'),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Example 2:

In the below example, we used the text button and made it rounded. The roundness of the button can be seen when we click on the button.

Dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Rounded Buttons in Flutter"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                // Add your on pressed event here
              },
              style: TextButton.styleFrom(
                primary: Colors.green,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50),
                ),
              ),
              child: const Text('Rounded Text Button'),
            ),
          ],
        ),
      ),
    );
  }
}

Output: