Flutter – Container Styling

09 May, 2021
In this article we will look at the most basic and simple widget in flutter Container.  We will look that how can we style our container in different ways according to our need , so that we can effectively use this widget in our app . 
First of all we have to write some starting code for our project . Our code for the structure of our app will go like :- 
Dart
import 'package:flutter/material.dart';  void main(){  runApp(MyApp());}  class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: HomePage(),    );  }}  class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Container(),    );  }}
We had created a stateless widget called HomePage in our home property of Material App . So when we run our app we do not see anything created on our screen . 
This is because a container itself is an empty body until some constraints are provided . By constraints here we mean some height or width should be given to our container . Also assign some color to it so that it can be reflected in our app.
Dart
class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(      child: Container(        height: 200.0,        width: 200.0,        color: Colors.blueAccent      )      )    );  }}
NOTE :- We have to assign color property inside BoxDecoration constructor only else it will create an error .
Decoration property takes an argument of type Box Decoration . Now we can see that multiple properties can be applied to our container . 
1.  Border : – We will assign some border to our container using Border.all constructor. Also provide it some width ,color and style properties . 
Dart
border: Border.all(           color: Colors.black,           width: 2.0,  ),
2. Border Radius :- This is used when we have to structure our container other than a default rectangular one . We can provide some radius to our container so that it can have a rounded border . This property is used many times to provide some uniqueness to our UI . 
Dart
borderRadius: BorderRadius.circular(10.0)
3. Image : –  As the name suggests if we want to add some image to our container we can use it with Decoration Image constructor . Image can be added in 2 ways . One by adding into our assets and another by fetching from internet .  
4. Box Shadow :- To provide some shadow to our container this can be used . Actually it accepts a list of object of type Box Shadow . We can provide some color and blur radius to it . 
Dart
boxShadow: [          BoxShadow(            color: Colors.grey ,            blurRadius: 2.0,            offset: Offset(2.0,2.0)          )        ]
5. Shape : – If for some reasons we do not want to hard code the value of radius inside Border Radius property we can use this property by assigning it circle value .  (Note : – Both can not be used simultaneously.)
Dart
shape: BoxShape.circle
6. Gradient :- If we wish to provide some multiple or combination of colors to our container we can use this property . A gradient of type Linear Gradient is assigned to it and colors are provided in form of list . 
Dart
gradient: LinearGradient(             colors: [              Colors.indigo,              Colors.blueAccent             ]           ),
Complete code for our app :
Dart
import 'package:flutter/material.dart';  void main(){  runApp(MyApp());}  class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      home: HomePage(),    );  }}  class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: Container(          height: 200.0,          width: 200.0,          decoration: BoxDecoration(             color: Colors.blueAccent,           border: Border.all(             color: Colors.black,             width: 2.0,           ),           borderRadius: BorderRadius.circular(10.0),           gradient: LinearGradient(             colors: [              Colors.indigo,              Colors.blueAccent             ]           ),          boxShadow: [            BoxShadow(              color: Colors.grey ,              blurRadius: 2.0,              offset: Offset(2.0,2.0)            )          ]          ),        ),      ),    );  }}
Output:
So in this article we saw that how we can style our container in different and best ways to make some better UIs . 
Flutter UI-components
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.