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.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating the Widget Build Area -> Material App -> Scaffold widget -> Center widget .
|
1 2 3 4 5 6 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: ))); } |
5. Creating Container Widget with a Text widget.
- width : Used to set width of Container widget.
- height :Â Used to set height of Container widget.
- padding : To set padding in Container widget.
- alignment : To set alignment of container widget.
- decoration : To decorate the Container widget.
- BoxDecoration -> color : To set background color of Container widget.
- BoxDecoration -> border : To set border width and border color.
- BoxDecoration -> borderRadius : To set rounded radius of border on corners.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Container( width: 300, height: 200, padding: EdgeInsets.all(12), alignment: Alignment.center, decoration: BoxDecoration( color: Colors.blueAccent, border: Border.all(color: Colors.red, width: 4.0), borderRadius: BorderRadius.all(Radius.circular(8.0)), ), child: Text( "Apply Border on Text & Container Widget", style: TextStyle(fontSize: 32, color: Colors.white), textAlign: TextAlign.center, ), ) |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( width: 300, height: 200, padding: EdgeInsets.all(12), alignment: Alignment.center, decoration: BoxDecoration( color: Colors.blueAccent, border: Border.all(color: Colors.red, width: 4.0), borderRadius: BorderRadius.all(Radius.circular(8.0)), ), child: Text( "Apply Border on Text & Container Widget", style: TextStyle(fontSize: 32, color: Colors.white), textAlign: TextAlign.center, ), )))); } } |
Screenshot:
