In this tutorial we will learn to add add one side border to container widget flutter. Border is used to create border around the widget or container and using the border we can style it in different way like adding the width of border, color of border and one side border.
Flutter use BoxDecoration class and BorderSide class is user to render the border in container widget it accepts multiple options like border, border radius, color, background image, gradient, shape and etc. so to add the border first we need to add decoration option to container and then in decoration value we need to assign BoxDecoration class to implement the border.
You can simple create border to container as follow
Container(
decoration: BoxDecoration(
border: Border.all(color:Colors.red,width:2.0)
),
child: Text(
'Hello, World!',
style: TextStyle(color:Colors.white,fontSize:30),
),
);
One side border to widget flutter
Sometimes we also want to add border to only one side of widget or container so then we can use BorderSide class to add the border to the one side or any side like left, right, bottom and top of container as follow
Container(
decoration: BoxDecoration(
border: Border(bottom:BorderSide(color:Colors.yellow))
),
child: Text(
'Hello, World!',
style: Theme.of(context).textTheme.headline4,
),
);
We can also add to right side as follow
Container(
decoration: BoxDecoration(
border: Border(right:BorderSide(color:Colors.yellow),
top:BorderSide(color:Colors.red,widht:2.0),
bottom:BorderSide(color:Colors.green,widht:4.0)
)
),
child: Text(
'Hello, World!',
style: TextStyle(color:Colors.white,fontSize:30),,
),
);Then to each part of border we can configure the color, width and style of border.
Let’s understand add one side border to container widget flutter with example
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder .
Step 2 : Create a simple widget
Now, Create a simple state less widget to add the border to widget as follow
File : lib/borderexample.dart
class BorderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border(bottom:BorderSide(color:Colors.yellow))
),
child: Text(
'Hello, World!',
style: TextStyle(color:Colors.white,fontSize:30),
),
);
}
}Step 3: Import and use the widget in main
We just created a new widget with name BorderExample, now we are going to use it in our main.dart file as below
import 'package:flutter/material.dart';
import 'package:example_app/BorderExample.dart';;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: BorderExample(),
),
),
);
}
}Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartRead Also : How to Use Hash Hexadecimal Color Code in flutter ?
