close

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

Question: How to Add Borders to a Widget In Flutter ?
Answer: To add borders to the widget in a flutter, First of all, Make TextField. TextField has a property named decoration. Use InputDecoration as decoration. InputDecoration has borders like border, enabledBorder, disabledBorder, errorBorder, focusedBorder, focusedErrorBorder. You can use OutlineInputBorder for all the above properties. For Example, You can see my below code.

1. 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.

  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. Corner Border Radius to Widget in Flutter

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

Adding a border to a Container

2. Side Border to Widget in Flutter.

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

Side Border to Widget in Flutter

3. Borders to Container

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 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.

Here Is My Adding a border to a TextField Output.

Adding a border to a TextField.

3. Border to 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.

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

Corner Border to Image in Flutter.

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

Leave a Comment

%d bloggers like this: