在flutter中构建玻璃形态底部导航栏

Question

我正在在 dribble.com 上找到的 flutter 中复制一个玻璃形态的底部导航栏，但我离设计还很远，下面的代码片段是我能得到的最接近的。

我已经研究过这个主题，但还没有看到任何简单的提示和技巧来完成这项工作，或者它太复杂了。

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.compass),
            label: 'Explore',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.bolt),
            label: 'Workout',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.zzz),
            label: 'Meditation',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: 0,
        onTap: (index) {
          //
        },
        backgroundColor: const Color(0x00181818).withOpacity(0.9),
        unselectedItemColor: Colors.white.withOpacity(0.5),
        selectedItemColor: const Color(0xFFF6E71D),
        elevation: 0,
      ),
    ));
  }

Answer 1

您的实施看起来不错！

一些提示：

• 如果您使用

  Scaffold

  并将此导航栏分配给

  bottomNavigationBar

  ，请确保在

  extendBody: true

  中设置

  Scaffold

  。这将允许正文内容延伸到导航栏下方，这是玻璃形态设计中的常见做法。
• 要微调玻璃变形效果，您可以调整

  sigmaX

  的

  sigmaY

  和

  ImageFilter.blur

  值，以及

  backgroundColor

  的不透明度。

这是一个包含玻璃形态底部导航栏的完整工作示例：

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: ExampleApp(),
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData.dark(),
    ),
  );
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // Allows body content to extend behind the navigation bar
      appBar: AppBar(title: const Text('Example App')),
      bottomNavigationBar: const GlassmorphismBottomNavigationBar(),
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            // Sample content to show beneath the bottom navigation bar
            Container(
              height: 200,
              width: 50,
              color: Colors.red,
            ),
            const FlutterLogo(size: 200),
            Container(
              height: 200,
              width: 50,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

class GlassmorphismBottomNavigationBar extends StatelessWidget {
  const GlassmorphismBottomNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 35, sigmaY: 35), // Adjust the blur to enhance the glassmorphism effect
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.black.withOpacity(0.3),
          unselectedItemColor: Colors.grey.shade600,
          selectedItemColor: Colors.limeAccent,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.explore),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}