Flutter Container Decoration

Flutter Container Decoration : A Complete Guide for Beginners

Flutter Container widget is the most used widget in the Flutter. You can create a beautiful Container using Box Decoration in Flutter. In this tutorial, you will learn how to implement flutter container Decoration.

How to Build a Container Widget?

Before using the Flutter container Decoration let’s define a Container. To create a container you have to use the Container() class. Use the below lines of code to create it.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Container App",
      home:Scaffold(
        body: Container(
          ),
        ),
      ),
    );

  }
}

How to use Flutter Container Decoration

Generally, Flutter Container Decoration uses the BoxDecoration class. The following properties you can use in the BoxDecoration() constructor. In fact, These are often used while designing the container.

1. border

It uses the Border Class and the sides of the border are represented by BorderSide Class. Let’s add a flutter container border around the container. In a container, you can add a border using the border: Border() Class.

There are two ways you can add a border. Firstly it is a border around all the sides and secondly, it is drawing border according to left, right, top, bottom side using the BorderSide() class.

Adding a border to all sides of the container


Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
            ),
          ),
Adding border to the container using decoration
Border to the container using decoration

Drawing a border to each side

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border(
                left: BorderSide(color: Colors.green,width: 5),
                right: BorderSide(color: Colors.black,width: 10),
                top: BorderSide(color: Colors.red,width: 20),
                bottom: BorderSide(color: Colors.purple,width: 30),
              ),
            ),
          ),

"<yoastmark

2. Border Radius.

You can also decorate the container using the borderRadius properties. It used the BorderRadius() class. There are five ways to use implement the BorderRadius class. Each of them is:

1. Adding border radius in flutter at once

BorderRadius.all(Radius radius)

It accepts Radius.circular(double x ) or Radius.elliptical(double x , double y). The first one will draw a circular border around all the sides and the second one will draw an elliptical border.

 

Circular Border

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),

Output

Circular border using BorderRadius all
Circular border using BorderRadius all

Elliptical border

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
              borderRadius: BorderRadius.all(Radius.elliptical(10, 30)),
            ),
          ),

Output

Elliptical border using BorderRadius all
Elliptical border using BorderRadius all

2. Adding flutter container circle border

BorderRadius.circular(double radius)

The another way to add the circular border is by simply using the BorderRadius.circular() method.  Inside the method, you have to just put the radius in double.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
              borderRadius: BorderRadius.circular(10,)
            ),
          ),

Output

Circular border using BorderRadius circular
Circular border using BorderRadius circular

3. Bordering the Container Horizontally

BorderRadius.horizontal({Radius left = Radius.zero, Radius right = Radius.zero})

The BorderRadius.horizontal() constructor allows you to change border-radius to the container horizontally. It accepts two parameters left and right.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
                borderRadius: BorderRadius.horizontal(left: Radius.circular(50),right: Radius.circular(10))
              
          ),

Output

Decorating Container Border horizontally
Decorating Container Border horizontally

 

4. Bordering the Container Vertically

BorderRadius.vertical({Radius top = Radius.zero, Radius bottom = Radius.zero})

In the same way, you can change the radius of the border vertically using the BorderRadius.vertical() constructor. It accepts top and bottom as an argument.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
               borderRadius: BorderRadius.vertical(top: Radius.circular(50),bottom: Radius.circular(10))
            ),
          ),

Output

Decorating Container Border vertically
Decorating Container Border vertically

5. Bordering the Container for each corner

BorderRadius.only({Radius topLeft, Radius topRight, Radius bottomLeft, Radius bottomRight})

The BorderRadius.only() constructor allows you to change the radius of all the corners of the border. It accepts four arguments topLeft, topRight, bottomLeft and bottomRight. Using the below code I want to change the radius of all the corners of the border.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(width: 10,color: Colors.red[300],),
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(20),
                  bottomLeft:Radius.circular(30),
                  bottomRight:Radius.circular(40)
              ),
            ),
          ),

Output

Decorating Container Border differently along all the borders
Decorating Container Border differently along all the borders

3. boxShadow

You can add the shadow around the container using the boxShadow property. It draws the shadows using the BoxShadow() constructor.

BoxShadow({Color color, Offset offset , double blurRadius, double spreadRadius})

It accepts the color, offset, blurRadius and spreadRadius as an argument.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(10,20)
                )
              ],

              ),
            ),

Output

Drawing box shadow for the container
Drawing box shadow for the container

In addtion, You can also blur the shadow using the blurRadius property.

If I add the line blurRadius: 30 next to offset then you will get the following output when you run the code.

 

Blurring the container shadow
Blurring the container shadow

4. Color

You can change the background color of the container in a flutter by using the color property. But you should remember that if you are using decoration then define the color for the container inside it not outside the decoration. Let’s change the color of the container from blue to blue-grey.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(10,20),
                  blurRadius: 30,
                )
              ],

              ),
            ),

 

Output

Changing the color of the container
Changing the color of the container

5. Gradient

The gradient property allows you to add a background gradient to the container. There are three ways you can add a gradient to the box that is the LinearGradient, RadialGradient, and the SweepGradient. But the Linear Gradient is the most used gradient. Let’s implement it.

To implement Linear gradient in flutter you have to use the LinearGradient() constructor. It generally accepts three arguments color,begin, and end. Run the below code to implement Linear Gradient.

Container(
            width: 300,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueGrey,
              gradient: LinearGradient(
                colors: [Colors.amber,Colors.red],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(10,20),
                  blurRadius: 30,
                )
              ],

              ),
            ),

 

Output

 

Implementing Linear Gradient to the container
Implementing Linear Gradient to the container

 

 

6. Image

Instead of container color, you can add an image in the container. To do so you have to use the image property with DecorationImage() constructor. Inside the constructor, you have to pass the image property. For example, I want to add an image to the container from a URL. So I will use the NetworkImage.  Just Execute the below lines of code and see the output.

BoxDecoration(
              color: Colors.blueGrey,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(10,20),
                  blurRadius: 30,
                )
              ],
              image: DecorationImage(
                image: NetworkImage("https://cdn.pixabay.com/photo/2021/07/06/21/55/meerkat-6392737_960_720.jpg"),
                fit: BoxFit.cover,

              )

              ),
            ),

Output

Adding image to the Container
Adding an image to the Container

 

These are the general things you can do for decorating a Container. In fact, Using these approaches you can make design your own custom card. I hope you have liked this complete guide on flutter Container Decoration. Even, If you have any doubt then you can contact us for more help.

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.