Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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.

How to Add Border and Border Radius on Container Widget:

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

How to Add Border to Specific Side: Left, Right, Top, Bottom:

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

Full Dard/Flutter Code Example:

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


                ]
              ) 
          )
      );
  }
}

Output Screenshot:

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

No any Comments on this Article


Please Wait...