How to add border to container or any widget flutter?

In this tutorial we will learn to add border to container or any 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 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 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),,
      ),
    );

Let’s understand add border to container or any 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.

flutter run lib/main.dart

One side border to widget flutter

Related

Related Posts