Flutter底部模糊栏插件bottom_blur_bar的使用

预览

基本用法

首先，在你的项目文件中导入该插件：

import 'package:bottom_blur_bar/bottom_blur_bar.dart';

然后，像这样在你的应用中添加底部模糊栏：

bottomNavigationBar: BlurNavbar(
  onTap: (idx) => setState(() {
    _idx = idx;
    debugPrint('$idx');
  }),
  items: [
    BlurNavbarItem(icon: Icon(Icons.home, color: color, size: 24), title: "SEARCH"),
    BlurNavbarItem(icon: Icon(Icons.search, color: color, size: 24), title: "SEARCH"),
    BlurNavbarItem(icon: Icon(Icons.notifications, color: color, size: 24), title: "NOTIFICATIONS"),
    BlurNavbarItem(icon: Icon(Icons.local_library_rounded, color: color, size: 24), title: "LIBRARY")
  ],
  currentIndex: _idx,
  selectedColor: Colors.cyanAccent,
)

必需参数

可选参数

许可证

bottom_blur_bar 是 MIT-licensed。

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用bottom_blur_bar插件：

import 'package:flutter/material.dart';
import 'package:bottom_blur_bar/bottom_blur_bar.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: Theme.of(context).textTheme.apply(
              bodyColor: Colors.white,
              displayColor: Colors.white,
            ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _idx = 0;

  @override
  Widget build(BuildContext context) {
    final color = MediaQuery.of(context).platformBrightness == Brightness.dark
        ? Colors.white
        : Colors.black87;

    return Scaffold(
      backgroundColor: Colors.white,
      extendBody: true,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: const Text("Blur Bottom Bar", style: TextStyle(color: Colors.black87)),
      ),
      body: ListView.builder(
          itemCount: 200,
          itemBuilder: (ctx, idx) {
            return Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 200,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [Colors.deepPurple, Colors.pink.shade300])),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text(
                        '当前索引:',
                      ),
                      Text(
                        '$_idx',
                        style: Theme.of(context).textTheme.headlineLarge,
                      ),
                    ],
                  ),
                ),
              ),
            );
          }),
      bottomNavigationBar: BlurNavbar(
        onTap: (idx) => setState(() {
          _idx = idx;
          debugPrint('$idx');
        }),
        items: [
          BlurNavbarItem(icon: Icon(Icons.home, color: color, size: 24), title: "SEARCH"),
          BlurNavbarItem(icon: Icon(Icons.search, color: color, size: 24), title: "SEARCH"),
          BlurNavbarItem(icon: Icon(Icons.notifications, color: color, size: 24), title: "NOTIFICATIONS"),
          BlurNavbarItem(icon: Icon(Icons.local_library_rounded, color: color, size: 24), title: "LIBRARY")
        ],
        currentIndex: _idx,
        selectedColor: Colors.cyanAccent,
      ),
    );
  }
}