Flutter – Set Background Image

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

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.