Flutter - BorderSide Widget - GeeksforGeeks

21 Feb, 2022
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.
const BorderSide(
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)
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: () {},          ), //IconButton                     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(                'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),          ), //Container        ), //Center      ), //Scaffold      debugShowCheckedModeBanner: false,    ), //MaterialApp  );}
Output:
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
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 
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
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
simranarora5sos
android
Flutter
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Broadcast Receiver in Android With Example
How to Create and Add Data to SQLite Database in Android?
Services in Android with Example
Content Providers in Android with Example
Android RecyclerView in Kotlin
Listview.builder in Flutter
Flutter - DropDownButton Widget
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar