Border Widget

What is Border Widget?

The Border widget is to add borders to the four sides of widget, i.e. top, right, bottom, and left. The sides are represented by BorderSide class.

Default Constructor

The default constructor creates a border. All the sides of the border default to BorderSide.none, i.e. a hairline black border that is not rendered. The all arguments must not be null.

Border(
    top: BorderSide.none,
    right:  BorderSide.none,
    bottom: BorderSide.none,
    left: BorderSide.none,
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The top parameter is to draw a border line to the top side of the widget.

The right parameter is to draw a border line to the right side of the widget.

The bottom parameter is to draw a border line to the bottom side of the widget.

The left parameter is to draw a border line to the left side of the widget.

Code snippet

This code snippet shows how to configure Border widget with its arguments.

Border(
        top: BorderSide(width: 1.0, color: Colors.green),
        left: BorderSide(width: 1.0, color: Colors.red),
        right: BorderSide(width: 1.0, color: Colors.orange),
        bottom: BorderSide(width: 1.0, color: Colors.yellow),
)

Demo Code

This example shows apply border all four borders one-pixel wide with solid green, red, orange and yellow border.

import 'package:flutter/material.dart';

class BorderSideDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            height: 100,
            width: 100,
            decoration: const BoxDecoration(
              border: Border(
                top: BorderSide(width: 1.0, color: Colors.green),
                left: BorderSide(width: 1.0, color: Colors.red),
                right: BorderSide(width: 1.0, color: Colors.orange),
                bottom: BorderSide(width: 1.0, color: Colors.yellow),
              ),
            )));
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BorderSide Demo')),
        body: BorderSideDemo(),
      ),
    );
  }
}

void main() => runApp(MyApp());