[Flutter] デモアプリ(カウンター)に含まれる基本ウィジェットと便利ツールの解説

初期起動時のコメントを和訳して少し解説を加えただけ。

でも結構ポイントがギュッと詰まってて、これからFlutter始める人は知っておいた方がいいだろなって思ったので記事にしてみました。

例えば、わたしはFlutter Inspectorの存在を知らずに色とか変えて一生懸命レイアウトの確認してましたw

 

ちなみに、私はコミュ障ぼっちでフリーランスのエンジニアをやっています、34歳です。私のプロフィールに興味を持ってくださった方は、ページ下部の筆者紹介、Twitter(@suekiaoi)やInstagram(@aoi.sueki)などからご確認いただければと思います。

また、ぼっち社会人向けに1年かけて書いていたコラムが書籍化されました。ぜひ一度、お手にとって読んでみてください。

友達0のコミュ障が「一人」で稼げるようになったぼっち仕事術 (アルファポリス)

 

 

StatefulWidget とは

Statefulなウィジェットとは、外観に影響を与えるフィールドを含む State オブジェクトを含むウィジェットのこと。例えば、タイトルやテーマカラーなど、親(上位ウィジェット)で定義したオブジェクトを受け取ることができます。

また、State の build メソッドで使われる値を保持することもできます。

 

setState() メソッド

setStateの呼び出しは、この状態で何かが変更されたことをFlutterフレームワークに通知します。カウンターなどで、ボタンを押された回数に応じてカウンターの数値を更新したいときは、カウント関数の中にsetState()しないといけません。

setStateを呼び出すことで、buildメソッドが再実行され、更新された値が表示に反映されます。 setStateを呼び出さずにカウント変数を更新しても、buildメソッドは再度呼び出されないためアプリの見た目は何も変化が起きていないように見えます。

 

build() メソッド

build()メソッドは、簡単にいうと、setState() が呼び出されるたびに再実行されるもの。

Flutterフレームワークは、ビルドメソッドの再実行を高速化するように最適化されているため、ウィジェットのインスタンスを個別に変更する必要はなく、更新が必要なものをすべて再構築できます。

 

Flutter Inspector でレイアウトを確認

例えば、Column ウィジェットという列のレイアウトウィジェットがあります。 Columnは、子ウィジェットのリストを垂直に配置します。デフォルトでは、子を水平方向に合わせてサイズを調整し、親と同じ高さにしようとします。

これを確認したい時は、「デバッグペイント」が便利です。

デバックペイントは、コンソールで「p」を押すか、AndroidStudioのFlutterInspectorから「ToggleDebugPaint」アクションを選択するか、Visual Studio Codeの「ToggleDebugPaint」コマンドを選択すると表示されます。

Android Studioだとこんな感じ。(画面右側)

↓拡大

ここで、各ウィジェットのワイヤーフレームを確認できます。Columnウィジェットには、ウィジェットサイズと子の配置方法を制御するためのプロパティがあります。 例えば、mainAxisAlignmentを使用すると、子を垂直方向の中央に配置できます。いわゆる中央揃えですね。

 

今日は以上!

 

ここまで読んでいただき、ありがとうございました!

参考になったよ、という方はTwitter(@suekiaoi)やInstagram(@aoi.sueki)などでフォローしていただけると励みになります。

不明点・ご質問などありましたらわたしのTwitter DM(@suekiaoi)にお気軽にどうぞ!

それでは!

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。