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

 flutter pub add flutter_web3

  <!--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/[email protected]/dist/umd/index.min.js" type="application/javascript"></script>

import 'package:flutter_web3/flutter_web3.dart';

final accounts = await ethereum!.requestAccount();

final accounts = await ethereum!.requestAccount();
final firstAccount = accounts.first;
final BigInt balance = await provider!.getBalance(kboyAddress);
final double ethBalance = balance.toDouble() * 1 / 1000000000000000000; 

const konbuAddress = '0x2c0dC4406e90e1E61F57251E6BE01972cDC2C1F9';

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