Blur AppBar in Flutter

In this tutorial, we will be adding a blur to an AppBar.

The default AppBar’s appearance will show solid background color with a drop shadow.

In scaffold, set extendBodyBehindAppBar : true . elevation : 0 and backgroundColor: Colors.white.withAlpha(200) in AppBar

Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white.withAlpha(200),
title: const Text(
"Home",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
),

in appBar,

flexibleSpace: ClipRRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            child: Container(
              color: Colors.transparent,
            ),
          ),
        ),