How to make Appbar transparent in Flutter

Appbar is a widget provided in the Scaffold class of the flutter. Here you can add different widgets like navigation, drawer, actions widgets e.t.c. You can also make Appbar transparent. In this entire tutorial, you will learn how to make AppBar transparent in a flutter through steps.

Steps to make AppBar Transparent in Flutter

In this section, you will know all the steps for making a appbar transparent. Let’s know all of them.

Step 1: Create a New Flutter Project

The first step is to create a Flutter Project. In this example, I am creating a Stateful Home Widget that will contain all main widgets with Appbar. However, you can also create a Stateless Widget.

Step 2: Create an App bar

You can create an App bar using the Scaffold constructor lets create them.

AppBar(
          title: Text("Transparent Appbar") ,
        ),

Step 3: Add a background image

Now let’s add a background image for the entire visible area. I am using the image from the URL therefore I will use Image.Network() class for that. You have to use it directly with the body attribute.

Image.network("https://cdn.pixabay.com/photo/2016/06/28/00/13/castle-1483681_960_720.jpg",
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        )

Step 4: Transparent the app bar

Now it’s time to transparent the app bar. To do so you have to define two things.

1. Make extendBodyBehindAppBar to true, It is inside the Scaffold widget.

extendBodyBehindAppBar: true,

2. Set AppBar elevation to 0 to remove any shadow and change the background color to the Colors.transparent

backgroundColor: Colors.transparent,
elevation: 0,

That’s all you have to do. If you run the full code given below then you will see the app bar has become transparent.

Full Code

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: Text("Transparent Appbar"),
        ),
        body: Image.network(
          "https://cdn.pixabay.com/photo/2016/06/28/00/13/castle-1483681_960_720.jpg",
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }
}

void main() {
  runApp(Home());
}

Output

No Transparent Appbar

Transparent Appbar

That’s all for now. These are steps to make an Appbar transparent in Flutter. I hope you have liked this tutorial. If you have any queries then you can contact us for more help.

Flutter Documentation