Flutter底部导航栏插件deluxe_bottom_bar的使用

当然，下面是一个使用 deluxe_bottom_bar 插件在 Flutter 中实现底部导航栏的示例代码。这个插件允许你创建一个具有丰富动画效果的底部导航栏。

首先，你需要在你的 pubspec.yaml 文件中添加 deluxe_bottom_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  deluxe_bottom_bar: ^2.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来获取依赖。

接下来是主要的 Dart 代码，用于实现底部导航栏：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Deluxe Bottom Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  int currentIndex = 0;
  final List<TabData> tabs = [
    TabData(iconData: Icons.home, title: "Home"),
    TabData(iconData: Icons.search, title: "Search"),
    TabData(iconData: Icons.add, title: "Add"),
    TabData(iconData: Icons.favorite, title: "Favorites"),
    TabData(iconData: Icons.profile, title: "Profile"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: DeluxeBottomBar(
        tabs: tabs,
        currentIndex: currentIndex,
        onTabSelectedListener: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        backgroundColor: Colors.white,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        borderRadius: 20.0,
        fixed: true,
        badge: null, // 你可以在这里添加徽章
      ),
      body: IndexedStack(
        index: currentIndex,
        children: [
          HomeBody(),
          SearchBody(),
          AddBody(),
          FavoritesBody(),
          ProfileBody(),
        ],
      ),
    );
  }
}

class TabData {
  final IconData iconData;
  final String title;

  TabData({required this.iconData, required this.title});
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Home Screen"),
    );
  }
}

class SearchBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Search Screen"),
    );
  }
}

class AddBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Add Screen"),
    );
  }
}

class FavoritesBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Favorites Screen"),
    );
  }
}

class ProfileBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Profile Screen"),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，底部导航栏由 DeluxeBottomBar 插件实现。每个导航项都对应一个不同的屏幕（HomeBody, SearchBody, AddBody, FavoritesBody, ProfileBody）。当用户点击不同的导航项时，currentIndex 会更新，并且 IndexedStack 会显示相应的屏幕。

你可以根据需要自定义 DeluxeBottomBar 的属性，比如 backgroundColor, activeColor, inactiveColor, borderRadius 等。你还可以为每个导航项添加徽章（badge）以显示未读消息或其他通知。