How to Add Borders to Container Widget in Flutter

In this example, we are going to show you the easiest way to add borders to the Container widget on Flutter. We will show you to add fully on all four sides and on the specific side too. See the example below.

Container(
    height:50,
    width:300,
    decoration: BoxDecoration(
      border: Border.all(
          color: Colors.black, //color of border
          width: 2, //width of border
        ),
      borderRadius: BorderRadius.circular(5)
    ),  
)

See this also: How to Make Dotted/Dash Border on Container in Flutter App

Container(
    margin: EdgeInsets.only(top:20),
    height:50,
    width:300,
    decoration: BoxDecoration(
      border: Border(
          top: BorderSide(
              color: Colors.redAccent, width: 2
            ),
          bottom: BorderSide(
              color: Colors.purpleAccent, width: 5
            ),

        left: BorderSide(
              color: Colors.black, width: 10
            ),
        right: BorderSide(
              color: Colors.green, width: 4
            )
      )
    ),  
)

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( home: MyApp(),)
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Add Border to Container"),
              backgroundColor: Colors.deepPurpleAccent
          ),
          body: Container( 
              alignment: Alignment.topCenter,
              margin: EdgeInsets.only(top:20),
              child: Column( 
                children:[
                  Container(
                      height:50,
                      width:300,
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.black, //color of border
                            width: 2, //width of border
                          ),
                        borderRadius: BorderRadius.circular(5)
                      ),  
                  ),


                  Container(
                     margin: EdgeInsets.only(top:20),
                      height:50,
                      width:300,
                      decoration: BoxDecoration(
                        border: Border(
                           top: BorderSide(
                                color: Colors.redAccent, width: 2
                              ),
                           bottom: BorderSide(
                                color: Colors.purpleAccent, width: 5
                              ),

                          left: BorderSide(
                                color: Colors.black, width: 10
                              ),
                          right: BorderSide(
                                color: Colors.green, width: 4
                              )
                        )
                      ),  
                  ),


                ]
              ) 
          )
      );
  }
}

In this way, you can add borders to Container Widget in Flutter.

2 Comments on this Article

shalom

Great article. Very helpful for me as I am starting to learn Flutter/Dart. Just a few typos. ʺDardʺ is one of them. 

2 years ago

Hari Prasad Chaudhary

Thank you very much for correcting us. We have edited the typo. 

2 years ago


Please Wait...