Flutter – BorderRadiusDirectional Widget

BorderRadiusDirectional is a pre-built widget in flutter. Its functionality is similar to the BorderRadius widget, which is to add a curve around the corners of the border. But there is a difference, in BorderRadiusDirectional widget we can specify corner radius depending upon the text direction. It comes in handy when the text direction of our flutter app depends on some sort of user input from the user like choosing the language for the app. In a manner, it goes well with BorderDirectional widget.

There are in total of five ways of implementing the BorderRadiusDirectional widget:

1. Constructor BorderRadiusDirectional.all:

const BorderRadiusDirectional.all(
Radius radius
)

  2. Constructor of BorderRadiusDirectional.circular:

BorderRadiusDirectional.circular(
double radius
)

 3. Constructor of BorderRadius.horizontal:

const BorderRadiusDirectional.horizontal(
{Radius start: Radius.zero,
Radius end: Radius.zero}
)

4. Constructor of BorderRadiusDirectional.only:

const BorderRadiusDirectional.only(
{Radius topStart: Radius.zero,
Radius topEnd: Radius.zero,
Radius bottomStart: Radius.zero,
Radius bottomEnd: Radius.zero}
)

5. Constructor of BorderRadiusDirectional.vertical:

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

Properties of BorderRadiusDirectional

• bottomEnd: Radius class is the object that takes by this property to specify the corner radius of the bottom-left or bottom-right corner depending on the text direction.
• botttomStart:  Radius class is the object takes by this property to specify the corner radius of the bottom-left or bottom-right corner depending on the text direction.
• topEnd:  Radius class is the object takes by this property to specify the corner radius of the top-left or top-right corner depending on the text direction. For ltr it would be  top-right and for rtl it would be top-right.
• topstart:  Radius class is the object takes by this property to specify the corner radius of the top-left or top-right corner depending on the text direction.

Example: In this example the BorderRadiusDirectional.only is used to add curves to the corners of the border.

This would be our starting app. Here we will see how to use BorderRadiusDirectional, to add a radius to the borders around the image.

With text direction being left-to-right.

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    //Our app widget tree starts here
    MaterialApp(
      builder: (context, child) {
        return Directionality(
          //Here we can change the directionality of our app
          textDirection: TextDirection.ltr,
          child: child,
        ); //Directionality
      },
      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: 200,
              width: 250,
              child: Container(
                decoration: BoxDecoration(
                    image: const DecorationImage(
                      image: NetworkImage(
                          'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
                      scale: 3.0,
                    ),
                    border: Border.all(
                        color: Colors.green,
                        width: 4.0,
                        style: BorderStyle.solid), //Border.all

                    /* The BorderRadiusDirectional widget  is here */

                    borderRadius: BorderRadiusDirectional.only(
                      topStart: Radius.circular(5.0),
                      topEnd: Radius.circular(10.0),
                      bottomStart: Radius.circular(15.0),
                      bottomEnd: Radius.circular(20.0),
                    ) //BorderRadiusDirectional.only
                    ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
      //Debug banner is turned off
    ), //MaterialApp
  );
}

Output:

Explanation: The text direction or Directionality in this app is specified to ltr, that is from left to right (it is same by default). In the BoxDecoration widget we have used the borderRadius parameter which is holding the BorderRadiusDirectional.only as the object. 

Inside the BorderRadiusDirectional.only class we topStart property which is holding Radius.circular(5.0) as the object, which simply means that it is giving a border-radius of 5 pixels to the corner, and in this case its top-left corner (as text direction is ltr). Then we have the topEnd property which is giving a border radius of 10 pixels to the top-right corner. The bottomStart property is specifying a radius of 15 pixels to the bottom-left corner and the bottomEnd property is specifying a radius of 20 pixels to the bottom-right corner of the border. 

With text direction being right-to-left.

        // Code snippet of Directionality
        ...
          return Directionality(
                 //Here we can change the directionality of our app
                 textDirection: TextDirection.ltr,
                  child: child,
              ); //Directionality
             },
        ...
        // Code snippet of the BorderRadiusDirectionality.only
        ...
                    borderRadius: BorderRadiusDirectional.only(
                      topStart: Radius.circular(5.0),
                      topEnd: Radius.circular(10.0),
                      bottomStart: Radius.circular(15.0),
                      bottomEnd: Radius.circular(20.0),
                    ) //BorderRadiusDirectional.only
        ...

Output:

Explanation: The only difference in this app is the Directionality or the text-direction which is set to rtl (right-to-left). And if we compare the output to the above application we can see that the 5 pixels radius is specified to the top-right corner which means it is the topStart corner now. The topEnd corner is the top-left having 10 px radius, the bottomStart corner is bottom-right having 15 px radius and the bottomEnd corner is bottom-left having 20 px radius.

So, this was an example of how the BorderRadiusDirectional widget can we used.