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.

Step 2: 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 3: Create a class  RunMyApp which going to be stateless, 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 4: Creating Scaffold Widget

Give 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.  decoration further takes the BoxDecoration and takes the asset image.

Final Code

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,
          )),
        ),
      ),
    );
  }
}

Output

A background image is shown which has the flutter logo above it.