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 create a border whose sides are all same. The fourth way is by using Border.symmetry to make borders look symmetrical vertically and horizontally.

Constructor of Border Class: 

const Border(
{BorderSide top: BorderSide.none,
BorderSide right: BorderSide.none,
BorderSide bottom: BorderSide.none,
BorderSide left: BorderSide.none}
)

Constructor of Border.all:

Border.all(
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)

Constructor of Border.fromBorderSide:

const Border.fromBorderSide(
BorderSide side
)

Constructor of Border. symmetry:

const Border.symmetric(
{BorderSide vertical: BorderSide.none,
BorderSide horizontal: BorderSide.none}
)

Properties of Border Widget:

• 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 box 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.