How to make the AppBar transparent

To make the AppBar transparent is quite easy. All we need to do is tweak the back ground color property of the AppBar.

Now, question is what is the role of back ground color in an AppBar?

It basically fills the fill color to use for an app bar’s Material.

If we don’t supply any value, it uses the AppBarTheme.backgroundColor, which is blue by default.

That’s the reason, when we create a fresh Flutter Application, it comes up with a blue AppBar.

To make it happen, the AppBar also uses the theme’s ColorScheme.primary, if the overall theme’s brightness is Brightness.light.

However, if the theme’s brightness is Brightness.dark, then it uses the ColorScheme.surface. 

When we want to make the AppBar scrollable, we need to overlaps the AppBar.

And to do that, we need to use the transparent property, or the withOpacity property of the color class.

Let’s try the transparent property and see the effect first.

As a result, the image’s color overlaps the AppBar completely.

However, in case of opacity, we can control how much opacity we can use.

Finally, the time has come to see the full code where we’ve defined such properties.

import 'dart:html';

import 'package:flutter/material.dart';
import '/model/all_tab_bars.dart';

//import 'all_pages.dart';

/// adding transparent appbar
/// modifying build icons

class DashBoardHome extends StatelessWidget {
  const DashBoardHome({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //var size = MediaQuery.of(context).size;
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          title: const Text('Testing Transparency'),
          centerTitle: true,
          leading: const BackButton(
            color: Colors.red,
          ),
          actions: [
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.holiday_village),
            )
          ],
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(20),
            ),
          ),
          //backgroundColor: Colors.transparent,
          backgroundColor: Colors.white.withOpacity(0.19),
          elevation: 0,
        ),
        body: Image.network(
          'https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256_960_720.jpg',
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }

  IconButton buildIcons(Icon icon) {
    return IconButton(
      onPressed: () {},
      icon: icon,
    );
  }
}

In the above code, only this line helps us to get the effect.

//backgroundColor: Colors.transparent,
backgroundColor: Colors.white.withOpacity(0.19),

Use any one of them, and make your AppBar transparent.

For the full code snippet please visit the respective GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter