Flutter路由导航增强插件navigator_plus的使用

Flutter路由导航增强插件navigator_plus的使用

插件简介

navigator_plus 是一个帮助管理屏幕之间导航的Flutter插件，它提供了优雅且简便的方式来进行页面跳转和数据传递。

安装步骤

首先，在你的 pubspec.yaml 文件中添加 navigator_plus 作为依赖项：

dependencies:
  ...
  navigator_plus:

示例代码

以下是一个完整的示例，展示了如何使用 navigator_plus 进行页面导航和数据传递。

主程序文件 (main.dart)

import 'package:flutter/material.dart';
import 'package:navigator_plus_example/first_screen.dart';
import 'package:navigator_plus_example/routes.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, // 隐藏调试横幅
        routes: Routes.routes(context), // 设置路由
        home: const FirstScreen() // 初始页面
    );
  }
}

第一个屏幕 (first_screen.dart)

import 'package:flutter/material.dart';
import 'package:navigator_plus/navigator_plus.dart'; // 引入navigator_plus包

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

  void _navigateToSecondScreen(BuildContext context) {
    NavigatorName.to(context, Routes.secondScreen,
      arguments: {'name': 'datadirr'}, // 传递参数
      result: (result) {
        if (result.resultOk) {
          print("Owner: ${result.data['ownerName']}"); // 获取返回结果
        }
      }
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _navigateToSecondScreen(context),
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

路由定义 (routes.dart)

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

class Routes {
  static Map<String, WidgetBuilder> routes(BuildContext context) {
    return {
      '/': (context) => const FirstScreen(),
      '/second': (context) => const SecondScreen(), // 定义第二页的路由
    };
  }

  static const String firstScreen = '/';
  static const String secondScreen = '/second';
}

第二个屏幕 (second_screen.dart)

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final args = NavigatorName.getArguments(context); // 获取传入的参数
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Received name: ${args['name']}'), // 显示传入的参数
            ElevatedButton(
              onPressed: () {
                NavigatorName.back(context, data: {'ownerName': 'John Doe'}); // 返回并传递数据
              },
              child: const Text('Back to First Screen'),
            ),
          ],
        ),
      ),
    );
  }
}