search
LoginSignup
112

More than 1 year has passed since last update.

posted at

updated at

Organization

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

Flutter #1 Advent Calendar 2020の19日目の記事を担当させていただきます。
インドネシアのPT.AQ Business Consulting IndonesiaでFlutterのシニアエンジニアをしております菊池と申します。

本記事はZennで出版しておりますflutter chipsのchapter1の内容になります。
また、現在はチャプター1のみしか記載しておりませんが、今後継続的に更新していく所存ですので、読んで頂くと幸甚です。
image.png

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

image.png

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

ファイル名

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

1-1-2. Debug Paint

debug paint とは

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

image.png

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

ファイル名

1-1-3. slow animation

slow animation とは

Slow down animations to enable visual inspection.

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

image.png

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

slow_animation_debug.gif

1-1-4. Paint Baseline

paint baseline とは

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

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

image.png

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

ファイル名

1-1-5. Dev tool Best Practice

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

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

Screen Shot 2020-12-19 at 1.36.37 PM.png

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

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

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

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

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

ファイル名ファイル名

参考文献

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
112