How to set background image for scaffold?

Question

I am trying to set a background Image for a screen which takes about 25% of the screen,positioned at the top. I have tried,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              //Go to Settings Page
            },
          )
        ],
      ),
      body: Container(
        width: double.infinity,
        alignment: Alignment.topCenter,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fitWidth,
            image: AssetImage(
              "assets/images/image1.png",
            ),
          ),
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 200,
                width: 220,
                color: Colors.purple,
              ),
              Container(
                height: 200,
                width: 220,
                color: Colors.pink,
              ),

It does not align itself to top.Is there any easier way? I have tried using stack too. This is what I am getting:

Expected.

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) — Adelina, Apr 26 '21 at 15:12

score 3 · Accepted Answer · answered Apr 26 '21 at 15:38

Take container as the body of the Scaffold and then set your image as background image inside container decoration.

Don't forget to set the width and height for the container like this: width : Mediaquery.of(context).size.width height : Mediaquery.of(context).size.height

How to set background image for scaffold?

1 Answers1