DEV Community

Cover image for How to Add Borders to a Widget In Flutter ?
FlutterCorner
FlutterCorner

Posted on

How to Add Borders to a Widget In Flutter ?

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

Adding a border to a 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.

First Of all, We are Going to make One Container.
Then just use decoration as BoxDecoration.
Then Use border and give Border.all to the Container.
You can also use borderRadius to give shape to the border.
Here Is My Full code.

Corner Border Radius 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,
              ),
            ),
          ),
        )
Enter fullscreen mode Exit fullscreen mode

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

How to add borders to a widget in Flutter<br>

Check Out Other Methods to add border to widget at our website at Here

2. Adding a border to a TextField.

3. Border to Image in Flutter.

Here Is In Detailed Tutorial With Source Code. How to Add Borders to a Widget In Flutter ?

Top comments (0)