Flutter导航管理插件navigation_tool的使用

Flutter导航管理插件navigation_tool的使用

NavigationTool 是一个全面的Flutter小部件解决方案，旨在无缝处理不同应用程序中的导航，并适应各种屏幕尺寸。该解决方案利用了 NavigationBar 和 NavigationRail 的功能，提供了灵活且强大的导航体验。

功能

  • 确保所有设备（移动设备、网页、Windows 和 macOS 应用）的无缝导航，通过单一统一的包实现。
  • 自动适应各种屏幕尺寸和方向，从智能手机到桌面设备，提供最佳用户体验。
  • 提供广泛的导航栏和导航轨自定义选项，包括颜色、图标和布局，以匹配应用的品牌和风格。
  • 自动调整导航的视觉外观以适应应用的当前主题，确保一致的设计。
  • 兼容流行的河岸状态管理解决方案 Riverpod，以确保整个应用中导航状态的一致性。
  • 此包结合了导航轨和导航栏的功能，并允许进行广泛的自定义以满足您的需求。
  • 为导航工具添加徽章，以提供简洁且信息丰富的用户体验。选择广泛的颜色和类型的徽章，以适合您的应用设计。

开始使用

  1. 在 pubspec.yaml 文件中将 navigation_tool 添加为依赖项。
  2. 使用 ProviderScope 包装您的 MaterialApp，以便使用 flutter_riverpod 状态管理。
  3. 参考提供的详细示例以获取更多信息。

使用方法

简单示例

NavigationTool(
  navigationTabs: NavigationItems().tabs,
  navigationIcons: NavigationItems().navigationIcons,
  labelsNavRail: NavigationItems().labelNavRail
)

/// 列表中的标签
final List<Widget> tabs = [
  const Green(),
  const Orange(),
  const Blue(),
  const Orange(),
];

/// 导航图标列表 / 提供任何小部件
final List<Widget> navigationIcons = [
  const Icon(Icons.home),
  const Icon(Icons.share),
  const Icon(Icons.wifi),
  const Icon(Icons.ac_unit),
];

/// 导航轨标签列表 / 提供任何小部件的列表
final List<Widget> labelNavRail = [
  Text("one"),
  Text("two"),
  Text("three"),
  Text("four"),
];

示例代码

以下是一个完整的示例代码：

import 'package:example/navigation_items.dart';
import 'package:example/provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:navigation_tool/navigation_tool.dart';

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Navigation Mobile Web',
        darkTheme: ThemeData.dark(useMaterial3: true),
        theme: ThemeData(
          useMaterial3: true,
          textButtonTheme: TextButtonThemeData(
            style: TextButton.styleFrom(
              padding: const EdgeInsets.only(left: 8),
            ),
          ),
          iconTheme: const IconThemeData(color: Colors.black),
        ),
        home: const MyApp(),
      ),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final bool isNavRailExpanded = ref.watch(isExpandedNavRail);
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: NavigationTool(
        extendedNavRail: isNavRailExpanded,
        labelTypeNavRail: NavigationRailLabelType.all,
        navigationTabs: NavigationItems().tabs,
        navigationIcons: NavigationItems().navigationIcons,
        labelsNavRail: NavigationItems().labelNavRail,
        labelsBottomNavBar: NavigationItems().labelBottomNav,
        minExtendedWidthNavRail: 200,
        badgeContent: const [
          Text(''),
          Text(''),
          Text('5', style: TextStyle(fontSize: 10)),
          Text('99+', style: TextStyle(fontSize: 10)),
        ],
        badgeShow: const [
          false,
          true,
          true,
          true,
        ],
        badgeColor: [
          Colors.orange.shade800,
          Colors.blueAccent,
          Colors.green.shade800,
          Colors.orange.shade800,
        ],
        appBar: AppBar(
          title: const Text('Navigation Mobile Web'),
          actions: [
            IconButton(
              icon: const Icon(Icons.send),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.info_outline),
              onPressed: () {},
            ),
          ],
        ),
        leadingNavRail: NavigationItems().navigationRailHeader(
          width: (screenWidth >= 1500 && isNavRailExpanded == true) || isNavRailExpanded == true ? 160 : null,
          icon: Icons.format_list_bulleted_rounded,
          onTap: () {
            if (isNavRailExpanded == true) {
              ref.read(isExpandedNavRail.notifier).toggle = false;
            } else {
              ref.read(isExpandedNavRail.notifier).toggle = true;
            }
          },
        ),
        trailingNavRail: NavigationItems().navigationRailTrailing(
          width: (screenWidth >= 1500 && isNavRailExpanded == true) || isNavRailExpanded == true ? 160 : 60,
          children: [
            TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.mail_outline),
              label: (screenWidth <= 1500 && isNavRailExpanded == false) || isNavRailExpanded == false ? const Text('') : const Text('Send Mail'),
            ),
            const SizedBox(height: 5),
            TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.search),
              label: (screenWidth <= 1500 && isNavRailExpanded == false) || isNavRailExpanded == false ? const Text('') : const Text('Search'),
            ),
            const SizedBox(height: 5),
            TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.settings),
              label: (screenWidth <= 1500 && isNavRailExpanded == false) || isNavRailExpanded == false ? const Text('') : const Text('Setting'),
            ),
            const SizedBox(height: 5),
            TextButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.security),
              label: (screenWidth <= 1500 && isNavRailExpanded == false) || isNavRailExpanded == false ? const Text('') : const Text('Security'),
            ),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用navigation_tool插件进行导航管理的一个简单示例。假设你已经添加了navigation_tool依赖到你的pubspec.yaml文件中，并且已经运行了flutter pub get来安装它。

首先，确保你的pubspec.yaml文件中包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  navigation_tool: ^最新版本号 # 请替换为实际的最新版本号

接下来，我们将设置一个基本的导航管理结构。假设我们有两个页面：HomePage和SecondPage。

1. 创建页面

home_page.dart

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

class HomePage extends StatelessWidget {
  final NavigationTool navigationTool;

  HomePage({required this.navigationTool});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => navigationTool.navigateTo(SecondPage.routeName),
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

second_page.dart

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  static const routeName = '/second_page';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('You are on the Second Page!'),
      ),
    );
  }
}

2. 设置导航管理

main.dart

import 'package:flutter/material.dart';
import 'package:navigation_tool/navigation_tool.dart';
import 'home_page.dart';
import 'second_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Tool Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 使用 NavigationTool.builder 来初始化导航管理
      builder: (context, child) {
        return NavigationTool.builder(
          context,
          child: child!,
          routes: {
            HomePage.routeName ?? '/': (context) => HomePage(navigationTool: NavigationTool.of(context)!),
            SecondPage.routeName: (context) => SecondPage(),
          },
          initialRoute: HomePage.routeName ?? '/',
        );
      },
    );
  }
}

注意：在这个示例中，HomePage的routeName属性并没有在代码中显式定义，所以我们使用HomePage.routeName ?? '/'作为默认路由。你可以根据需要为你的页面定义明确的路由名称。

3. 运行应用

现在，你可以运行你的Flutter应用。当你点击Home Page上的按钮时，应用应该会导航到Second Page。

这个示例展示了如何使用navigation_tool插件来管理Flutter应用中的页面导航。根据你的具体需求，你可以进一步自定义和扩展这个基础结构。

回到顶部