Fullscreen page with transparent AppBar in Flutter

Once in a while one needs to construct a totally fullscreen experience with or without a picture foundation. There are 2 different ways to do this:

  • Without using an AppBar: also, use SafeArea to keep our UI components inside the ‘protected’ region on our page. The drawback of this technique is that we can’t utilize activities in our AppBar and furthermore back catch and route are not done naturally for us (in the two cases we would have to make custom ones). This technique is basic and functions admirably for instance for a presentation page, yet less for a detail page where activities and route are exceptionally normal.
  • Make AppBar transparent: This strategy requires a touch more unpredictable gadget tree however is ideal on the off chance that we need to keep our AppBar and the conduct that accompanies it.

I will clarify the two techniques utilizing a fullscreen foundation picture.

I generally use Unsplash for nothing to utilize pictures, since it’s a wonderful help. You should check it out.

Make a full-screen page without AppBar

What we do is that we will not add an application bar to our Scaffold and make SafeArea the base of our body, to dodge any interruption by the Operating System. We at that point eliminate the base and top edge of SafeArea to make it genuinely fullscreen. At last, we will utilize BoxDecoration and NetworkImage to show a fullscreen picture.

Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                    'https://images.unsplash.com/photo-1547483238-2cbf881a559f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2134&q=80'),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Text(
                'exerror.com',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                ),
              ),
            ),
          ),
          Positioned(
            child: AppBar(
              title: Center(child: Text("Transparent AppBar")),
              backgroundColor: Colors.transparent,
              elevation: 0,
            ),
          )
        ],
      ),
    );
  }

This is how it will look on the device:

Fullscreen page with transparent AppBar in Flutter

Create a full-screen page with transparent AppBar

With this technique, we will make AppBar part of the body and use Stack and Positioned to put AppBar on top of the remainder of the body. This way we can really make the shade of our AppBar straightforward, as there’s a gadget “under” it. Additionally, to make it look level, we eliminate the rise 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:

Apparently, these are the 2 way most delightful methods of accomplishing fullscreen pages with or without straightforward AppBar. You can see which technique suits your necessities better.

Leave a Comment

x