Flutter - BorderSide Widget
Last Updated :
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.
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: () {},
), //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
Similar Reads
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 cre
4 min read
Flutter - BorderRadius Widget
BorderRadius is a built-in widget in flutter. Its main functionality is to add a curve around the border-corner of a widget. There are in total of five ways in which we can use this widget, the first is by using BorderRadius.all, the radius for all the corners are the same here. The second way is by
5 min read
Flutter - BorderDirectional Widget
BorderDirectional is a built-in widget in flutter SDK. This widget is somewhat similar to the Border widget with the main difference being the inclusion of start and end property which lets the user modify the border according to the text direction right-to-left (rtl) or left-to-right (ltr). If our
5 min read
Flutter - BoxDecoration Widget
BoxDecoration is a build-in widget in flutter API. At a bare basic level, it describes how a box should be painted on the screen. The shape of the box needs not to be just a rectangle or a square it can circle also. It comes with a ton of properties we can add an image inside, add a radius to the bo
3 min read
Flutter - Banner Widget
Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex
3 min read
Flutter - Card Widget
Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read
Flutter - BorderRadiusDirectional Widget
BorderRadiusDirectional is a pre-built widget in flutter. Its functionality is similar to the BorderRadius widget, which is to add a curve around the corners of the border. But there is a difference, in BorderRadiusDirectional widget we can specify corner radius depending upon the text direction. It
4 min read
Flutter - Expanded Widget
Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column). Â Expanded widget can be taken as the child of Row, Column, and Flex. And in case if we don't
5 min read
Flutter - Dismissible Widget
The Dismissible widget in Flutter is used to create items that can be dismissed by swiping them off the screen. It's commonly used in lists or grids where you want to provide a way for users to remove items with a swipe gesture. In this article, we are going to implement the Dismissible widget and e
4 min read
Flutter - Flexible Widget
Flexible is a built-in widget in flutter which controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.tight. Flexible widget plays a very important part in m
8 min read