如何实现Phantom钱包与Flutter Web应用的对接？解决无pub.dev包及dart-js interop使用困境

我之前在Flutter Web项目里对接Phantom钱包时也踩过类似的坑，pub.dev确实还没有成熟的官方/第三方包，但用dart:js和dart:js_util完全可以实现对接，大概率是你之前的interop写法有细节没处理对。下面是我验证可行的步骤和代码：

1. 基础依赖导入 #

首先不需要额外安装pub包，直接用Flutter自带的dart:js工具类：

import 'dart:js';
import 'dart:js_util' as js_util;

2. 检查Phantom钱包是否已安装 #

先判断用户浏览器里有没有Phantom钱包，同时确认是Phantom（避免和其他Solana钱包冲突）：

bool isPhantomInstalled() {
  final solana = context['solana'];
  if (solana == null) return false;
  // Phantom钱包会暴露专属的isPhantom属性
  return js_util.getProperty(solana, 'isPhantom') as bool? ?? false;
}

3. 请求连接钱包 #

Phantom的连接调用是异步JS Promise，需要用js_util.promiseToFuture转换为Dart的Future来处理：

Future<String?> connectPhantom() async {
  if (!isPhantomInstalled()) {
    print('Phantom钱包未安装，请先安装');
    return null;
  }
  
  try {
    final solana = context['solana'];
    // 调用Phantom的connect方法，返回包含用户公钥的对象
    final result = await js_util.promiseToFuture(js_util.callMethod(solana, 'connect', []));
    // 提取公钥字符串
    final publicKey = js_util.getProperty(result, 'publicKey') as String;
    return publicKey;
  } catch (e) {
    print('连接失败：${e.toString()}');
    return null;
  }
}

4. 监听钱包断开事件 #

如果用户手动在Phantom里断开连接，你可以通过监听事件及时更新UI：

void setupDisconnectListener(Function() onDisconnect) {
  final solana = context['solana'];
  if (solana == null) return;
  
  // 注册disconnect事件监听
  js_util.callMethod(solana, 'on', ['disconnect', allowInterop(() {
    onDisconnect();
  })]);
}

关键注意事项 #

• 必须在Flutter Web环境下测试：这些代码依赖浏览器的window对象，在桌面/移动模拟器里运行会直接报错。
• 处理用户拒绝连接的场景：上面的catch块会捕获用户点击"拒绝"的错误，你可以在UI上给出友好提示。
• 扩展复杂操作：如果需要签名交易、发送指令等，逻辑和连接一致——调用solana对象的对应JS方法，再用promiseToFuture处理异步即可。

我用这套逻辑在多个Flutter Web项目里成功对接了Phantom，你可以调整代码试试，应该能解决问题。

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