🌐

FlutterエンジニアのためのWeb3入門

2022/04/30に公開

先日Flutter大学内の勉強会で、「FlutterエンジニアのためのWeb3入門」と題して発表させていただきました。

今記事では、その発表のために作ったデモアプリについて解説していきたいと思います。

サンプルコードは以下です。

https://github.com/kboy-silvergym/flutter_web3_sample

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」と調べてみると、2つのライブラリが見つかりました。

web3dart

https://pub.dev/packages/web3dart

まずは、web3dartです。日本語で出てくる以下の2記事はどちらもweb3dartを使っています。

このライブラリはiOS/Androidに対応しているのが魅力でしたが、記事を読んでイメージがつきにくかったことと、アプリからMetamaskにログインして取得は出来ないんだなと思ったので、今回はweb3dartを使うのはやめました。

https://qiita.com/hhatto/items/169523665daeaf95516a

https://qiita.com/oggata/items/ecb21d4262e947da191b

flutter_web3

日本語記事は見つからなかったのですが、今回はこっちを使いました。

理由としては、FlutterWebで完結していて、chrome拡張にMetaMaskが入っていれば、MetaMask連携ができることが分かったからです。

ネイティブアプリではなくてFlutterWebの実装に限定されてしまいますが、英語で検索しても、iOS/AndroidでMetamaskネイティブアプリにディープリンクで飛ぶ実装が出来た例は見つからなかったので、今できるFlutter×Web3はFlutterWebになっちゃうのかなと思います。

https://pub.dev/packages/flutter_web3

ということで、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リポジトリ参照です。

https://github.com/kboy-silvergym/flutter_web3_sample

イーサリアムを送金

以下の処理で、こんぶさんのMetaMaskのアドレスに送金することができます。みんな送金してみてね。

const konbuAddress = '0x2c0dC4406e90e1E61F57251E6BE01972cDC2C1F9';

final tx = await provider!.getSigner().sendTransaction(
  TransactionRequest(
    to: konbuAddress,
    value: BigInt.from(1000000000000),
  ),
);
final receipt = await tx.wait();

まとめ

ざっくり解説しましたが、細かい処理は以下のサンプルリポジトリ参照です。

https://github.com/kboy-silvergym/flutter_web3_sample

みなさんもFlutterでMetaMask連携してみてください!

Flutter大学の有料プランの人はログインすると以下のページで勉強会の動画を見れます。見たい人はFlutter大学の入会も検討してみてくださいね。😘

https://flutteruniv.com/materials/lecture_videos/4oea9DloHes9xZdgErG9

Flutter大学

Discussion