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

简介

dot_bottom_navigation_bar_getx 是一个为 Flutter 开发者提供的可定制且视觉效果出色的带点状样式的底部导航栏插件。它基于 GetX 状态管理库，允许您轻松地将底部导航栏集成到您的 Flutter 应用程序中，并实现流畅的屏幕切换。

特性

易于集成：无缝集成到基于 GetX 的 Flutter 项目中。
可视化定制：支持丰富的自定义选项，以调整外观。
平滑过渡：享受带有动画效果的屏幕切换。
动态屏幕：根据选中的索引动态更改屏幕。
应用栏集成：包含应用栏，提供完整的导航体验。
高效状态管理：利用 GetX 的响应式状态管理功能。

安装

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  dot_bottom_navigation_bar_getx: ^1.0.0

然后运行以下命令安装依赖：

flutter pub get

在 Dart 文件中导入该包：

import 'package:dot_bottom_navigation_bar_getx/dot_bottom_navigation_bar_getx.dart';

完整实现示例

以下是使用 dot_bottom_navigation_bar_getx 插件的完整代码示例：

import 'package:dot_bottom_navigation_bar_getx/dot_bottom_navigation_bar_getx.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dot Bottom Navigation Bar',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const BottomNavigationView(),
    );
  }
}

/// 视图类
class BottomNavigationView extends StatelessWidget {
  const BottomNavigationView({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetBuilder<BottomNavigationViewModel>(
      init: BottomNavigationViewModel(),
      builder: (bottomNavController) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            title: const Text(
              "底部嵌套导航",
              style: TextStyle(
                fontSize: 15,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
            centerTitle: true,
          ),
          backgroundColor: Colors.amber,
          body: bottomNavController.screens[bottomNavController.currentIndex],
          bottomNavigationBar: 

            /// 如果您想移除底部导航栏的溅水效果，则可以使用以下主题。
            Theme(
              data: ThemeData(
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
              ),
              child: BottomNavigationBar(
                elevation: 20,
                type: BottomNavigationBarType.fixed,
                selectedFontSize: 0,
                unselectedFontSize: 0,
                backgroundColor: Colors.white,
                selectedItemColor: Colors.black,
                showUnselectedLabels: false,
                currentIndex: bottomNavController.currentIndex,
                onTap: bottomNavController.changeIndex,
                items: const [
                  BottomNavigationBarItem(
                    activeIcon: Column(
                      children: [
                        Icon(
                          Icons.home,
                          color: Colors.green,
                        ),

                        /// 您可以在这里使用图片：
                        // Image(
                        //   image: AssetImage("assets/images/home.png"),
                        //   color: Colors.green,
                        // ),
                        SizedBox(height: 10),
                        CircleAvatar(
                          backgroundColor: Colors.green,
                          radius: 3,
                        ),
                      ],
                    ),
                    icon: Icon(
                      Icons.home_outlined,
                      color: Colors.green,
                    ),

                    /// 您可以在这里使用图片：
                    // Image(
                    //   image: AssetImage("assets/images/home_outlined.png"),
                    //   color: Colors.green,
                    // ),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    activeIcon: Column(
                      children: [
                        Icon(
                          Icons.favorite,
                          color: Colors.green,
                        ),

                        /// 您可以在这里使用图片：
                        // Image(
                        //   image: AssetImage("assets/images/favorite.png"),
                        //   color: Colors.green,
                        // ),
                        SizedBox(height: 10),
                        CircleAvatar(
                          backgroundColor: Colors.green,
                          radius: 3,
                        ),
                      ],
                    ),
                    icon: Icon(
                      Icons.favorite_outline,
                      color: Colors.green,
                    ),

                    /// 您可以在这里使用图片：
                    // Image(
                    //   image: AssetImage("assets/images/favorite_outline.png"),
                    // ),
                    label: "",
                  ),
                  BottomNavigationBarItem(
                    activeIcon: Column(
                      children: [
                        Icon(
                          Icons.settings,
                          color: Colors.green,
                        ),

                        /// 您可以在这里使用图片：
                        // Image(
                        //   image: AssetImage("assets/images/settings.png"),
                        //   color: Colors.green,
                        // ),
                        SizedBox(height: 10),
                        CircleAvatar(
                          backgroundColor: Colors.green,
                          radius: 3,
                        ),
                      ],
                    ),
                    icon: Icon(
                      Icons.settings_outlined,
                      color: Colors.green,
                    ),

                    /// 您可以在这里使用图片：
                    // Image(
                    //   image: AssetImage("assets/images/settings_outlined.png"),
                    // ),
                    label: "",
                  ),
                ],
              ),
            ),
        );
      },
    );
  }
}

/// 视图模型类
class BottomNavigationViewModel extends GetxController {
  int currentIndex = 0;

  /// 定义屏幕列表
  final screens = [
    /// 您可以在这里调用任何其他类，例如 DataLibrary()
    Center(
      child: Text(
        "主页",
        style: TextStyle(
          fontSize: 15,
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    /// 您可以在这里调用任何其他类，例如 CalendarComponent()
    Center(
      child: Text(
        "收藏页",
        style: TextStyle(
          fontSize: 15,
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    /// 您可以在这里调用任何其他类，例如 DashboardComponent()
    Center(
      child: Text(
        "设置页",
        style: TextStyle(
          fontSize: 15,
          color: Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ];

  /// 改变当前索引的方法
  void changeIndex(int index) {
    currentIndex = index;
    update(); // 通知视图更新
  }
}

更多关于Flutter底部导航栏插件dot_bottom_navigation_bar_getx的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter底部导航栏插件dot_bottom_navigation_bar_getx的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

dot_bottom_navigation_bar_getx 是一个基于 GetX 状态管理的 Flutter 底部导航栏插件。它提供了简单易用的 API 来实现底部导航栏，并且支持自定义图标、颜色、动画等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  dot_bottom_navigation_bar_getx: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

导入包：

import 'package:dot_bottom_navigation_bar_getx/dot_bottom_navigation_bar_getx.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

创建控制器：

你需要创建一个 GetX 控制器来管理底部导航栏的状态。

class BottomNavController extends GetxController {
  var selectedIndex = 0.obs;

  void changeIndex(int index) {
    selectedIndex.value = index;
  }
}

在 main.dart 中使用：

在 main.dart 中，你可以使用 DotBottomNavigationBarGetX 来创建底部导航栏。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final BottomNavController navController = Get.put(BottomNavController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dot Bottom Navigation Bar Example'),
      ),
      body: Obx(() {
        switch (navController.selectedIndex.value) {
          case 0:
            return Center(child: Text('Home Page'));
          case 1:
            return Center(child: Text('Search Page'));
          case 2:
            return Center(child: Text('Profile Page'));
          default:
            return Center(child: Text('Home Page'));
        }
      }),
      bottomNavigationBar: DotBottomNavigationBarGetX(
        items: const [
          DotBottomNavigationBarItem(icon: Icons.home, label: 'Home'),
          DotBottomNavigationBarItem(icon: Icons.search, label: 'Search'),
          DotBottomNavigationBarItem(icon: Icons.person, label: 'Profile'),
        ],
        currentIndex: navController.selectedIndex.value,
        onTap: (index) {
          navController.changeIndex(index);
        },
      ),
    );
  }
}