Flutter - Container Styling

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

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.

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 .

Using decoration property of Container :

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 . 

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 . 

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 . 

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

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 . 

gradient: LinearGradient(
             colors: [
              Colors.indigo,
              Colors.blueAccent
             ]
           ),

Complete code for our app :

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 . 

19uec032

Follow

Improve

Article Tags :

• Dart
• Flutter
• Flutter-Widgets
• Flutter UI-components