3 min read

While working on a Flutter app, you may come across a requirement to show an image on full screen. Just like how Whatsapp, Instagram shows the images and videos on stories. The screen is fully covered by the background image and might have some text or other interactive UI elements on top of it. So in this tutorial, we’ll learn how to set background image in Flutter.

Here’s what we’ll cover:

Steps to Set Background Image in Flutter

To set background image in Flutter, you can use the Container widget. The Container widget has a property called decoration. Then you can use the BoxDecoration class to provide the actual image.

Before directly setting the background image in full screen, let’s see the basics of adding a background image.

Steps to set the background image:

Step 1: Add the Container widget.

Step 2: Add the decoration parameter (inside Container) and assign the BoxDecoration class.

Step 3: Add the image parameter (inside BoxDecoration) and assign the DecorationImage class.

Step 4: Add the image parameter (inside DecorationImage) and assign the AssetImage(“YOUR-IMAGE-PATH”).

Step 5: Add the fit parameter (inside DecorationImage) and assign the BoxFit.cover.

Step 6: Run the App.

Example Code:

// 1. Local image
Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"),
        fit: BoxFit.cover),
  ),
  child: // Foreground widget here
)
// 2. Image from Internet
Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage("https://picsum.photos/id/237/200/300"),
        fit: BoxFit.cover),
  ),
  child: // Foreground widget here
)

In the code above, 

  1. Inside the AssetImage, Replace assets/images/cat2.jpg with your own image path.
  2. Inside the NetworkImage, Replace the https://picsum.photos/id/237/200/300 with your own image URL.

Output:

set background image in flutter

Setting Background Image in Full Screen

To set the background image in a fullscreen, you can use simply set the background image to the container and expand it fully to take all the available space.

Here’s how you do that:

  • Add the background image to the container as described here.
  • Add the constraints parameter (inside Container) and assign the BoxConstraints.expand() to it.
  • Run the app.

Example Code:

Container(
  constraints: BoxConstraints.expand(),
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  ),
  child: const Text(
    'Image in fullscreen',
    style: TextStyle(fontSize: 34, color: Colors.red),
  ),
)

Output:

set background image in flutter for fullscreen

Preventing Image Resize

If you have a TextField widget over the background image, then opening a keyboard resizes the image. This doesn’t look good from the UX perspective.

Here’s the problem:

background image resize issue when keyboard opens

And here is how you solve the problem:

  • Take the Container (having the background image) outside of the Scaffold widget.
  • Set the backgroundColor of the Scaffold widget to Colors.transparent.
  • Run the app.

Example Code:

@override
Widget build(BuildContext context) {
  return Container(
    constraints: const BoxConstraints.expand(),
    decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/images/cat2.jpg"), fit: BoxFit.cover)),
    child: Scaffold(
      backgroundColor: Colors.transparent,
      appBar: // Your app bar
      backgroundColor: const Color(0xff6ae792),
      ),
      body: Column(
        children: [
          const TextField(
              decoration:
                  InputDecoration(fillColor: Colors.amber, filled: true)),
        ],
      ),
    ),
  );
}

Output:

prevent background image resize issue when keyboard opens

Thanks for reading!

Conclusion

In this tutorial, we saw how to set background image in Flutter with a practical example. We also learned, how to set the background image to full and prevent it from resizing when on-screen keyboard gets opened.

Would you like to check other interesting Flutter tutorials?