Flutter – Border Widget

13 Jun, 2022
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 create a border whose sides are all same. The fourth way is by using Border.symmetry to make borders look symmetrical vertically and horizontally.
const Border(
{BorderSide top: BorderSide.none,
BorderSide right: BorderSide.none,
BorderSide bottom: BorderSide.none,
BorderSide left: BorderSide.none}
)
Border.all(
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)
const Border.fromBorderSide(
BorderSide side
)
const Border.symmetric(
{BorderSide vertical: BorderSide.none,
BorderSide horizontal: BorderSide.none}
)
bottom: This property takes in BorderSide 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.
hashCode: The hashCode property tables in an int value as the object. It represents the state of the object that influences operator == comparison.
inUniform: This property takes in a boolean value as the object to decode whether all sides of the border will be uniform or not.
left: This property takes in BorderSide as the object. It controls the left side of the border.
right: This property takes in BorderSide as the object. It controls the right side of the border.
top: This property takes in BorderSide as the object. It controls the top side of the border.
Example :
The main.dart file:
Dart
import 'package:flutter/material.dart'; void main() {  runApp(    MaterialApp(             // Our app starts here      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(                                     //inside the bos decoration we have image                  image: const DecorationImage(                    image: NetworkImage(                                             // The border will be created around this image                      //NetworkImage                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),                  ), //DecorationImage                  border: Border(                    top: BorderSide(                        width: 4,                        color: Colors.black,                        style: BorderStyle.solid), //BorderSide                    bottom: BorderSide(                        width: 4,                        color: Colors.black,                        style: BorderStyle.solid), //BorderSide                    left: BorderSide(                        width: 4,                        color: Colors.black,                        style: BorderStyle.solid), //Borderside                    right: BorderSide(                        width: 4,                        color: Colors.black,                        style: BorderStyle.solid), //BorderSide                  ), //Border                ), //BoxDecoration              ), //Container            ), //SizedBox          ), //Padding        ), //Center      ), //Scaffold      // The debug banner is turned off      debugShowCheckedModeBanner: false,    ), //MaterialApp  );}
Output: 
Explanation:  The Border widget in this flutter app has been used as the object for the border property in the BoxDecoration widget. Here the border has been added around the geeksforgeeks logo (NetworkImage) using the first method.  In the Border widget using the top, bottom, right, & left properties the width of the border is set to 4 px, the color is set to black and the style is set to solid.  Here in this case we have the ability to made all four borders different, but for the sake of simplicity, we made them all similar.
This is the same output that we will achieve using the rest of the three ways.
// This is the code snippet of Border.all method
...
border: Border.all(
color: const Color(0xFF000000),
width: 4.0,
style: BorderStyle.solid), //Border.all
), //BoxDirection
...
Output: 
Explanation: Here, in the second method, we have painted a border around the image using Border.all. Bu using this method we only need to give specifications for the border only one time. Here, also the width of the border is 4 px, the color is set to black, and the style to solid. If the style is set to none, the borders will no longer be visible. This [property is used to create borders with uniform color and width.
// This is the code snippet of Border.fromBorderSide method
...
border: Border.fromBorderSide(
BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid),//BorderSide
),//Border.fromBorderside
...
Output: 
Explanation: Now, this way of creating a border by using Border.fromBorderSide is also similar to the previous one. 
// This is the code snippet of Border.symmetric method
...
border: Border.symmetric(
vertical: BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid), //BorderSide
horizontal: BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid), //BorderSide
), //Border.symmetric
...
Output: 
 
Explanation: Here we have Border.symmetric property by using this we can create a border which is the same vertically and horizontally. In the vertical property, we have added specified the border width to be 4 px and color to be black and style to be solid, and the same is with the horizontal property.
To see the full code of all the examples used in the article click here.
simranarora5sos
arorakashish0911
sumitgumber28
Flutter-widgets
Android
Articles
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android
Tree Traversals (Inorder, Preorder and Postorder)
SQL | Join (Inner, Left, Right and Full Joins)
find command in Linux with examples
Analysis of Algorithms | Set 1 (Asymptotic Analysis)
Time Complexity and Space Complexity