Flutter Container Border Customization[Detailed Guide]

flutter container border

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)
                               )),

          ),
flutter container border
We have defined a Flutter container and by using the border constructor of the box decoration class, we’ve given a border to it. We have passed border class to this constructor.

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

Let’s give all the four Flutter container border different colors.
border: Border(
                    bottom: BorderSide(color: Colors.black87),

                    left: BorderSide(color: Colors.green),

                    right: BorderSide(color: Colors.red),

                    top: BorderSide(color: Colors.yellow))
flutter container border
We have used the top, left, right and bottom constructor of the flutter border class. We can see in the above image that all four borders have different colors.

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),
flutter container border width
We can change the width of Flutter container border using the width constructor of the Flutter border class. We have given the bottom border of container the value of 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 width

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,
                )
flutter container border radius
So this is how we can customize Flutter container border. Hope you’ve learned a lot from this tutorial. If you do, then don’t forget to share this tutorial with other Flutter programmers.

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

flutter container border

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.

Leave a Comment

Your email address will not be published. Required fields are marked *