Flutter Set Border Only One Side of Container

In flutter we can define border draw side using BoxDecoration property of decoration. It gives us the option to show border only on Top, Left, Right and bottom side. All we have to do is pass the top, bottom, left and right properties and define the border color and width within it and than the magic happens.

Flutter Set Border Only One Side of Container - Top, Left, Right and Bottom:

1. Creating Container with Only Top side of border.

Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.cyan,
            border: Border(
              top: BorderSide(
                color: Colors.black,
                width: 3.2,
              ),
            ),
          ),
          child: const Text(
            'Border on Only Top Side of Container',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),

Screenshot:

2. Defining Container with Border on Right side only.

Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.cyan,
            border: Border(
              right: BorderSide(
                color: Colors.black,
                width: 3.2,
              ),
            ),
          ),
          child: const Text(
            'Border on Only Right Side of Container',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),

Screenshot:

3. Defining Container with Only left side of border.

Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.cyan,
            border: Border(
              left: BorderSide(
                color: Colors.black,
                width: 3.2,
              ),
            ),
          ),
          child: const Text(
            'Border on Only Left Side of Container',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),

4. Container with Border on bottom side only.

Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.cyan,
            border: Border(
              bottom: BorderSide(
                color: Colors.black,
                width: 3.2,
              ),
            ),
          ),
          child: const Text(
            'Border on Only Bottom Side of Container',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),

Screenshot:

Complete source code main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Container(
          width: 200,
          height: 150,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.cyan,
            border: Border(
              bottom: BorderSide(
                color: Colors.black,
                width: 3.2,
              ),
            ),
          ),
          child: const Text(
            'Border on Only Bottom Side of Container',
            style: TextStyle(fontSize: 22, color: Colors.black),
            textAlign: TextAlign.center,
          )),
    ))));
  }
}