How to Add Borders to a Widget In Flutter ?

Hello Guys. Add a border to a widget is very easy in Flutter. There Are Several Methods to add borders to a widget in a flutter. Here I am come with all possible Methods to add borders to your Widget. So let’s Start this tutorial without wasting your time.

There are Several Methods to Add Borders to a Widget In Flutter. Here I am Explain As Many as possible methods.

1. Adding a border to a Container.
2. Adding a border to a TextField.
3. Border around Image in Flutter

1. Adding a border to a Widget Container.

Let’s Suppose we want to make a square with blue borders then all we need to do is Just Use Container and Container has decoration Property that contains BoxDecoration and we will use border Property. Let’s do it together.

1. First Of all, We are Going to make One Container.
2. Then just use decoration as BoxDecoration.
3. Then Use border and give Border.all to the Container.
4. You can also use borderRadius to give shape to the border.

Here Is My Full code.

1. Method to add a Border to Widget in Flutter

    Container(
          height: 170,
          width: 170,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 3,
            ),
            borderRadius: BorderRadius.circular(15.0),
          ),
          child: Center(
            child: Text(
              'FlutterCorner.com',
              style: TextStyle(
                color: Colors.green,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )

Here Is My Corner Border Radius to Widget in Flutter‘s Output.

2. Side Border to Widget in Flutter.

     Container(
          height: 170,
          width: 170,
          decoration: BoxDecoration(
            border: Border(
              left: BorderSide(
                color: Colors.green,
                width: 4,
              ),
              right: BorderSide(
                color: Colors.green,
                width: 4,
              ),
            ),
          ),
          child: Center(
            child: Text(
              'FlutterCorner.com',
              style: TextStyle(
                color: Colors.green,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )

Here Is My Side Border to Widget in Flutter‘s Output.

3. Borders to Container

    Container(
          height: 170,
          width: 170,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 4,
            ),
          ),
          child: Center(
            child: Text(
              'FlutterCorner.com',
              style: TextStyle(
                color: Colors.green,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )

Here Is My Borders to Container‘s Output.

Hope you Like our First Method of Adding a border to a TextField. Check Out Our Others methods too.

2. Adding a border to a Widget TextField.

1. First of all, Make TextField.
2. TextField has a property named decoration.
3. Use InputDecoration as decoration.
4. InputDecoration has borders like border, enabledBorder, disabledBorder, errorBorder, focusedBorder, focusedErrorBorder.
5. You can use OutlineInputBorder for all the above properties.
6. For Example, You can see my below code.

Here Is My Full code.

    Container(
          width: 300,
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.green,
                ),
              ),
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.green,
                  width: 1.7,
                ),
              ),
              helperText: 'Just For Demo.',
              labelText: 'Input Field',
              prefixIcon: const Icon(
                Icons.person,
                color: Colors.green,
              ),
              prefixText: ' ',
              labelStyle: const TextStyle(
                color: Colors.green,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )

Here Is My Adding a border to a TextField Output.

3. Border to Widget Image in Flutter.

In Flutter Its so simple to display images with borders around them. Of course, we are going to use Container to adding a border to the image in the flutter. Follow the below step.

1. Make Container and in Containers Child we will apply Image property.
2. Container Has decoration Property.
3. Use BoxDecoration to decoration Property.
4. Give border to BoxDecoration.
5. You can manage border’s Color, width and style.
6. Just use below Code for reference.

Simple Border to Image in Flutter.

Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 5,
              color: Colors.green,
            ),
          ),
          child: Image.network(
              'https://fluttercorner.com/wp-content/uploads/2020/09/Untitled-design.png'),
        )

Here Is My Simple Border to Image in Flutter‘s Output.

Corner Border to Image in Flutter.

    Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            border: Border.all(
              width: 5,
              color: Colors.green,
            ),
            borderRadius: BorderRadius.circular(30),
          ),
          child: Image.network(
              'https://fluttercorner.com/wp-content/uploads/2020/09/Untitled-design.png'),
        )

Here Is My Corner Border to Image in Flutter‘s Output.

Summery

So, Its all About How to add borders to a widget in Flutter. I hope this tutorial helps you to add Borders to your Widget. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• Exception in thread “main” java.lang.NoClassDefFoundError in flutter
• Target of URI doesn’t exist ‘package:flutter/material.dart’ in Visual Studio Code
• Flutter run error: You have not accepted the license agreements
• flutter doctor –android-licenses gives a java error
• The system UI isn’t responding in android emulator (Flutter)