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.
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(
), //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.
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:
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:
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: