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

Curved Bottom Navigation Bar with Animations

curved_bottom_navigation_bar 是一个Flutter插件，用于创建现代、带有自定义动画、图标、标签和样式的曲面底部导航栏。它能够通过平滑的过渡和视觉上吸引人的设计来增强用户体验。

功能特性

• 曲面设计：独特的UI曲面导航栏。
• 自定义动画：选中项的平滑缩放、摇动和颜色过渡动画。
• 完全自定义：自定义图标、标签、颜色和字体以匹配应用程序的主题。
• 动画切换：如果喜欢更简单的UI，可以选择禁用动画。
• 灵活的导航：通过提供的API轻松管理屏幕和项目。
• 响应式设计：无缝适应各种屏幕尺寸。

预览

安装

将此插件添加到您的Flutter项目中，首先在 pubspec.yaml 文件中添加依赖：

dependencies:
  curved_bottom_navigation_bar: ^0.0.8

然后运行以下命令以获取依赖：

flutter pub get

在Dart文件中导入插件：

import 'package:curved_bottom_navigation_bar/curved_bottom_navigation_bar.dart';

使用示例

以下是一个完整的示例代码，展示了如何在应用程序中使用 CurvedBottomNavigationBar 小部件：

示例代码

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

/// 应用程序的入口点。
void main() {
  runApp(const MyApp());
}

/// 展示 [CurvedBottomNavigationBar] 的示例应用。
class MyApp extends StatefulWidget {
  /// 创建 [MyApp] 实例。
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  /// 当前选中的导航项索引。
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        /// 主屏幕的主体部分，包含 [CurvedBottomNavigationBar]。
        body: Center(
          child: CurvedBottomNavigationBar(
            /// 选中项的图标和标签颜色。
            selectedItemColor: Colors.red,

            /// 选中项标签的字体样式。
            selectedItemFontStyle: const TextStyle(
              fontWeight: FontWeight.normal,
              color: Colors.red,
            ),

            /// 导航栏的背景颜色。
            backgroundColor: Colors.white,

            /// 未选中项图标的颜色。
            unselectedIconColor: Colors.grey,

            /// 当前选中的项索引。
            selectedIndex: _selectedIndex,

            /// 点击导航项时的回调函数，更新 [selectedIndex] 以显示相应的屏幕。
            onItemTapped: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },

            /// 每个导航项的标签。
            labels: const <String>[
              "Home",
              "Cart",
              "Notifications",
              "Profile"
            ],

            /// 每个导航项对应的图标。
            icons: const <IconData>[
              Icons.home,
              Icons.shopping_cart,
              Icons.notifications,
              Icons.person,
            ],

            /// 每个导航项对应显示的屏幕。
            screens: <Widget>[
              /// "Home" 选项卡的屏幕。
              Container(
                color: Colors.black,
                child: const Center(
                  child: Text(
                    'Home Screen',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),

              /// "Cart" 选项卡的屏幕。
              Container(
                color: Colors.green,
                child: const Center(
                  child: Text(
                    'Cart Screen',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),

              /// "Notifications" 选项卡的屏幕。
              Container(
                color: Colors.orange,
                child: const Center(
                  child: Text(
                    'Notifications Screen',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),

              /// "Profile" 选项卡的屏幕。
              Container(
                color: Colors.yellow,
                child: const Center(
                  child: Text(
                    'Profile Screen',
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}