Flutter - Set Background Image
Last Updated :
17 Oct, 2024
In this article, we are going to implement how to set the background image in the body of the scaffold. A sample image is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Command to create the project -
flutter create background
Step 2 : Adding asset
As the project is created, add a folder with any image(for background). The heirarachy will be as follows assets>images>img.png. The project folder will have below structure now -
Project structure Step 3: Import the asset
The image needs to be imported in pubspec.yaml
flutter:
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/img.png
Step 4: Import the material package
Adding material package that gives us to use the important method and calls the runApp method in the main function that will call our application.
import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
Step 5: Create a class RunMyApp
This will be extending a stateless widget, because there are no changes needed. That further returns the MaterialApp widget which gives the material components to build the flutter application.
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false,
home:
);
}
}
Step 6: Creating Scaffold Widget
Given the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. the body takes the widget DecoratedBox which further takes the image and child property.
home: Scaffold(
appBar: AppBar(
title: Text('Set Background Image'),
),
body: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/img.png"), fit: BoxFit.cover),
),
child: Center(
child: FlutterLogo(
size: 200,
)),
),
),
Decorated Box widget has decoration and child property.
Step 7 : Final Code for main.dart
main.dart
import 'package:flutter/material.dart';
void main() {
// main method thats
// run the RunMyApp
runApp(RunMyApp());
}
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
// materialApp with debugbanner false
return MaterialApp(
// theme of the app
theme: ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false,
// scaffold with app
home: Scaffold(
// appbat sets the title of the app
appBar: AppBar(
title: Text('Set Backgound Image'),
),
// Decoratedbox which takes the
// decoration and child property
body: DecoratedBox(
// BoxDecoration takes the image
decoration: BoxDecoration(
// Image set to background of the body
image: DecorationImage(
image: AssetImage("images/img.png"), fit: BoxFit.cover),
),
child: Center(
// flutter logo that will shown
// above the background image
child: FlutterLogo(
size: 200,
)),
),
),
);
}
}
Step 8 : Run the application
Save the project and enter below command to run the application.
flutter run
Output
A background image is shown which has the flutter logo above it.
Similar Reads
Running Background Tasks in Flutter
Creating an application that is able to handle processes with background capabilities is crucial for numerous applications, including geolocation, music, or other processes which may take a lot of time. Flutter, an open-source UI toolkit owned by Google lets developers write and compile applications
6 min read
Flutter - Dynamic Image List
Dynamic Image List is the list of Images when we add images Dynamically, In this article, we will see how to add images dynamically to the List of Images. It is something like that we are adding some items to the list. There is no need to add dependency to our project. A sample video is given below
5 min read
Flutter - Set Gradient to Container Background
In this article, we will learn how to make the Gradient Background color of the body in the Flutter Application. A sample image is given below to get an idea about what we are going to do in this article. Â Step By Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter D
2 min read
Animated Background in Flutter
Animated Backgrounds for Flutter is easily extended to paint whatever you want on the canvas. In this article, we are going to make an animated background with bubbles. A sample video is given below to get an idea about what we are going to do in this article. Installing Add the dependency into pub
2 min read
Flutter - SVG Image as Button
In this article, we will see how to make the SVG image a button in Flutter so that we can perform actions. A sample video is given below to get an idea about what we are going to do in this article. How to Use? You can use the Gesture Detector to add click functionality to any Widget in Flutter. Dar
2 min read
Flutter - Card Widget
Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read
Flutter - BackDropFilter Widget
In this article, we will be going to learn about BackDrop Filter Widget in Flutter and see how to implement it in Flutter. BackDrop Filter widget that applies a filter to the existing painted content to make it blur so as to show the clear text on the screen. The filter will be applied to all the ar
4 min read
Background local notifications in Flutter
Sometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android
6 min read
Flutter - Banner Widget
Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex
3 min read
Flutter - AppBar Widget
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read