Flutter Container Decoration : A Complete Guide for Beginners (2024)

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.

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],), ), ),

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

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

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

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

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

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

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

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

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.

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

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

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

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.