【簡素】Flutter × Web3に触れてみる

Flutterはブロックチェーンアプリ開発と相性がいい？

Flutterって暗号通貨ウォレットの開発に良い選択肢かな？

やあ、こんにちは。今までいくつか暗号通貨プロジェクトを手がけてて、Web3.jsとかEthers.jsを使ってたんだけど、モバイルアプリに関してはFlutterがすごく好きでさ。 でも、それが良い選択肢なのかどうかわからないんだよね。 Dartで良いライブラリ（安全なライブラリ）ってある？ UserOperationsも使いたいんだけど、Flutterで今のところできるのかどうかもわからなくて。

Flutterはクロスプラットフォーム開発フレームワークとして人気が高まっていますが、ブロックチェーンや仮想通貨アプリとの相性はどうでしょうか？

本記事では、Flutterで「仮想通貨ウォレット」「NFT」「スマートコントラクトDApp」などを開発できるのかを調査してみました。

※（スマートコントラクトDApp：ブロックチェーン上のプログラム（スマートコントラクト）を直接呼び出して動く分散型アプリ）

Flutterで開発できそうなこと

Web3ライブラリを使ったウォレット接続

• web3dartパッケージでEthereumとやり取り可能
• メタマスクやWalletConnectを使うことでユーザーのウォレットに接続できる

ウォレット接続のフローイメージ

1. WalletConnectでセッション開始（QRコード or Deeplink）
2. ユーザーがウォレットアプリで承認
3. Flutterアプリでアカウントアドレスを受け取り、署名やトランザクション送信が可能に

ブロックチェーンのデータ取得

• RPCエンドポイント（ブロックチェーンと外部アプリをつなぐAPI URL）経由で残高やトランザクション履歴取得
• NFTメタデータの取得と表示

web3dartで残高を取得するコード例

final client = Web3Client('<https://mainnet.infura.io/v3/YOUR_PROJECT_ID>', Client());
final address = EthereumAddress.fromHex('0x...');
final balance = await client.getBalance(address);
print('残高: ${balance.getValueInUnit(EtherUnit.ether)} ETH');

スマートコントラクト呼び出し

• web3dartのcall/sendTransactionでコントラクトの読み書き可能（ブロックチェーン上のプログラム（コントラクト）の関数を実行すること）

開発する上での注意点

パッケージを使うことになるのがほとんどだが安全か見極めなければいけない

Web3関連の機能は、ほとんどが外部パッケージに依存します。

• web3dartやwalletconnect_dartなどの利用は必須に近いが、メンテナンス状況・更新頻度・GitHub Issueの活発度を確認する
• 安全でないパッケージを使うと、秘密鍵や署名データの漏洩リスクがある
• 可能であればソースコードを一読し、依存ライブラリに危険な挙動がないか確認する

特にウォレット接続や署名周りは攻撃対象になりやすいため、信頼できるパッケージを選ぶことが非常に重要です。

近年、暗号資産に対するハッキングはどんどん増えていますので、開発者としても本当に注意しなければいけません。。。

秘密鍵や署名処理は絶対に安全に扱わなければいけない

Flutterアプリ内に秘密鍵をハードコーディングするのはもちろん絶対にいけません。

基本的にはWalletConnectや外部ウォレットを使って、ユーザーが自分の鍵を保持したまま署名できる設計にする必要があります。

ネットワーク遅延とUX

ブロックチェーンのトランザクションは即時確定ではありませんので、「送信中」「承認待ち」などのUIを明示した方が良さそうです。

テストネットを活用する

Mainnetではガス代が発生してしまうので、開発時はGoerliやSepoliaなどのテストネットを使い、無料のテストETHで動作確認しましょう。

※Goerliは停止中みたいです。

まとめ

Flutterでもパッケージを使うことで、ウォレット接続・残高取得・NFT表示・スマートコントラクト呼び出しは可能でした。

ただし、パッケージ選定、鍵管理やセキュリティ、UXには特に注意が必要です。

まだまだ浅い知識ですが、日常的にweb3に触れていって知見を広げられればと思います。

また実際に「ウォレット残高を取得する簡易的なアプリ」をFlutterで作ってみようと思います。

以下参考になりそうです。