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.
Outline
- What is Flutter Container Background Image?
- Implementing Flutter Container Background Image(All Steps)
- Step 1: Add Asset Folder And Image File
- Step 2: Uncomment the Asset In the PubsPec.Yaml
- Step 3: Coding
- Flutter Container Background Image Implementation Source Code
- Conclusion
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.
I would also highly encourage you to visit my other posts on Flutter widgets, beautiful Flutter templates with free source code, custom animations, Flutter app development, Flutter books, Flutter web and many more. Links to some of them can be found listed below. Others can be found using the search box of this site or the menu navigation bar. Thanks for reading.
Flutter app articles you might like to read: flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development. beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions,
You might also like:
How To Easily Implement Flutter Container Shape Circle
How To Easily Customize Flutter Box Shadow Offset
How To Easily Change Flutter Container Color
How To Easily Change Flutter Container Border Radius
How To Easily Change Flutter Container Shadow Color
How To Easily Customize Flutter Container Shadow
How To Easily Change Flutter Container Size
Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs
How To Easily Change Flutter Text Underline Color
How To Easily Align Flutter Text Justify
How To Easily Set Space Between Flutter Text And Underline
How To Easily Set Flutter Text Letter Spacing
Acer Nitro 5 AN515 57 79TD Gaming Laptop Amazing Specs-Best Gaming Laptop
How To Easily Set Flutter Text Underline
How To Easily Add Flutter Text Shadow
