Flutter – BorderSide Widget
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: () {},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.comment),
tooltip: 'Comment' ,
onPressed: () {},
),
],
),
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),
),
),
child: Image.network(
),
),
),
debugShowCheckedModeBanner: false ,
),
);
}
|
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
Last Updated :
21 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...