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

简介

dot_bottom_navigation_bar 包为 Flutter 开发者提供了一个可定制且视觉效果良好的点状底部导航栏。此包允许您轻松地将底部导航栏集成到您的 Flutter 应用程序中，并实现平滑的屏幕切换。

特性

• 可定制图标：可以轻松自定义活动和非活动状态下的图标，支持每个状态的不同图标。
• 灵活的样式：可以调整选中和未选中项目的字体大小，并设置导航栏的背景颜色。
• 无缝集成：简单地集成到 Flutter 应用程序中，兼容各种屏幕尺寸和分辨率。
• 响应式设计：自动适应屏幕尺寸，确保响应式设计。
• 直观交互：通过 onTap 回调处理响应式点击事件，捕捉用户交互。

安装

要使用 dot_bottom_navigation_bar，请在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  dot_bottom_navigation_bar: ^1.0.0

然后运行：

flutter pub get

接着在 Dart 代码中导入该包：

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';

使用方法

DotBottomNavigationBar

一个带有点状图标的可定制底部导航栏。

DotBottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: _onItemTapped,
  items: [
    DotBottomNavigationBarItem(
      icon: Icon(Icons.home),
      activeIcon: Icon(Icons.home, color: Colors.blue),
      /// activeIcon: 是一个 widget，可以根据需要轻松自定义。
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.search),
      activeIcon: Icon(Icons.search, color: Colors.blue),
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      activeIcon: Icon(Icons.favorite, color: Colors.blue),
    ),
    DotBottomNavigationBarItem(
      icon: Icon(Icons.person),
      activeIcon: Icon(Icons.person, color: Colors.blue),
    ),
  ],
)

DotBottomNavigationBarItem

一个表示导航栏中项目的数据类。

DotBottomNavigationBarItem(
  icon: Icon(Icons.home),
  activeIcon: Icon(Icons.home, color: Colors.blue),
  /// activeIcon: 是一个 widget，可以根据需要轻松自定义。
)

完整实现示例

import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';
import 'package:example/view/favourite_view.dart';
import 'package:example/view/home_view.dart';
import 'package:example/view/setting_view.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '点状底部导航栏',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;
  final screen = [
    const HomeView(),
    const FavouriteView(),
    const SettingView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screen[currentIndex],
      bottomNavigationBar: DotBottomNavigationBar(
          selectedFontSize: 0.0,
          unselectedFontSize: 0.0,
          onTap: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          items: [
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.home,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.home_outlined,
                  color: Colors.green,
                )),
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.favorite,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.favorite_border,
                  color: Colors.green,
                )),
            DotBottomNavigationBarItem(
                activeIcon: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.settings,
                      color: Colors.green,
                    ),
                    CircleAvatar(
                      radius: 3,
                      backgroundColor: Colors.green,
                    ),
                  ],
                ),
                icon: const Icon(
                  Icons.settings_outlined,
                  color: Colors.green,
                )),
          ],
          currentIndex: currentIndex),
    );
  }
}

问题

如果您遇到任何问题或有改进建议，请访问 GitHub 仓库 并提交问题或拉取请求。

开发者

Muneeb Shahid