Skip to content
Related Articles

Related Articles

Improve Article
Flutter – BorderSide Widget
  • Difficulty Level : Hard
  • Last Updated : 19 Nov, 2020

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 BorderSide(
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)

Properties of BorderSide Widget: 

  • color: The color property holds Color class (final) as the object, to assign a color to a border side.
  • hashCode: This property takes an int value (override) as the object. This is responsible for the state representation of an object.
  • style: The style property takes BorderStyle enum as the object. With the help of this property, we can control the style of the border-line drawn.
  • width: This property takes a  double value as the object. And it controls the width assigned to the individual side of the border.

Example: Here we will see add border to an image.

Dart




import 'package:flutter/material.dart';
  
void main() {
  runApp(
    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: Container(
            padding: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              border: Border(
                top: BorderSide(
                    width: 16.0,
                    color: Colors.lightGreen.shade300,
                    style: BorderStyle.solid), //BorderSide
              ), //Border
                
            ), //BoxDecoration
             //Image.network
            child: Image.network(
          ), //Container
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

Output:

border



Explanation: In this app, the BorderSide widget is put as the object to top, which is a property of Border widget to describe the border side on top of the element (or in this case geeksforgeeks logo).  A width of 16.0 px has been given to the border, the color is set to lightGreen.shade300 and at last the style property is set to solid (which makes it visible).

   // style property set to none
   ... 
   style: BorderStyle.none  //BorderSide
   ...

If style property is set as above. The output will be.

BorderStyle.none

BorderStyle.none

To add a bottom border we have to do these changes.

...
   border: Border(
                  top: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...                                

Output: 

bottom border

Bottom border 

This is how we can add a left border to the image.

...
 border: Border(
                  top: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  left: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...                

Output:

left border

Left border

And, this is how we all border in all four sides using the BorderSide widget.

...
 border: Border(
                  top: BorderSide(
                      width: 16.0,
                      color: Colors.lightGreen.shade300,
                      style: BorderStyle.solid),
                  left: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                  right: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...

Output:

border in all four sides

Border in all four sides

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :