Flutter - BorderRadius Widget - GeeksforGeeks

21 Feb, 2022
BorderRadius is a built-in widget in flutter. Its main functionality is to add a curve around the border-corner of a widget. There are in total of five ways in which we can use this widget, the first is by using BorderRadius.all, the radius for all the corners are the same here. The second way is by using BorderRadius.Circle, here we need to specify radius only once which would be a double value.  The third way is by using BorderRadius.horizontal, here we can specify different border-radius for the left and the right side. The fourth way is by using BorderRadius.only, it can take a different radius for all four border corners. And the last way is by using BorderRadius.vertical, which can give a different radius to the upper and the lower portion of the border. Implementation of all these ways is shown below with the help of examples.
const BorderRadius.all(
Radius radius
)
BorderRadius.circular(
double radius
)
const BorderRadius.horizontal(
{Radius left: Radius.zero,
Radius right: Radius.zero}
)
const BorderRadius.only(
{Radius topLeft: Radius.zero,
Radius topRight: Radius.zero,
Radius bottomLeft: Radius.zero,
Radius bottomRight: Radius.zero}
)
const BorderRadius.vertical(
{Radius top: Radius.zero,
Radius bottom: Radius.zero}
)
bottomLeft: The bottomLeft property takes in Radius class as the object. It controls the radius of the bottom-left corner of the border.
    // Implementation
      final Radius bottomLeft
bottomRight: This property also holds Radius as the object to decide the radius of the bottom-right corner of the border.
topLeft: This property also holds Radius class as the object to decide the radius of the top-left corner of the border.
topRight: This property also holds Radius class as the object to decide the radius of the top-right corner of the border.
Now, we are going to see how we can add border-radius to the border using all the methods. The border in the app below is created by using Border.all widget, around a NetworkImage which is placed inside BoxDecoration widget.
BorderRadius Widget
This is how our border looks now. Let’s see how to add a curve to the corners.
Example 1: BorderRadius.all
Dart
import 'package:flutter/material.dart'; void main() {  runApp(    //Our app widget tree starts here    MaterialApp(      home: Scaffold(        appBar: AppBar(          title: Text('GeeksforGeeks'),          backgroundColor: Colors.greenAccent[400],          leading: IconButton(            icon: Icon(Icons.menu),            tooltip: 'Menu',            onPressed: () {},          ), //IconButton          actions: <Widget>[            IconButton(              icon: Icon(Icons.comment),              tooltip: 'Comment',              onPressed: () {},            ), //IconButton          ], //<Widget>[]        ), //AppBar        body: Center(          child: Padding(            padding: const EdgeInsets.all(12.0),            child: SizedBox(              height: 250,              child: Container(                decoration: BoxDecoration(                  image: const DecorationImage(                    image: NetworkImage(                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),                  ),                  border: Border.all(                      color: const Color(0xFF000000),                      width: 4.0,                      style: BorderStyle.solid), //Border.all                  /*** The BorderRadius widget  is here ***/                  borderRadius: BorderRadius.all(                    Radius.circular(10),                  ), //BorderRadius.all                ), //BoxDecoration              ),            ),          ),        ), //Center      ), //Scaffold      debugShowCheckedModeBanner: false, //Debug banner is turned off    ), //MaterialApp  );}
Output:
BorderRadius.all
Explanation: The curve around the corners of the borders in the above app has been added using BorderRadius.all.  The BorderRadius.all is taking Radius.circular as the object and 10 is the parameter assigned to that. And we can see a curve of radius 10 pixels has been added to all the corners.
Example 2: BorderRadius.circle
        // Code snippet of the BorderRadius.Circular
        ...
         borderRadius: BorderRadius.circular(50.0),
         ...
Output:
BorderRadius.circular
Explanation: The above code snippet is of BorderRadius.circular. It only takes in a double value as the object to give an equal curve to all the corners in the border. In the above app the radius is set to 50 pixels.
Example 3: BorderRadous.horizontal:
        // Code sippet of BorderRadius.horizontal
        ...
                  borderRadius: BorderRadius.horizontal(
                    left: Radius.circular(15),
                    right: Radius.circular(30),
                  ), //BorderRadius.horizontal
                 ...
Output:
 BorderRadius.horizontal
Explanation: Here BorderRadius.horizontal has been used to add a border around the corners. Inside the  BorderRadius.horizontal widget the left property is holding Radius.circular(15), which gives the left side of the border (i.e. the top-left and bottom,-left) a radius of 15 pixels and the right property is holding Radius.circular(30), which in turn gives the right portion of the border a radius of 30 pixels.
Example 4: BorderRadus.only
        // Code sippet of BorderRadius.only
        ...
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(5),
                    topRight: Radius.circular(10),
                    bottomLeft: Radius.circular(15),
                    bottomRight: Radius.circular(20),
                  ),//BorderRadius.Only
        ...
Output: 
BorderRadius.only
Explanation: In the above app the BorderRadius.only is used to add different curves around different corners of the borders. BorderRadius.only takes in four properties that are topLeft, topRight, bottomLeft and bottomRight to add a specific amount of radius to the corners in the border. In the top-left corner the radius is 5px,in the top-right corner the radius is10 px, in the bottom-left corner the border-radius is 15 px and in the bottom-right corner the radius is 20 px.
Example 5: BorderRadius.vertical 
        // Code sippet of BorderRadius.vertical
        ...
                  borderRadius: BorderRadius.vertical(
                    top: Radius.circular(10),
                    bottom: Radius.circular(30),
                  ),//BorderRadius.vertical
        ...
Output:
 BorderRadius.vertical 
Explanation: BorderRadius.vertical is the widget used here to add border-radius to the corners. It takes in top and the bottom radius to specify border-radius to the upper and the lower portion of the border. Here the border-radius added to the upper portion is 10 px and the border-radius added to the lower portion is 30 px.
To see the full code of all the examples used in this article click here. 
simranarora5sos
android
Flutter
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Services in Android with Example
Content Providers in Android with Example
Android RecyclerView in Kotlin
Flutter - DropDownButton Widget
Flutter - Asset Image
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Checkbox Widget