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.