Flutter - BorderDirectional Widget
Last Updated :
22 Feb, 2022
BorderDirectional is a built-in widget in flutter SDK. This widget is somewhat similar to the Border widget with the main difference being the inclusion of start and end property which lets the user modify the border according to the text direction right-to-left (rtl) or left-to-right (ltr). If our start and end border sides are the same then Border widget should be used as it will provide better performance optimization.
Constructor of BorderDirectional Class:
const BorderDirectional(
{BorderSide top: BorderSide.none,
BorderSide start: BorderSide.none,
BorderSide end: BorderSide.none,
BorderSide bottom: BorderSide.none}
)Properties of BorderDirectional Widget:
- bottom: This property takes in BorderSide ( final )as the object. It controls the bottom side of the border.
- dimensions: The dimension property takes in EdgeInsetsGeometry as the object to control the widths of the side of the border.
- end: This property takes in BorderSide as the object. It controls the end side ( right or left depending on the text direction) of the border.
- hashCode: This property takes an int value (override) as the object. This is responsible for the state representation of an object.
- isUniform: This property takes in a boolean value (read-only, override ) as the object to decide whether all sides of the border will be uniform or not.
- start: This property takes in BorderSide as the object. It controls the start side ( right or left depending on the text direction) of the border.
- top: This property takes in BorderSide (final) as the object. It controls the top side of the border.
Example 1: In this app, we will see how to use the start and end properties when the text direction is set from left to right.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
builder: (context, child) {
return Directionality(
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: 250,
child: Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), //NetworkImage
), //DecorationImage
border: BorderDirectional(
start: BorderSide(
color: Colors.green,
width: 4,
style: BorderStyle.solid), //BorderSide
end: BorderSide(
color: Colors.blue,
width: 4,
style: BorderStyle.solid), //BorderSide
), //Border
), //BoxDecoration
), //Container
), //SizedBox
), //Padding
), //Center
), //Scaffold
debugShowCheckedModeBanner: false,
), //MaterialApp
);
}
Output:
Text direction is set from left to right
Explanation: In this simple flutter app the inside the builder property of the MaterialApp the text direction is set to TextDirection.ltr, which will make the direction of text from left to right ( by default it is set to ltr only). And inside the BorderDirectional widget the start and end property are using BorderSide widget as the object. And in the BorderSide widget of both the properties the color of the border is set to green and blue respectively the width is 4 pixels and the style is set to solid. Now, the thing to notice here is the green color border which is actually assigned to the start property is placed on the left part of the screen. And the blue color border side is on the right side of the image. This is due to the reason that the text direction is from left-to-right, which means the text starts printing from left to right and so the borders.
Example 2: In this app, we will see how to use the start and end properties when the text direction is set to right to left.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
builder: (context, child) {
return Directionality(
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: 250,
child: Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), //NetworkImage
), //DecorationImage
border: BorderDirectional(
start: BorderSide(
color: Colors.green,
width: 4,
style: BorderStyle.solid), //BorderSide
end: BorderSide(
color: Colors.blue,
width: 4,
style: BorderStyle.solid), //BorderSide
), //Border
), //BoxDecoration
), //Container
), //SizedBox
), //Padding
), //Center
), //Scaffold
debugShowCheckedModeBanner: false,
), //MaterialApp
);
}
Output:Â
start and end propertiesÂ
Explanation: This app is also similar to the previous one except for the fact that the text direction is set to rtl ( right-to-left ). And looking at the code we can see that the BorderDirectional widget is also the same as the previous example. But in the output, we can see that this time the green color border is printed on the right-hand side and the blue border on the left side. Again the reason being text direction which is starting from left and going to the right.
Example 3: In this example, we will see how to add a border in all directions around the image using the BorderDirectional widget.
// Code Snippet Border
...
border: BorderDirectional(
start: BorderSide(
color: Colors.green,
width: 4,
style: BorderStyle.solid), //BorderSide
end: BorderSide(
color: Colors.blue,
width: 8,
style: BorderStyle.solid), //BorderSide
top: BorderSide(
color: Colors.green,
width: 4,
style: BorderStyle.solid), //BorderSide
bottom: BorderSide(
color: Colors.blue,
width: 8,
style: BorderStyle.solid), //BorderSide
), //Border
...
Output:
border in all directions
Explanations: In this app, text direction is not mentioned, and by default, it is set to ltr (left-to-right). Taking a look at the code snippet we can see that the start and top properties are the same and the end and bottom properties are the same. In the top and start properties, the color is set to green, the width is 4 pixels and the border style is set to solid. At the end and bottom border side, the color is set to blue, width to 8 pixels and the style is again set to solid.
Similar Reads
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
4 min read
Flutter - BorderSide Widget
BorderSide widget in flutter is a built-in widget whose function is to control the look and feel of individual sides of the border around a widget. Border widget in flutter also takes BorderSide as the object, which is the representative of individual sides. Constructor of BorderSide Class:const Bor
3 min read
Flutter - BoxDecoration Widget
BoxDecoration is a build-in widget in flutter API. At a bare basic level, it describes how a box should be painted on the screen. The shape of the box needs not to be just a rectangle or a square it can circle also. It comes with a ton of properties we can add an image inside, add a radius to the bo
3 min read
Flutter - Border Widget
Border widget in flutter is assigned a simple functionality to add borders to the other widgets. The first is by creating all borders using BorderSide. The second way is by using Border.all to create a uniform border having the same color and width. The third is by using Border.fromBorderSide to cre
4 min read
Flutter - BorderRadius Widget
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
5 min read
Flutter - AnimatedIcon Widget
Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is show
3 min read
ClipOval widget in Flutter
ClipOval widget clips the child widget in oval or circle shape. We can reshape the child widget by changing width and height. If width and height are equal the shape will be circular. If the width and height are given differently then the shape will be oval. Let's understand this with the help of an
2 min read
ClipRect Widget in Flutter
The ClipRect widget is used to clips its child using a rectangle. It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of ClipRRect and is used to Clip a Rectangle portion of the child widget but without the
2 min read
Flutter - DropDownButton Widget
In this article, we will learn how to use a DropDownButton and learn various properties of it in flutter. We will use the Flutter DropDownButton widget to display a dropdown list in our application. So first let’s see what is DropDownButton.DropDownButton Widget FlutterIn Flutter, A DropDownButton i
3 min read
Flutter - BoxConstraints Widget
BoxConstraints is a built-in widget in flutter SDK. Its functionality is to add sized constraints on its child widget. It is usually taken as the object of constraints property in ConstrainedBox widget. It comes packed with many properties for customization. Below we will see all its properties with
5 min read