Categories
Uncategorized

Full background image

Learn how show a full screen image with a transparent appbar. No hair pulling involved 🙂

Intro

You know how to add a background image to a webpage using css. In this article i will show you how to add a background image that fills the whole page, along with a transparent app bar. The end result is going to look like this

The app bar contains a leading icon (hamburger menu), the app title and additional actions

The Process

To achieve the look simialr to the image above, we need to do the following

  • Make the app bar transparent
  • Remove the elevation on the app bar to remove the ‘grey’ shadow
  • Wrap the scaffold inside a container so that we can use a BoxDecoration to set background image
  • Set the background color of the scaffold to transparent

Go ahead and create a new sample app if you dont have an existing project to work with. Next open main.dart or a specific page you want to work with


Next replace the “home” section of your material app to look like the code below

MaterialApp(
      title: "Your app title"
      home: SafeArea(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/backdrop.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                centerTitle: true,
                backgroundColor: Colors.transparent,
                elevation: 0.0,
                leading: GestureDetector(
                  child: Icon(Icons.menu),
                  onTap: () {},
                ),
                title: Text(
                  "YOUR AWESOME APP",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                actions: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(right: 10.0),
                    child: GestureDetector(
                      child: Icon(Icons.notifications_active),
                      onTap: () {},
                    ),
                  ),
                ],
                //trailing icon
              ),
              body: Center(
                child: Text("Hello"),
              ),
            ),
          ),
        ),
      ),
    );

Inside BoxDecoration section we specify the fit propert to BoxFit.cover to ensure the image covers the entire container.

Inside the scaffold section note that we also set the background color to transparent, if you omit this line, the background image will overlapped by the scaffold’s background color. Try commenting this line and look at the result.

Summary

We start with a screen that looks like this

This is what we end up with

Code

Download the code here

If you find this code useful please give it a star so that others may find it too 🙂

Sign up to be notified of new posts. I promise i won’t spam you.

Leave a Reply

Your email address will not be published.