How do I Set Background image in Flutter?

Hello Guys How are you all? Hope You All Are Fine. Today We Are Going To Learn How do I Set Background images in Flutter? with This Tutorial. Sometimes we have to use background images on a particular screen in a flutter. Flutter Add Set Full Screen Background Image to Scaffold Container

In a very Easy way We are going to learn How to I Set Background images in Flutter?. So Without wasting your time let’s start this article.

BoxDecoration has image property and we can easily set background image. so without wasting your time lets start this article.

How do I Set Background image in Flutter?

• Import material.dart package in your app’s main.dart file.

import 'package:flutter/material.dart';

• Create Stateless widget and Define in runApp.

void main() => runApp(MyApp());

•  Now we would make Scaffold widget and put a Center Widget in it.

        home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Background Image - FlutterCorner"),
        ),
        body: Container()

• Now in body’s Container add decoration with BoxDecoration. BoxDecoration Is usually Used to decorate the Container widget. We would use the image property of box decoration to set background image from URL resource.

        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  "https://cdn.pixabay.com/photo/2015/08/28/16/38/stars-912134_960_720.jpg"),
              fit: BoxFit.cover,
            ),
          ),

• Complete source code for my main.dart file:

import 'dart:ui';
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.black),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Background Image - FlutterCorner"),
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  "https://cdn.pixabay.com/photo/2015/08/28/16/38/stars-912134_960_720.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          child: Center(
            child: Text(
              "Flutter Background Image - FlutterCorner",
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Summery

So, It’s All About This tutorial. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• Exception in thread “main” java.lang.NoClassDefFoundError in flutter
• Target of URI doesn’t exist ‘package:flutter/material.dart’ in Visual Studio Code
• Flutter run error: You have not accepted the license agreements
• flutter doctor –android-licenses gives a java error
• The system UI isn’t responding in android emulator (Flutter)