In this article, we will be discussing and implementing Flutter container border. We will first understand the role of border in Flutter container. Then we’ll learn customization of its color, width, shape etc.
So without wasting anymore of your precious time. Let’s jump right into it.
Introduction: Flutter Container Border
Ss the name suggests, it is the border of Flutter container container. Let’s understand Flutter container border in depth using using practical Flutter code examples.
Flutter Container Border Color
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
border: Border(
bottom: BorderSide(color: Colors.black87)
)),
),
We can use border.all() which is used when we want to change all the sides of the container using the same value. We will use it as well.
We have specified only the bottom border of Flutter container using the bottom constructor of the border class. We can see in the image above that we have a Flutter container having the bottom border of color black.
Borders With Different Colors
border: Border( bottom: BorderSide(color: Colors.black87), left: BorderSide(color: Colors.green), right: BorderSide(color: Colors.red), top: BorderSide(color: Colors.yellow))
Don’t use boxshape.circle when you are using the Border() class, otherwise it will give error and you won’t see Flutter container border. We can use it with border.all() and it won’t give any error in the console.
Flutter Container Border Width
bottom: BorderSide(color: Colors.black87, width: 4),
We can see in the above image that the width of the bottom Flutter container border looks wider than the other borders.
Borders Width Values
Let’s give each of the border sides a value of 4.
bottom: BorderSide(color: Colors.black87, width: 4), left: BorderSide(color: Colors.green, width: 4), right: BorderSide(color: Colors.red, width: 4), top: BorderSide(color: Colors.yellow, width: 4)
Flutter Container Border Shape
The shape of the Flutter container border is changed using the border radius constructor of the Flutter container widget. The border shape adapts the shape of the Flutter container.
Keep in mind that using both the Border class in the border constructor and the shape or border radius of the Flutter container widget will give error. For that, we can use border.all(). Let’s implement it:
border: Border.all( color: Colors.red, width: 4, )
We’ll be glad to answer if you have any queries related to the border customization of Flutter container widget.
The source code of a custom Flutter container design is given in the below section. We’d love to see you use it in your projects and customize it, if needed.
Click here to learn about Flutter container gradient in detail.
Custom Flutter Container Design Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Container Border',
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient:
LinearGradient(colors: [Colors.pink, Colors.pink.shade100]),
border: Border.all(
color: Colors.red,
width: 4,
),
borderRadius: BorderRadius.circular(10)),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink.shade100, Colors.pink]),
border: Border.all(
color: Colors.red,
width: 4,
),
borderRadius: BorderRadius.circular(10)),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink, Colors.pink.shade100]),
border: Border.all(
color: Colors.red,
width: 4,
),
borderRadius: BorderRadius.circular(10)),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink.shade100, Colors.pink]),
border: Border.all(
color: Colors.red,
width: 4,
),
borderRadius: BorderRadius.circular(10)),
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pink, Colors.pink.shade100]),
border: Border.all(
color: Colors.red,
width: 4,
),
borderRadius: BorderRadius.circular(10)),
),
),
),
),
),
),
),
);
}
}Conclusion
In conclusion, now have an in-depth practical knowledge of how to properly customize Flutter container border. Do feel free to make use of the comment section in order to share your informative feedback.
We’d be delighted to see you pay a visit to other tutorials on Flutter app development and Python programming. Thank you for reading this article.
