Add background image in flutter

Question

I am trying to create the attached screen in Flutter. How do I add a background image and add the text at the specific location (ignore the white text box).

Thanks for your help

Check this post https://stackoverflow.com/a/52927720/6742601 — Fazal Hussain, Apr 17 '19 at 12:07
Does this answer your question? [How do I Set Background image in Flutter?](https://stackoverflow.com/questions/44179889/how-do-i-set-background-image-in-flutter) — selllami, Jan 16 '23 at 13:15

Tahseen Quraishi · Answer 1 · 2019-04-17T14:29:00.310

To add background image you have to use DecorationImage class and inside BoxDecoration.

 class Home extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return Scaffold(
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(image: AssetImage("assets/image1.jpg"), fit: BoxFit.cover),
            ),
            child: Center(child: Text('Welcome To',style: TextStyle(
              color: Colors.white,
              fontSize: 40.0
            ),)),
            )
        );
      }
    }

score 2 · Answer 2 · answered Aug 27 '19 at 05:31

2

Also make sure to create an assets directory and add your image asset(s) to it, then update your pubspec.yaml file under "flutter:" as below with:

flutter:
  assets:
    - assets/splash.png

Where splash.png is your image asset. Or just use:

flutter:
  assets:
    - assets/

if you want the whole directory. If not, you'll just render a blank container.

answered Aug 27 '19 at 05:31

Oprimus

1,652
3
11
20

Why is this downvoted? I came looking for this answer myself and followed the above but still had no image rendered, only to finally realize I messed up on the pubspec.yaml file. – Oprimus Oct 04 '19 at 20:31

score 0 · Answer 3 · answered Apr 17 '19 at 12:52

Try this;

Widget build(BuildContext context) {
return Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage("assets/splash.png"),
                fit: BoxFit.cover
            )
        ),
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.only(bottom: 150.0),
        child: JumpingDotsProgressIndicator(
          fontSize: 50.0,
          numberOfDots: 4,
          dotSpacing: 2.0,
          color: Colors.white,
          milliseconds: 400,
        ),
      ),

    ],
  ),
);
}

You can customize child section.

Add background image in flutter

3 Answers3