Flutter底部导航点插件dot_navbar的使用

屏幕截图

视频

示例项目

示例Flutter项目

简介

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

特性

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

安装

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  dot_navbar: ^0.0.1
  riverpod: 
  flutter_riverpod: 
  hooks_riverpod: 

然后运行：

flutter pub get

在您的Dart代码中导入该包：

import 'package:dot_navbar/dot_navbar.dart';

使用方法

第一步

此包使用 riverpod 库。

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

点导航栏

一个可定制的导航栏。

• 选中图标颜色：selectedItemColor
• 未选中图标颜色：unselectedItemColor
• 是底部还是顶部：isBottom

DotNavBar(
  dotMenuItems: SharedList.itemList,
  navbarBackgroundColor: Colors.white,
  selectedItemColor: Colors.black,
  unselectedItemColor: Colors.grey,
  isBottom: true,
  isTitleVisible: true,
  dotMenuItems:[
    DotMenuItemModel(
      keyValue: 'home',
      page: Container(
        color: Colors.red,
      ),
      icon: Icons.home,
    ),
    DotMenuItemModel(
      keyValue: 'search',
      page: Container(
        color: Colors.blue,
      ),
      icon: Icons.search,
    ),
    DotMenuItemModel(
      keyValue: 'add',
      page: Container(
        color: Colors.green,
      ),
      icon: Icons.add,
    ),
    DotMenuItemModel(
      keyValue: 'notifications',
      page: Container(
        color: Colors.yellow,
      ),
      icon: Icons.notifications,
    ),
    DotMenuItemModel(
      keyValue: 'profile',
      page: Container(
        color: Colors.purple,
      ),
      icon: Icons.person,
    ),
  ]
),

点菜单项模型

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

DotMenuItemModel(
  keyValue: "Object Key Value",
  page: widgets(),
  icon: Icons.home,
)

完整实现

import 'package:dot_navbar/dot_navbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: []);
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: SharedConstants.appName,
      home: DotNavBar(
        navbarBackgroundColor: Colors.black,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.grey,
        isBottom: true,
        isTitleVisible: false,
        dotMenuItems:[
          DotMenuItemModel(
            keyValue: 'home',
            page: Container(
              color: Colors.red,
            ),
            icon: Icons.home,
          ),
          DotMenuItemModel(
            keyValue: 'search',
            page: Container(
              color: Colors.blue,
            ),
            icon: Icons.search,
          ),
          DotMenuItemModel(
            keyValue: 'add',
            page: Container(
              color: Colors.green,
            ),
            icon: Icons.add,
          ),
          DotMenuItemModel(
            keyValue: 'notifications',
            page: Container(
              color: Colors.yellow,
            ),
            icon: Icons.notifications,
          ),
          DotMenuItemModel(
            keyValue: 'profile',
            page: Container(
              color: Colors.purple,
            ),
            icon: Icons.person,
          ),
        ]
      ),
    );
  }
}

问题

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

开发者

Ali Birkan BAYRAM - LinkedIn