Flutter网页导航覆盖层插件webrailnavoverlay的使用

webrailnavoverlay 是一个用于创建带有导航栏的 Web 基础仪表板的 Flutter 包。它支持覆盖菜单，并简化了构建响应式和可定制的仪表板的过程，适用于管理面板、Web 应用等。

概览

webrailnavoverlay 是一个 Flutter 包，旨在创建一个具有导航栏的 Web 基础仪表板，该导航栏支持覆盖菜单。它简化了构建响应式和可定制的仪表板的过程，非常适合用于管理面板、Web 应用等。

特性

• 可定制的仪表板：轻松构建和管理您的 Web 基础仪表板。
• 侧边栏导航：一个简洁的垂直侧边栏，支持自定义项目。
• 覆盖式悬停菜单：添加悬停时出现的子菜单，以改善导航体验。
• 预建页面：包含首页和设置页面，以及子页面模板。
• 底部支持：集成底部栏以显示额外控件或信息。

开始使用

安装

在您的 pubspec.yaml 文件中添加 webrailnavoverlay：

dependencies:
  webrailnavoverlay: ^0.0.3

然后运行以下命令安装包：

flutter pub get

使用

在您的 Dart 文件中导入包：

import 'package:webrailnavoverlay/webrailnavoverlay.dart';

示例

以下是一个简单的示例，展示如何在 Flutter 项目中使用 webrailnavoverlay：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DashboardPage(
        pages: [
          const HomePage(),
          const SettingsPage(),
          const SettingsSubPage1(),
          const SettingsSubPage2(),
        ],
        railNavbarMenuItemsList: [
          RailNavbarMenuItem(
            name: 'Home',
            iconPath: Icons.home,
            index: 0,
          ),
          RailNavbarMenuItem(
            name: 'Settings',
            iconPath: Icons.settings,
            index: 1,
            hoverItems: [
              // 添加多个项
              HoverItemConfig(
                itemName: 'Sub-Settings 1',
                onTap: () {
                  // 处理子设置 1 点击事件
                },
                itemRoute: const SettingsSubPage1(), // 使用您的子屏幕
              ),
              HoverItemConfig(
                itemName: 'Sub-Settings 2',
                onTap: () {
                  // 处理子设置 2 点击事件
                },
                itemRoute: const SettingsSubPage2(), // 使用您的子屏幕
              ),
            ],
          ),
        ],
      ),
    );
  }
}