How to add one side border to container widget flutter?

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_app

This 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.