Skip to content
Related Articles

Related Articles

Flutter – BorderRadius Widget
  • Difficulty Level : Expert
  • Last Updated : 19 Nov, 2020

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.

Constructor Of BordeRadius.all:

const BorderRadius.all(
Radius radius
)

Constructor of BorderRadius.Circle:

BorderRadius.circular(
double radius
)

Constructor of BorderRadius.horizontal:

const BorderRadius.horizontal(
{Radius left: Radius.zero,
Radius right: Radius.zero}
)

Constructor of BorderRadius.only:

const BorderRadius.only(
{Radius topLeft: Radius.zero,
Radius topRight: Radius.zero,
Radius bottomLeft: Radius.zero,
Radius bottomRight: Radius.zero}
)

Constructor of BorderRadius.vertical:

const BorderRadius.vertical(
{Radius top: Radius.zero,
Radius bottom: Radius.zero}
)

Properties of BorderRadius:

  • 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

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



filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(
    //Our app widget tree starts herwe
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IcoButton
          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
  );
}

chevron_right


Output:

BorderRadius.all

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

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

 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

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

 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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :