How To Easily Add Flutter Container Background Image

In this Flutter post, we will be looking at how to set Flutter container background image. Step by step explanation will be provided with proper Flutter example code. So let’s not waste anymore time and get right into implementing Flutter container background image.

What is Flutter Container Background Image?

It is the process of showing an image in the Flutter container widget. We will see step by step on how to give a background image to Flutter container widget.

Implementing Flutter Container Background Image(All Steps)

Follow these steps in order to give the Flutter container a background image.

Step 1: Add Asset Folder And Image File

First you have to create an asset folder and paste the image file in it. For demonstration, I have used an image file as seen in the above image.

Step 2: Uncomment the Asset In the PubsPec.Yaml

Secondly, you have to uncomment the asset which is in the pubspec.yaml file as seen in the above image.

Step 3: Coding

Now comes the coding part. First you have to define a Flutter container widget. For demonstration, we have given height, width and color to the Flutter container widget so we can make sure that we have a container on our screen. See the below code:

Container(
        height: 150,
        width: 150,
       color: Colors.green
      )

You can see in the above image that we have a container widget.

Let’s now see how to add Flutter container background image to it. See the below steps:

1. We have to use the decoration constructor of the Flutter container widget class and pass it box decoration.
2. After that, we have to use its image constructor and pass decoration image to it.
3. Now using the image constructor of decoration image and passing this constructor asset image, the reason is that we will be fetching the image from it own local asset. This asset image takes a location path of the image in string so we have to pass the full path of image to it.

If it confuses you then see the below code in which each of these steps are practically implemented.

Container(
        height: 150,
        width: 150,
        decoration: BoxDecoration(
            image: DecorationImage(fit: BoxFit.cover,
              image: AssetImage('assets/cartoon.jpg'))),
      )

You can see that the Flutter container background image is successfully implemented. We also have used the fit constructor of the decoration image and make the size of the image cover the whole background of the Flutter container widget.

I would love to answer if you still have any questions regarding Flutter container background image.

Below is the complete source code of the above implemented Flutter container background image with a child Flutter text widget so we can make sure that the image is visible in the background of Flutter container widget. We will also be using the color filter constructor of the decoration image to make the background image a little dark so we can see the text more clearly.

Flutter Container Background Image Implementation Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Container(
        height: 250,
        width: 250,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(Colors.black45, BlendMode.darken),
                image: AssetImage('assets/cartoon.jpg'))),
        child: Text(
          'Flutter Container Background Image',
          style: TextStyle(color: Colors.white, fontSize: 17),
        ),
      )),
    ));
  }
}

Conclusion

To conclude, now you have a complete in depth understanding of how to use and set Flutter container background image. Don’t hesitate to leave your valuable comments about this post. Thanks for reading.