Flutter面包屑导航插件flutterap_breadcrumb的使用

flutterap_breadcrumb

这个包是基于flutterap管理面板扩展的。
Flutterap是最开发者友好的、高度可定制的基于Flutter的管理仪表板模板。
它包含了许多使开发更容易的功能。

购买咖啡支持我们

联系我们

特性

基于flutter导航的面包屑小部件，具有不同的样式。
由于面包屑在Flutter程序中，尤其是在桌面端（没有后退按钮）中具有特殊的重要性，因此Flutterap_breadcrumb是基于flutter的导航系统设计的，并且使用了AppNavigatorObservers在MaterialApp中。
Flutterap_breadcrumb支持从右向左（RTL）和从左到右（LTR）的本地化，并且你可以通过点击面包屑组件来管理每个页面的存在感。
Flutterap_breadcrumb提供了不同的样式，在不同平台上的形状案例图像如下所示。

flutterap_breadcrumb在移动设备上

flutterap_breadcrumb在网页上

flutterap_breadcrumb在桌面上

开始使用

首先，navigatorObservers: [AppNavigatorObserver()]应该添加到主MaterialApp中：

MaterialApp(
  debugShowCheckedModeBanner: false,
  navigatorObservers: [AppNavigatorObserver()], // 添加AppNavigatorObserver作为观察者
  ...
)

使用示例

以下是一个简单的例子，展示了如何使用flutterap_breadcrumb插件：

import 'package:flutter/material.dart';
import 'package:flutterap_breadcrumb/components/fx_app_navigator_observer.dart';
import 'package:flutterap_breadcrumb/fx_flutterap_breadcrumb.dart';

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

class FlutterapBreadcrumbApp extends StatelessWidget {
  const FlutterapBreadcrumbApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl, // 设置文本方向为从右向左
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        navigatorObservers: [AppNavigatorObserver()], // 添加AppNavigatorObserver作为观察者
        // 定义初始路由和其他两个用于测试flutterap_breadcrumb的路由
        routes: {
          '/': (context) => const InitialPage(), // 初始页面
          '/second-page': (context) => const SecondPage(), // 第二个页面
          '/third-page': (context) => const ThirdPage(), // 第三个页面
        },
      ),
    );
  }
}

// 定义InitialPage，该页面使用flutterap_breadcrumb来管理每个页面的存在感，并有一个按钮来导航到SecondPage
class InitialPage extends StatelessWidget {
  const InitialPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutterap Breadcrumb"), // 设置AppBar标题
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start, // 主轴对齐方式为从顶部开始
        crossAxisAlignment: CrossAxisAlignment.start, // 次轴对齐方式为从左边开始
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 20), // 设置内边距
            child: FxBreadCrumbNavigator.shaped( // 使用shaped样式的FxBreadCrumbNavigator
              firstRoute: "Flutterap Breadcrumb", // 设置第一个路由名称
              breadButtonType: BreadButtonType.shaped, // 设置面包屑按钮类型为shaped
            ),
          ),
          TextButton( // 定义一个TextButton用于导航到第二个页面
            onPressed: () {
              Navigator.pushNamed(context, SecondPage.routeName); // 导航到SecondPage
            },
            child: const Text('Navigate to second page'), // 设置按钮文字
          ),
        ],
      ),
    );
  }
}

// 定义SecondPage，该页面使用flutterap_breadcrumb来管理每个页面的存在感，并有一个按钮来导航到ThirdPage
class SecondPage extends StatelessWidget {
  static const routeName = '/second-page'; // 定义路由名称

  const SecondPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second page"), // 设置AppBar标题
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start, // 主轴对齐方式为从顶部开始
        crossAxisAlignment: CrossAxisAlignment.start, // 次轴对齐方式为从左边开始
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 20), // 设置内边距
            child: FxBreadCrumbNavigator.shaped( // 使用shaped样式的FxBreadCrumbNavigator
              firstRoute: "Flutterap Breadcrumb", // 设置第一个路由名称
              breadButtonType: BreadButtonType.shaped, // 设置面包屑按钮类型为shaped
            ),
          ),
          TextButton( // 定义一个TextButton用于导航到第三个页面
            onPressed: () {
              Navigator.pushNamed(context, ThirdPage.routeName); // 导航到ThirdPage
            },
            child: const Text('Navigate to third page'), // 设置按钮文字
          ),
        ],
      ),
    );
  }
}

// 定义ThirdPage，该页面使用flutterap_breadcrumb来管理每个页面的存在感
class ThirdPage extends StatelessWidget {
  static const routeName = '/third-page'; // 定义路由名称

  const ThirdPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Third page"), // 设置AppBar标题
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start, // 主轴对齐方式为从顶部开始
        crossAxisAlignment: CrossAxisAlignment.start, // 次轴对齐方式为从左边开始
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 20), // 设置内边距
            child: FxBreadCrumbNavigator.shaped( // 使用shaped样式的FxBreadCrumbNavigator
              firstRoute: "Flutterap Breadcrumb", // 设置第一个路由名称
              breadButtonType: BreadButtonType.shaped, // 设置面包屑按钮类型为shaped
            ),
          ),
        ],
      ),
    );
  }
}