【Flutter】インターフェース開発に強いFlutterで、さらにUI開発を加速させるテクニック

[Flutter #1 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/flutter)の19日目の記事を担当させていただきます。
インドネシアの[PT.AQ Business Consulting Indonesia](https://aqi.co.id/)でFlutterのシニアエンジニアをしております菊池と申します。

本記事はZennで出版しております[flutter chips](https://zenn.dev/tetsukick/books/06ee607e30e243)のchapter1の内容になります。
また、現在はチャプター1のみしか記載しておりませんが、今後継続的に更新していく所存ですので、読んで頂くと幸甚です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/5183aafc-d1d7-534f-f618-031f10790fdc.png)


# 1-1. Flutter Inspector
#### Flutter Inspector とは
[Flutter Inspector](https://flutter.dev/docs/development/tools/devtools/inspector)は、ウィジェットツリーを視覚化するための強力なツールです。Flutterは、UIコンポーネント（テキスト、ボタン、トグルなど）からレイアウト（センタリング、パディング、行、列など）に至るまで、ウィジェットを中心とした構成要素として使用します。

Android Studioでは、右端にひっそりしています。

<img width="20" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/a3d9a55a-34d1-b164-3be3-baa81ba50bda.png">

## 1-1-1. select widget mode
#### select widget mode とは
> Enable this button in order to select a widget on the device to inspect it. For more information, see Inspecting a widget.

chromeの開発ツールのように、ツリー上のウィジェットをクリックして詳細を確認することができます。例えば、関連するキー、サイズ、ウィジェット自体の制約などを見ることができます。
たまに高さが潰れて表示されないとかってときに便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/4be1850b-35e3-5717-f285-4df8e6ef691e.png)


特定のWidgetを指定すると以下のように表示されます。

<img width="250" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/cbfba82b-ecb4-380d-ec4b-ba65afda0f7d.png">


高さや幅、その他詳細情報まで表示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/3a563b93-c558-6fc8-05fa-22af5b9e765b.png)


## 1-1-2. Debug Paint
#### debug paint とは
> Add visual debugging hints to the rendering that display borders, padding, alignment, and spacers.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/8101c109-a821-aa8a-a6de-04a3eb59f6b7.png)


デバッグ用のヒントを追加して、整列、余白、パディングなどのスペースを見やすくします。ウィジェットが画面上に適切に配置されていることを確認するために、ウィジェットの相対的な位置合わせを見たいときに便利です。

<img width="250" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/cf664430-fefa-aabb-e856-5953a012559a.png">

## 1-1-3. slow animation
#### slow animation とは
> Slow down animations to enable visual inspection.

アニメーションを遅くして、遅くなる原因が特定のアニメーションかどうかを検査します。UIに重いものがあって、問題の原因がどのアニメーションかどうかを調べたいときに非常に便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/6e48a9e8-c07d-a8a3-61d2-f1e33963f7a7.png)


実際にslow AnimationをONにして、スワイプ操作をすると以下のようになります。

![slow_animation_debug.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/e3977744-1682-1379-4a2c-adf1b027a82e.gif)


## 1-1-4. Paint Baseline
#### paint baseline とは
> Cause each RenderBox to paint a line at each of its text baselines.

全てのテキストのベースラインを表示してくれます。
アルファベットの下部分が切れてしまうときなどこの機能を用いて確認することが
できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/ba3dcfae-014f-9837-3e5c-47a8274f8a60.png)


実際に私のアプリでPaint BaselineをOnにすると以下のようになります。
アルファベットの基準線が緑、下端がオレンジ色に描画されているのが確認できると思います。

<img width="250" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/2e6bf919-74a4-c48d-b408-7d64683f242f.png">


## 1-1-5. Dev tool Best Practice
この章ではさらに、便利な機能を紹介します。

下記のボタンをタップして表示されるDev toolを使用することでUIを更に柔軟にすばやく調整することができます。

![Screen Shot 2020-12-19 at 1.36.37 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/73c5a7eb-aa17-70f1-3143-49647b5261e2.png)


下記のGif動画は公式ドキュメントにアップされているDev toolを使用した際の操作イメージです。
![](https://flutter.dev/assets/tools/devtools/layout_explorer_errors_and_device-e0e09fb04e514d3bed3db5be9a2911e77262da864e0a01cc1ec4df54cd0167fc.gif)
![](https://flutter.dev/assets/tools/devtools/layout_explorer_main_axis_alignment-71b54567d12328bc5b705239250f79001af7e238010c211a2ae03a8397b8dbac.gif)

実際に私のアプリを使用して試してみると、迷いが生じるRowやColumnの配置方法、Flexの優先度などを動的に試すことができます。

この機能を使用することでUIの作成に強いFlutterプラットフォームの強みを更に活かすことができます。

例えば、下記のように一つのRowに対して、baselineをcenterからstartに変えてみた例が以下になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/f197cb84-e405-642c-2644-e8090a8911e8.png)


画像左: baseline = center
画像右: baseline = start

<img width="250" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/9ac2a4e7-8f8e-e8d1-f14d-0b26a50bc94e.png"><img width="250" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/18774ca9-1488-cb33-4d92-e54f1c8cf0bf.png">

# 参考文献
- [Using the Flutter inspector](https://flutter.dev/docs/development/tools/devtools/inspector)
- Miola, Alberto. Flutter Complete Reference: Create beautiful, fast and native apps for any device