add bg image flutter
Poor Man
- Published
- Reading time
- 2 min read
- Length
- 305 words
On this page
How to Add Background Image in Flutter#
If you are developing a Flutter application and want to add a background image, it is a fairly simple process. There are a few ways to achieve this, so let me explain them in detail.
Method 1: Using the BoxDecoration Widget#
The easiest way to add a background image in Flutter is by using the BoxDecoration widget. Here's how:
- Import the dart:ui library at the top of your file:
DART
import 'dart:ui' as ui;- Load the image using the AssetImage widget:
DART
AssetImage('assets/images/background.jpg')- Create a BoxDecoration widget with the background image:
DART
BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
)- Wrap your container with the BoxDecoration widget:
DART
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
child: ...
)Method 2: Using the Stack Widget#
If you want more control over your layout, you can use the Stack widget to add a background image. Here's how:
- Load the image using the AssetImage widget:
DART
AssetImage('assets/images/background.jpg')- Create a Positioned widget with the background image:
DART
Positioned(
top: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
),
)- Wrap your layout with the Stack widget:
DART
Stack(
children: [
Positioned(
top: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
),
),
...
],
)Conclusion#
Adding a background image in Flutter is a simple process, and there are multiple ways to do it. You can use the BoxDecoration widget for a simple approach or the Stack widget for more control over your layout. I hope this helps you in your Flutter development journey.