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 )

- We have to use the decoration constructor of the Flutter container widget class and pass it box decoration.
- After that, we have to use its image constructor and pass decoration image to it.
- 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'))), )

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.