先日Flutter大学内の勉強会で、「FlutterエンジニアのためのWeb3入門」と題して発表させていただきました。
今記事では、その発表のために作ったデモアプリについて解説していきたいと思います。
サンプルコードは以下です。
Web3とは
ホムペやブログなど一方向発信のWeb1、ソーシャルネットワークのWeb2、ブロックチェーンを使って非中央集権を実現することにより自律や所有を実現するWeb3。という感じで、ここ半年で一気にWeb3という言葉がバズワードとして台頭してきたように感じます。
Web3で起業。BAYCというゴリラ。セーラームーンみたいな日本初のNFTアート。Twitterを見ていると凄いWeb3が流行ってるなと感じます。
乗るしかないビッグウェーブに！ということで、今記事では、Flutterというビッグウェーブにはギリ乗ることができた私がWeb3ビッグウェーブへ片足を突っ込んでいきたいと思います。
FlutterでWeb3ってどうすればいいの？
Flutter大学の勉強会の発表テーマとしてFlutter×web3で何かしたいなと思いました。
いつもはFirebaseやAWSをバックエンドにしてFlutterアプリを作っているところを、ブロックチェーンに変えれば良いのでは？と考えつきますよね。
しかし、ブロックチェーン実装だ！！と言ってもどこからやるんですか？みたいになって無理ですよね。ということで、FlutterのWeb3的なライブラリを調査することにしました。
そうすると、要はMetaMaskというウォレットと接続することがWeb3なんだなということに行きつきました。MetaMaskについての説明は割愛しますが、仮想通貨のウォレットで、今回扱う仮想通貨はイーサリアムです。
ライブラリ調査
「Flutter Web3」と調べてみると、２つのライブラリが見つかりました。
web3dart
まずは、web3dartです。日本語で出てくる以下の２記事はどちらもweb3dartを使っています。
このライブラリはiOS/Androidに対応しているのが魅力でしたが、記事を読んでイメージがつきにくかったことと、アプリからMetamaskにログインして取得は出来ないんだなと思ったので、今回はweb3dartを使うのはやめました。
flutter_web3
日本語記事は見つからなかったのですが、今回はこっちを使いました。
理由としては、FlutterWebで完結していて、chrome拡張にMetaMaskが入っていれば、MetaMask連携ができることが分かったからです。
ネイティブアプリではなくてFlutterWebの実装に限定されてしまいますが、英語で検索しても、iOS/AndroidでMetamaskネイティブアプリにディープリンクで飛ぶ実装が出来た例は見つからなかったので、今できるFlutter×Web3はFlutterWebになっちゃうのかなと思います。
ということで、flutter_web3パッケージを使ってみたいと思います。
Flutterの実装
ここから先は本当に https://pub.dev/packages/flutter_web3 のReadmeをそのままやっただけなのですが、紹介します。
packageのinstall
readmeの通りですが、
flutter pub add flutter_web3
でpubspec.yamlにflutter_web3を追加したのち、index.htmlに以下を追加します。これでjsのイーサリアムとMetaMask接続のライブラリを入れることができるみたいです。
<!--Ethers-->
<script src="https://cdn.ethers.io/lib/ethers-5.4.umd.min.js" type="application/javascript"></script>
<!--Wallet Connect-->
<script src="https://cdn.jsdelivr.net/npm/@walletconnect/web3-provider@1.6.5/dist/umd/index.min.js" type="application/javascript"></script>
Metamask連携
使用するファイルで、以下のようにflutter_web3をインポートし、
import 'package:flutter_web3/flutter_web3.dart';
以下を呼ぶと、MetaMaskに遷移します。
final accounts = await ethereum!.requestAccount();
残高表示
雑ですが、以下みたいな感じで、残高がdouble型で表現できるので、そちらをTextに表示してみてください。
final accounts = await ethereum!.requestAccount();
final firstAccount = accounts.first;
final BigInt balance = await provider!.getBalance(kboyAddress);
final double ethBalance = balance.toDouble() * 1 / 1000000000000000000;
細かい処理は以下のgithubリポジトリ参照です。
イーサリアムを送金
以下の処理で、こんぶさんのMetaMaskのアドレスに送金することができます。みんな送金してみてね。
const konbuAddress = '0x2c0dC4406e90e1E61F57251E6BE01972cDC2C1F9';
final tx = await provider!.getSigner().sendTransaction(
TransactionRequest(
to: konbuAddress,
value: BigInt.from(1000000000000),
),
);
final receipt = await tx.wait();
まとめ
ざっくり解説しましたが、細かい処理は以下のサンプルリポジトリ参照です。
みなさんもFlutterでMetaMask連携してみてください！
Flutter大学の有料プランの人はログインすると以下のページで勉強会の動画を見れます。見たい人はFlutter大学の入会も検討してみてくださいね。😘
Discussion