Chapter 02無料公開

Chips1-1: Flutter Inspector

Chips1では、主に開発ツールを用いた便利な機能を紹介します。

1-1. Flutter Inspector

Flutter Inspector とは

Flutter Inspectorは、ウィジェットツリーを視覚化するための強力なツールです。Flutterは、UIコンポーネント(テキスト、ボタン、トグルなど)からレイアウト(センタリング、パディング、行、列など)に至るまで、ウィジェットを中心とした構成要素として使用します。

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

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

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

高さや幅、その他詳細情報まで表示してくれます。

1-1-2. Debug Paint

debug paint とは

Add visual debugging hints to the rendering that display borders, padding, alignment, and spacers.

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

1-1-3. slow animation

slow animation とは

Slow down animations to enable visual inspection.

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

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

1-1-4. Paint Baseline

paint baseline とは

Cause each RenderBox to paint a line at each of its text baselines.

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

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

1-1-5. Dev tool Best Practice

この章ではさらに、便利な機能を紹介します。

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

下記のGif動画は公式ドキュメントにアップされているDev toolを使用した際の操作イメージです。

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

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

例えば、下記のように一つのRowに対して、baselineをcenterからstartに変えてみた例が以下になります。

画像上: baseline = center
画像下: baseline = start