FlutterでDApp開発 その1（導入とETH残高表示）

## はじめに

[Flutter](https://flutter.dev/)開発したいしたいと思いつつ年末まで来てしまいました。
ひとりアドベントカレンダーでFlutter開発にチャレンジしてみます。

## 環境

MacOSX 11.6 (Intel Mac)
Flutter 2.8.1
web3dart 2.3.3

## 導入

https://docs.flutter.dev/get-started/install
上記を見つつセットアップする。
Flutter自体はHomebrewでインストールして、`flutter upgrade`で最新バージョンを導入しました。

```shell-session
$ brew update
$ brew install flutter
$ flutter docker
$ flutter upgrade
```

エディタは Android Studio を使いました。
このあたりの設定はドキュメント通りに行えば特にひっかかりはなし。
SDKパスどこやろってなったくらいでしょうか。`fullter doctor -v`コマンドでパス表示されるので、それを見ればすぐわかりました。

https://docs.flutter.dev/get-started/test-drive
この辺りまで進めてサンプルアプリを新しく作っておきます。

![init-flutter-new-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1775/223c9650-065a-0694-608a-c4aed0f8ff3e.png)

## web3まわり

[web3dart](https://pub.dev/packages/web3dart)を使います。

`pubspec.yaml` に`web3dart`パッケージを追加。

```diff
diff --git a/pubspec.yaml b/pubspec.yaml
index bd820a5..1de5307 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -34,6 +34,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
+  web3dart: ^2.3.3

 dev_dependencies:
   flutter_test:
```

Android StudioのUI上にある `Pub get` でパッケージ追加.

```shell-session
$ git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   pubspec.lock
	modified:   pubspec.yaml

no changes added to commit (use "git add" and/or "git commit -a")
```

パッケージインストールされて`pubspec.lock`も更新されます。

あとは `lib/main.dart` おもむろにimportする.

```dart
import 'package:http/http.dart';
import 'package:web3dart/web3dart.dart';
```

で、vitalik.ethアドレスのETHの残高を表示してみる.
以下差分.

```diff
diff --git a/lib/main.dart b/lib/main.dart
index 52906db..ccd27a1 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:http/http.dart'; //You can also import the browser version
+import 'package:http/http.dart';
 import 'package:web3dart/web3dart.dart';

 void main() {
@@ -51,6 +51,19 @@ class MyHomePage extends StatefulWidget {

 class _MyHomePageState extends State<MyHomePage> {
   int _counter = 0;
+  num _balance = 0;
+
+  void getBalance(String address) async {
+    var apiUrl = "http://localhost:8545";
+    var httpClient = new Client();
+    var ethClient = new Web3Client(apiUrl, httpClient);
+
+    EthereumAddress addr = EthereumAddress.fromHex(address);
+    EtherAmount balance = await ethClient.getBalance(addr);
+    print(addr);
+    print(balance);
+    _balance = await balance.getValueInUnit(EtherUnit.ether);
+  }

   void _incrementCounter() {
     setState(() {
@@ -60,6 +73,7 @@ class _MyHomePageState extends State<MyHomePage> {
       // _counter without calling setState(), then the build method would not be
       // called again, and so nothing would appear to happen.
       _counter++;
+      getBalance("0xd8da6bf26964af9d7eed9e03e53415d37aa96045");
     });
   }

@@ -101,7 +115,7 @@ class _MyHomePageState extends State<MyHomePage> {
               'You have clicked the button this many times:',
             ),
             Text(
-              '$_counter',
+              '$_balance, $_counter',
               style: Theme.of(context).textTheme.headline4,
             ),
           ],
```

これでアプリ起動し直すと、以下のような感じで表示されます。

![vitalik-eth-balance.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1775/579f4419-bed5-9caf-c940-02a1aa536181.png)

## おわりに

Flutter、開発体験が良いですね。
dev-kitと組み合わせてもう少し触ってみます。