Add Set Border Around Text Container Widget in Flutter Example

In Container widget of flutter there are a property named as decoration which is used to decorate the container widget. Decoration is used to paint something beneath the child of container widget. The decoration property supports parameter named as BoxDecoration which is used to add set border around text container widget in flutter. The BoxDecoration has 3 main properties color, border and borderRadius. By using all of them we can easily show border around the any widget in flutter. So let’s get started 🙂 .

Contents in this project Add Set Border Around Text Container Widget in Flutter Android iOS Example:

1. Open your project’s main.dart file and import material.dart package.

2. Creating our void main runApp() method and here we would call our main MyApp class.

3. Creating our main MyApp extends StatelessWidget class.

4. Creating the Widget Build Area -> Material App -> Scaffold widget -> Center widget .

5. Creating Container Widget with a Text widget.

  1. width : Used to set width of Container widget.
  2. height :  Used to set height of Container widget.
  3. padding : To set padding in Container widget.
  4. alignment : To set alignment of container widget.
  5. decoration : To decorate the Container widget.
  6. BoxDecoration -> color : To set background color of Container widget.
  7. BoxDecoration -> border : To set border width and border color.
  8. BoxDecoration -> borderRadius : To set rounded radius of border on corners.

6. Complete source code for main.dart file:

Screenshot:

Add Set Border Around Text Container Widget in Flutter Example

Leave a Reply

Your email address will not be published.