Flutter 高斯模糊Appbar 和 BottomNavigationBar

【2023-12-28】更新：

今天发现IOS组件 CupertinoNavigationBar 已经实现该效果，但是自定义能力不如该文章，可以参考。

关键词：Flutter、Appbar、BottomNavigationBar、高斯模糊、半透明、模仿IOS

Screenshot_2023-09-15-22-48-35-622_com.example.ap.jpg

<img src="https://upload-images.jianshu.io/upload_images/29320756-ee0a26f472c1bf40.jpg" width="200" alt="效果图"/>

XXX

<img src="https://upload-images.jianshu.io/upload_images/29320756-ee0a26f472c1bf40.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/240" alt="drawing" width="200"/>

android\app\src\main\res\values\styles.xml

<item name="android:windowTranslucentNavigation">true</item>

关键代码：

1.封装一个可以模糊背景的容器

Widget getFilterWidget({
    Widget? child,
    double sigmaX = 12,
    double sigmaY = 12,
    bool hasColor = true, //是否具备颜色
    EdgeInsets? padding,
  }) {
    return ClipRect(
      //背景模糊化
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: sigmaX,
          sigmaY: sigmaY,
        ),
        child: Container(
          color: hasColor ? const Color.fromARGB(100, 255, 255, 255) : null,
          padding: padding,
          child: child,
        ),
      ),
    );
  }

2.封装一个可以获取透明Appbar的函数

PreferredSizeWidget getAppBar({
    double appHeight = 80,
    Widget? title,
    Widget? leading,
    List<Widget>? actions,
    PreferredSize? bottom,
  }) {
    if (actions != null) {
      actions.add(const SizedBox(width: 8));
    }
    return PreferredSize(
      preferredSize: Size(0, appHeight),
      child: getFilterWidget(
        child: AppBar(
          title: title,
          toolbarHeight: appHeight,
          leading: leading,
          leadingWidth: 80,
          actions: actions,
          bottom: bottom,
          elevation: 0,
          surfaceTintColor: Colors.transparent,
          backgroundColor: Colors.transparent,
          systemOverlayStyle: const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light,
          ),
          //bottom: getTitle(),
        ),
      ),
    );
  }

3.使用方法

Scaffold(
      appBar: getAppBar(
        title: const Text(
          "AppBar by Dream.Machine",
          style: TextStyle(color: Colors.white),
        ),
      ),

bottomNavigationBar: getFilterWidget(
        hasColor: false,
        child: BottomNavigationBar(
          elevation: 0,
          onTap: (index) {},
          backgroundColor: const Color.fromARGB(100, 255, 255, 255),
          currentIndex: 0,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: [
            BottomNavigationBarItem(
              activeIcon: SvgPicture.asset(
                "images/frame/frame_chat_active.svg",
                colorFilter:
                    const ColorFilter.mode(Colors.white, BlendMode.srcIn),
              ),
              icon: SvgPicture.asset("images/frame/frame_chat.svg"),
              label: "CHAT",
            ),
            BottomNavigationBarItem(
              activeIcon:
                  SvgPicture.asset("images/frame/frame_contacts_active.svg"),
              icon: SvgPicture.asset(
                "images/frame/frame_contacts.svg",
                colorFilter:
                    const ColorFilter.mode(Colors.white, BlendMode.srcIn),
              ),
              label: "Contacts",
            ),
            BottomNavigationBarItem(
              activeIcon:
                  SvgPicture.asset("images/frame/frame_settings_active.svg"),
              icon: SvgPicture.asset(
                "images/frame/frame_settings.svg",
                colorFilter:
                    const ColorFilter.mode(Colors.white, BlendMode.srcIn),
              ),
              label: "SETTING",
            )
          ],
        ),
      ),