Flutter Solana钱包适配插件solana_wallet_adapter_web的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter Solana钱包适配插件solana_wallet_adapter_web的使用

在本教程中，我们将介绍如何在Flutter项目中使用solana_wallet_adapter_web插件。该插件允许你在Web平台上与Solana钱包进行交互。

开始使用

首先，你需要在你的Flutter项目中添加solana_wallet_adapter_web依赖。打开pubspec.yaml文件，并添加以下内容：

dependencies:
  flutter:
    sdk: flutter
  solana_wallet_adapter_web: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来获取新的依赖。

示例代码

下面是一个简单的示例代码，展示了如何初始化并使用solana_wallet_adapter_web插件。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:solana_wallet_adapter_web/solana_wallet_adapter_web.dart';  // 引入插件

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

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

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

class _MyAppState extends State<MyApp> {
  String _walletAddress = '未连接';
  bool _isConnected = false;

  @override
  void initState() {
    super.initState();
    initWalletAdapter();
  }

  // 初始化钱包适配器
  Future<void> initWalletAdapter() async {
    try {
      // 创建钱包适配器实例
      final adapter = WalletAdapter();

      // 连接钱包
      await adapter.connect();

      // 获取钱包地址
      final address = await adapter.publicKey;
      setState(() {
        _walletAddress = address.toString();
        _isConnected = true;
      });
    } catch (e) {
      print('Error connecting to wallet: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Solana Wallet Adapter 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('钱包地址: $_walletAddress\n'),
              ElevatedButton(
                onPressed: () async {
                  if (_isConnected) {
                    // 断开连接
                    await adapter.disconnect();
                    setState(() {
                      _isConnected = false;
                      _walletAddress = '未连接';
                    });
                  } else {
                    // 重新连接
                    await initWalletAdapter();
                  }
                },
                child: Text(_isConnected ? '断开连接' : '连接钱包'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

  1. 引入插件：

    import 'package:solana_wallet_adapter_web/solana_wallet_adapter_web.dart';

  2. 初始化钱包适配器：

    final adapter = WalletAdapter();
await adapter.connect();

  3. 获取钱包地址：

    final address = await adapter.publicKey;
setState(() {
  _walletAddress = address.toString();
  _isConnected = true;
});

  4. 断开连接：

    await adapter.disconnect();
setState(() {
  _isConnected = false;
  _walletAddress = '未连接';
});

更多关于Flutter Solana钱包适配插件solana_wallet_adapter_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Solana钱包适配插件solana_wallet_adapter_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成Solana钱包适配器插件 solana_wallet_adapter_web 可以帮助你快速实现与Solana区块链的交互。以下是一个简单的代码案例，展示如何在Flutter Web应用中使用该插件。

1. 添加依赖

首先，确保在你的 pubspec.yaml 文件中添加必要的依赖：

dependencies:
  flutter:
    sdk: flutter
  solana_wallet_adapter_core: ^x.y.z  # 替换为最新版本号
  solana_wallet_adapter_web: ^x.y.z    # 替换为最新版本号

运行 flutter pub get 来获取依赖。

2. 配置Web环境

在 web/index.html 中，你可能需要添加一些必要的meta标签和Solana的JavaScript库。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flutter Solana Wallet</title>
    <script src="https://unpkg.com/@solana/wallet-adapter-react/lib/stdlib/index.js"></script>
</head>
<body>
    <script>
        // 初始化Solana钱包适配器（可选，但推荐）
        if (window.solana) {
            window.solana.config.set({
                network: 'devnet',  // 或 'mainnet-beta', 'testnet'
            });
        }
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

3. 使用插件

在你的Flutter应用中，你需要初始化并使用 solana_wallet_adapter_web 插件。以下是一个基本的示例：

import 'package:flutter/material.dart';
import 'package:solana_wallet_adapter_core/solana_wallet_adapter_core.dart';
import 'package:solana_wallet_adapter_web/solana_wallet_adapter_web.dart';

void main() {
  // 初始化Solana钱包适配器
  final webWalletAdapter = SolanaWalletAdapterWeb();

  // 设置监听器（可选）
  webWalletAdapter.onConnect.listen((_) {
    print('Wallet connected!');
  });
  webWalletAdapter.onDisconnect.listen((_) {
    print('Wallet disconnected!');
  });

  // 启动Flutter应用
  runApp(MyApp(walletAdapter: webWalletAdapter));
}

class MyApp extends StatelessWidget {
  final SolanaWalletAdapter walletAdapter;

  MyApp({required this.walletAdapter});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Solana Wallet Adapter Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              if (walletAdapter.connected)
                Text(
                  'Connected as ${walletAdapter.publicKey?.toBase58()}',
                  style: TextStyle(fontSize: 24),
                )
              else
                ElevatedButton(
                  onPressed: () async {
                    try {
                      await walletAdapter.connect();
                    } catch (e) {
                      print('Failed to connect: $e');
                    }
                  },
                  child: Text('Connect Wallet'),
                ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  await walletAdapter.disconnect();
                },
                child: Text('Disconnect Wallet'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 运行应用

确保你的Flutter环境已经配置好支持Web开发，然后运行：

flutter run -d web-server --web-port=8080

这将启动一个本地服务器，并在浏览器中打开你的Flutter Web应用。你应该能够看到连接和解连Solana钱包的按钮，并能够在控制台中看到连接状态的变化。

这个示例展示了如何初始化 solana_wallet_adapter_web 插件，并处理基本的连接和断开连接事件。你可以根据需要进一步扩展功能，比如签名交易、获取账户信息等。

回到顶部