如何在Flutter中使用GetX处理Deep Link以跳转至应用自定义页面？

我来帮你搞定这个需求！默认的Deep Link配置确实只会直接打开应用首页，但只要稍作调整，就能实现从网页跳转回应用时直接展示支付状态这类指定页面，分两步走就行：

1. 确认AndroidManifest配置（保留并优化） #

你现有的Manifest配置已经能接收http/https协议的Deep Link，不过可以加个pathPattern来匹配所有子路径，这样支持带参数的链接（比如支付状态页的路径）：

<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 支持http/https，匹配所有子路径和参数 -->
    <data android:scheme="http" android:host="flutterbooksample.com" android:pathPattern=".*" />
    <data android:scheme="https" android:host="flutterbooksample.com" android:pathPattern=".*"/>
</intent-filter>

这样网页端就能生成类似 https://flutterbooksample.com/payment/status?orderId=123&status=success 的链接，引导用户返回应用。

2. Flutter端解析Deep Link并跳转目标页面 #

接下来要在Flutter里获取这个Deep Link的内容，解析参数后跳转到对应的页面，这里给你两种常用实现方式：

方式一：用Flutter原生API（无路由库） #

如果你的项目没用到第三方路由库，用自带的WidgetsBindingObserver就能搞定：

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

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 应用启动时先检查是否是Deep Link唤起的
    _checkInitialDeepLink();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  // 监听应用从后台被Deep Link唤起的情况
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.resumed) {
      _checkLatestDeepLink();
    }
  }

  // 获取启动应用的初始Deep Link
  Future<void> _checkInitialDeepLink() async {
    try {
      final Uri? link = await getInitialUri();
      if (link != null) {
        _navigateFromDeepLink(link);
      }
    } on PlatformException {
      // 处理异常，比如设备不支持Deep Link
    }
  }

  // 获取最新的唤起链接（应用从后台回来时）
  Future<void> _checkLatestDeepLink() async {
    try {
      final Uri? link = await getUriLinksStream().first;
      if (link != null) {
        _navigateFromDeepLink(link);
      }
    } on PlatformException {
      // 处理异常
    }
  }

  // 解析链接并跳转对应页面
  void _navigateFromDeepLink(Uri link) {
    final path = link.path;
    final queryParams = link.queryParameters;

    // 匹配支付状态页的路径
    if (path == '/payment/status') {
      final orderId = queryParams['orderId'];
      final status = queryParams['status'];
      // 跳转到支付状态页面
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => PaymentStatusPage(
            orderId: orderId,
            status: status,
          ),
        ),
      );
    }
    // 可以添加其他页面的匹配逻辑，比如订单详情页等
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
    );
  }
}

// 示例支付状态页面
class PaymentStatusPage extends StatelessWidget {
  final String? orderId;
  final String? status;

  const PaymentStatusPage({super.key, this.orderId, this.status});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('支付结果')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('订单编号：$orderId'),
            const SizedBox(height: 16),
            Text(
              status == 'success' ? '🎉 支付成功！' : '❌ 支付失败，请重试',
              style: TextStyle(fontSize: 18, color: status == 'success' ? Colors.green : Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

// 应用首页示例
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('应用首页')),
      body: const Center(child: Text('欢迎使用本应用')),
    );
  }
}

方式二：用路由管理库（比如go_router） #

如果你的项目用了go_router，处理起来会更优雅，自动匹配路由：

先在pubspec.yaml添加依赖：

dependencies:
  go_router: ^12.0.0

然后配置路由：

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      title: 'Deep Link Demo',
    );
  }

  final GoRouter _router = GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomePage(),
      ),
      GoRoute(
        path: '/payment/status',
        builder: (context, state) {
          // 从路由参数里获取订单ID和支付状态
          final orderId = state.queryParams['orderId'];
          final status = state.queryParams['status'];
          return PaymentStatusPage(orderId: orderId, status: status);
        },
      ),
    ],
    // 自动处理Deep Link唤起的路由匹配
    redirect: (context, state) => null,
  );
}

// 这里复用上面的PaymentStatusPage和HomePage即可

这样用户点击Deep Link时，go_router会自动匹配到/payment/status路由，直接跳转到支付状态页面，完全不用手动处理跳转逻辑。

测试小技巧 #

可以用adb命令模拟Deep Link唤起应用，快速验证效果：

adb shell am start -W -a android.intent.action.VIEW -d "https://flutterbooksample.com/payment/status?orderId=123&status=success" com.your.app.package

记得把com.your.app.package换成你自己的应用包名哦！

内容的提问来源于stack exchange，提问作者Huseyn