Create rounded corner using border radius in flutter ?

Rounded corner gives a decent look to any widget and rounded corner can be create using the border radius property of container. we can add border radius or shape to any container, image, button, text, input and etc. so in this article we will learn to create rounded corner using border radius in flutter.

Flutter use BoxDecoration class to render the border and borderRadius in container widget it accepts multiple options like border, border radius, color, background image, gradient, shape and etc. so to add the borderRadius first we need to add decoration option to container and then in decoration value we need to assign BoxDecoration class to implement the border.

borderRadius options

BorderRadius.all(Radius.elliptical(5, 25));
BorderRadius.all(Radius.circular(20)) ; // same as BorderRadius.circular(20);
BorderRadius.only(bottomLeft: Radius.circular(5),bottomRight:..,topRight: ..,bottomRight:.. , topLeft: ...); BorderRadius.vertical({
    Radius top = Radius.zero,
    Radius bottom = Radius.zero,
})
BorderRadius.horizontal({
    Radius left = Radius.zero,
    Radius right = Radius.zero,
})

You can simple create rounded corner using border radius in flutter as follow

Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.red),
              borderRadius: BorderRadius.circular(20.0)),
          child: const Text(
            'Hello, World!',
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
),

rounded corner in flutter using border radius

One side border radius to widget flutter

Sometimes we also want to add border radius to specific one side of widget or container so then we can use BorderRadius.only class named constructor to add the border radius to the one side or any side of container as follow

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
      border: Border.all(color: Colors.white),
      borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0))),
  child: const Text(
    'Hello, World!',
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
),

one side rounded corner in flutter using border radius

Let’s understand Create rounded corner using border radius in flutter with example

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder .

Step 2 : Create a simple widget

Now, Create a simple state less widget to add the border to widget as follow

File : lib/borderexample.dart


class BorderExample extends StatelessWidget {
  @override
  Widget   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Border Radius Example '),
      ),
      body: Center(
          child: Container(
              padding: const EdgeInsets.all(10),
              width: double.infinity,
              color: Colors.black,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Container(
                    padding: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.white),
                        borderRadius: const BorderRadius.horizontal()),
                    child: const Text(
                      'Hello, World!',
                      style: TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.red),
                        borderRadius: BorderRadius.circular(20.0)),
                    child: const Text(
                      'Hello, World!',
                      style: TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  ),
                ],
              ))),
    );
  }
}

Step 3: Import and use the widget in main

We just created a new widget with name BorderExample, now we are going to use it in our main.dart file as below

import 'package:flutter/material.dart'; 
import 'package:example_app/BorderExample.dart';;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: BorderExample(),
        ),
      ),
    );
  }
}

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.