Hello friends, Recently when I was installing a android application then I saw this app has a complete border around screen. So i thought let’s make this in flutter. Now the Scaffold widget does not support border property. If we want to apply border around Root View screen in flutter then we have to use Container widget. Now as we all know it does support width and height but when we do not pass width and height then it will automatically occupy all the space given by its parent. So we call the Container widget as our Root widget and put border on it. So in this tutorial we would learn about Add Border To Main Root Scaffold Container Widget in Flutter.
Contents in this project Add Border To Main Root Scaffold Container Widget in Flutter :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating 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 Widget Build area -> Material App -> Scaffold widget -> SafeArea widget -> Container widget without width and height. So it will occupy all the Root space. You can put any widget as its child.
|
1 2 3 4 5 6 7 8 9 10 11 |
Container( alignment: Alignment.center, decoration: BoxDecoration( color: Colors.green, border: Border.all(color: Colors.red, width: 4.0)), child: const Text( "Apply Border To Root Container Widget", style: TextStyle(fontSize: 32, color: Colors.white), textAlign: TextAlign.center, ), ) |
5. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Container( alignment: Alignment.center, decoration: BoxDecoration( color: Colors.green, border: Border.all(color: Colors.red, width: 4.0)), child: const Text( "Apply Border To Root Container Widget", style: TextStyle(fontSize: 32, color: Colors.white), textAlign: TextAlign.center, ), )))); } } |
Screenshot :-
