DEV Community

Cover image for How to set Background Image to Scaffold in Flutter - fluttercorner.com
FlutterCorner
FlutterCorner

Posted on

1

How to set Background Image to Scaffold in Flutter - fluttercorner.com

How to set Background Image to Screen in Flutter.

Hello Guys How are you all ? Hope You All Are Fine. Today We Are Going To Learn How to set Background Image to Scaffold in Flutter. ?with This Tutorial. Somethimes we have to use background image in pericular screen in flutter. Flutter Add Set Full Screen Background Image to Scaffold Container

In very Easy way We are going to learn How to set Background Image to Scaffold in Flutter. So Without wasting your time lets start this article.

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

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

import 'package:flutter/material.dart';

Enter fullscreen mode Exit fullscreen mode

Create Stateless widget and Define in runApp.

void main() => runApp(MyApp());
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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,
            ),
          ),
Enter fullscreen mode Exit fullscreen mode

Complete source code for my main.dart file:
Here Is my Full Source Code How to set Background Image to Scaffold in Flutter

Sentry image

Make it make sense

Make sense of fixing your code with straight-forward application monitoring.

Start debugging →

Top comments (0)

Image of Stellar post

Discover what it takes to launch a Web3 startup

Bringing your Web3 idea to life and launching a startup can be a difficult, complicated process. Check out the Stellar Dev Diaries to learn from a team that is makiung it happen, in real time!

Learn more

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay