Fullscreen page with transparent AppBar in Flutter

Share this post

Sometimes one wants to build a completely fullscreen experience with or without an image background. There are 2 ways to do this:

  • Without using an AppBar and use SafeArea to keep our UI elements inside the ‘safe’ area on our page. The downside of this method is that we cannot use actions in our AppBar and also back button and navigation are not done automatically for us (in both cases we would need to create custom ones). This method is simple and works well for example for a landing page, but not so much for a detail page where actions and navigation are very common.
  • Make AppBar transparent. This method requires a bit more complex widget tree but is ideal if we want to keep our AppBar and the behavior that comes with it.

I’m going to explain both methods using a fullscreen background image.

I always use Unsplash for free to use images, because it’s an awesome service. You should definitely give it a try.

Create a full-screen page without AppBar

What we do is that we won’t add an app bar to our Scaffold and make SafeArea the root of our body, to avoid any intrusion by the Operating System. We then remove the bottom and top margin of SafeArea to make it truly fullscreen. Finally, we will use BoxDecoration and NetworkImage to show a fullscreen image.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      // we won't use appBar here
      // appBar: AppBar(
      //   title: Text("Full screen page"),
      //   backgroundColor: Colors.purple,
      // ),
      // might need to set this flag, 
      //resizeToAvoidBottomInset: false,
      body: SafeArea(
        bottom: false,
        top: false,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
              fit: BoxFit.cover,
            ),
          ),
          child: Center(
            child: Text('mrflutter.com',
              style: TextStyle(
                color: Colors.white,
                fontSize: 30,
              ),
            ),
          ),
        ),
      ),
    );
  }

This is how it will look on the device:

Fullscreen page with background image

Create a full-screen page with transparent AppBar

With this method, we will make AppBar part of the body and use Stack and Positioned to put AppBar on top of the rest of the body. This way we can actually make the color of our AppBar transparent, as there’s a widget “under” it. Also, to make it look flat, we remove the elevation from the AppBar.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                    'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Text(
                'mrflutter.com',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                ),
              ),
            ),
          ),
          Positioned(
            child: AppBar(
              title: Text("Transparent AppBar"),
              backgroundColor: Colors.transparent,
              elevation: 0,
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {},
                  tooltip: 'Share',
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

And this is how it will look like:

Fullscreen page with transparent AppBar

As far as I know, these are the 2 way nicest ways of achieving fullscreen pages with or without transparent AppBar. You can see which method suits your needs better.

Join the Conversation

6 Comments

  1. Me again:
    I found another solution, we can set the Scaffold property extendBodyBehindAppBar to true, in appbar the Appbar Widget color to transparent and elevation to 0 (to get rid of shadow) and in my body i use a ListView, at first i have the problem that ListView still respect the space of AppBar then i found we can solve this setting the top padding property of Listview to 0. I got something like this:
    Scaffold(
    backgroundColor: Colors.grey[200],
    extendBodyBehindAppBar: true,
    appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    ),
    body: SafeArea(
    child: ListView(
    padding: EdgeInsets.only(top: 0.0),
    children: []
    I hope this will be useful for someone, its will be great if you added it to your publication, great blog 😀

    1. sorry i missed something, set SafeArea top to false, or no use SafeArea
      Scaffold(
      backgroundColor: Colors.grey[200],
      extendBodyBehindAppBar: true,
      appBar: AppBar(
      elevation: 0,
      backgroundColor: Colors.transparent,
      ),
      body: SafeArea(
      top: false,
      child: ListView(
      padding: EdgeInsets.only(top: 0.0),
      children: []

  2. Your second method doesn’t really work in terms of functionality. It covers the other widgets so you can’t use them, and if placed underneath then it won’t be visible

  3. hi, if you use navigation this solution not work,
    example: Main => PageOne then from PageOne navigate to PageTwo even if you have the same code not work.

Leave a comment

Your email address will not be published. Required fields are marked *