CodeZine(コードジン)

特集ページ一覧

FlutterのUIウィジェットを理解するための基本を知ろう!

Flutterで始めるモバイルアプリ開発 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/12/17 11:00

目次

ツールを使ったプログラム構造の把握

 Flutterには、DevToolsというものがあり、このツールを使うことでアプリケーションのUIの構造を知ることができます。

 DevToolsは、コマンドラインからもインストールできますが、Android Studioを使っている場合には、アプリを起動後に、図5(1)の「Open Devtools」ボタンを押すと自動的にインストールから起動までされます。

 また、Android Studio内にもDevToolsと同じ機能がありますが、DevToolsには表2に示す機能が他にもあります。

表2:DevToolsの機能
機能 概要
Flutter Inspector ウィジェットの構造や表示されているウィジェットの識別や実際の表示設定情報を把握する
Timeline view アプリケーションのライムラインごとのパフォーマンスやイベント状況などを把握する
Memory view アプリケーションのメモリの使用状況を把握する
Performance view CPUプロパイルデータから、処理時間やコールツリーなどを利用しパフォーマンス状況を把握する
Network view HTTP(S)や、WebSocketのネットワーク利用状況を把握する
Debugger view ソースレベルでのブレークポイントやステップイン/アウト/オーバーなどの機能を利用しデバッグを実施する
AppSize view 作成されたアプリに含まれるコードや素材などのサイズ情報を把握する

Flutter Inspectorの基本機能

 主に、開発段階は多くの方が利用すると思われるのがFlutter Inspectorで、こちらのツールを使うとウィジェットの構造ツリーや、実際にどこに表示されているかなどを把握することが可能です。サンプルアプリでFlutter Inspectorを表示したのが、図6です。

図6:DevTools(flutter inspector)を利用したUI構造の把握
図6:DevTools(flutter inspector)を利用したUI構造の把握

 画面左には、実行時のUI部品の構造が表示され、右側には各ウィジェットのプロパティ状態が表示されるDetails Treeと、ウィジェットのレイアウト状況を表示するLayout Explorer(図7)があります。

図7:DevTools(flutter inspector)でのウィジェットでのレイアウト状況の把握
図7:DevTools(flutter inspector)でのウィジェットでのレイアウト状況の把握

 この結果を見ると、実際のコードでの構造と非常に似ていることがわかります。このように、Flutterでは実行時のUI部品の構造と、ソース上の構造が多くの部分で同じようになるようになっています。

アプリ上に表示されているウィジェットの状況を把握する

 Flutter Inspectorでは、実際に実行しているアプリ上に状況を表示することも可能です。例えば、画面左上部にある「Select Widget Mode」を有効にした状態でウィジェットツリー上のウィジェットを選択すると、図8のようにアプリ上にどの部品かがわかります。

図8:DevTools(flutter inspector)でのウィジェット選択モード
図8:DevTools(flutter inspector)でのウィジェット選択モード

 また、「Debug Paint」を利用するとウィジェットの余白や整列状況などを図9のように表示することができます。

図9:DevTools(flutter inspector)での表示デバッグモード
図9:DevTools(flutter inspector)での表示デバッグモード

 このようなツールはHTMLを使うWebアプリであれば当たり前と思われるかも知れませんが、動的な部品生成を生成しがちなネイティブコードではソースコードと同じような構造を維持することは難しいです。

 Flutterアプリでは、buildメソッドでUI部品の生成をすべて管理することで、ウィジェットの構造がわかりやすいコードを記述でき、さらにDevToolsのようなツールからもウィジェットの状況が把握がしやすくなっています。そのため、実際に試しながらコーディングしていくスタイルが行いやすくなっています。

まとめ

 Flutterが作成する、雛形のサンプルアリケーションのコードを見ると、フレームワークにありがちな暗黙の管理によって省略されている部分がありません。つまり、mainメソッドから処理を追っていけば、一連の処理の流れが見えるようになっています。そのため、コードを通じて全体的な流れがイメージしにくいといったことが起こりにくいのではないでしょうか。

 また、今回紹介した「ステート」という概念は今まで見たことがない場合には少々難解に思うかも知れません。しかし、Reactでも同じような仕組みになっています。従って、Flutter特有の考え方ではなく、より一般的な考え方にもなっているので、この機会にぜひ、慣れていただければと思います。次回は、自分でコードを記述する際に必要となるDart文法の基本を紹介します。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5