Flutter导航管理插件sailor_plus的使用

Flutter导航管理插件sailor_plus的使用

该插件允许你在不使用上下文的情况下通过屏幕和命名路由在Flutter中进行导航。

开始使用

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

dependencies:
  flutter:
    sdk: flutter
  sailor_plus: 1.0.0

接下来，在你的 Dart 文件中导入 sailor_plus.dart。

import 'package:sailor_plus/sailor_plus.dart';

最后，确保在你的 main.dart 文件中设置 navigatorKey。

MaterialApp(
  navigatorKey: Sailor.navigatorKey,
)

屏幕导航

要导航到另一个屏幕或页面，可以使用以下方法：

Sailor.to(AnotherPage());

命名路由导航

要使用命名路由进行导航，可以使用以下方法：

Sailor.toNamed("new_route");

返回上一页

要返回到上一个页面或路由，可以使用以下方法：

Sailor.back();

完整示例Demo

以下是完整的示例代码，展示了如何使用 sailor_plus 插件进行导航。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Sailor Plus Demo",
      navigatorKey: Sailor.navigatorKey, // 添加Sailor导航键
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        centerTitle: true,
        title: const Text("Sailor plus example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("Home screen"),
            const SizedBox(height: 16.0),
            ElevatedButton(
              child: const Text("Go to Screen 2"),
              onPressed: () => Sailor.to(const Screen2()), // 导航到Screen2
            ),
          ],
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        centerTitle: true,
        title: const Text("Another Screen"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("Screen 2"),
            const SizedBox(height: 16.0),
            ElevatedButton(
              child: const Text("Go back"), // 返回上一页
              onPressed: () => Sailor.back(),
            ),
          ],
        ),
      ),
    );
  }
}