Zenn
🧐

Flutterのすゝめ

2022/09/14に公開
Flutter
初心者
idea

Flutterとは

Googleによって開発されており、単一言語でクロスプラットフォームアプリケーション開発ができるソフトウェア開発キットです。

単一言語とは、ひとつのコードを書くだけでiOSやAndroidなどの開発ができる言語です。iOSでは「SwiftUI」、Androidでは「Kotlin」などコードの書き換えをしなくてもFlutterを書くだけで両方のアプリケーションを構築できます。

everything is a widget

これがFlutterの全てです。
FlutterはWidgetの組み合わせによってできています。
Widgetの扱い方を知っていれば簡単なアプリはすぐに制作できますし、Widgetのことをより深く知ればより難しいアプリも制作できます。

目標とロードマップ

目標がわからなければ何を勉強するか、どういう勉強をすればいいかわからないと思うので、目標とロードマップを設定したいと思います。

Providerと状態管理について理解する

これが目標です。今はProviderと状態管理については知らなくても大丈夫です。

ロードマップ

これだけで十分だと思います。

  1. まずは実際に手を動かしアプリを作ることが2を理解することについての早道だと思います。そのアプリを作成する過程の中でどのようなWidgetがあるのかを知るのがいいと思います。
    おすすめのサイトを少し載せておきます。
    これを見ながら、試行錯誤してアプリを作ってください。
    おすすめはTodoアプリでFirebaseなどは使わずに、アプリの中だけでデータのやり取りをして作成してください。Todoアプリなどはググればすぐに出てきます！

Rallyのカテゴリ
https://gallery.flutter.dev/#/
Material3
https://gallery.flutter.dev/#/

  1. アプリを作る時に気になる点があると思います。それはクラス作成時にStatefulWidgetとStatelessWidgetがあることです。1、を作るときはわからなくて大丈夫です。
    この記事で解説していきます。

  2. 1で作ったアプリをProviderで書き換える。
    Providerにも種類があり、その中で一番おすすめなProviderがRiverpodです。このプロバイダーのサンプルがTodoアプリなので1で作るアプリはTodoアプリがおすすめです。

https://riverpod.dev/ja/docs/providers/state_notifier_provider

  1. この記事では書くかはわかりませんが(記事が長くなるので分けようかと思っています)、公式ドキュメントや記事を読んでください。

  2. あとはFirebaseやパッケージなどを使って好きなアプリを作ってください

ということで、2から記事を書いていきたいと思います！

Widgetの後ろで起こっていること

Widgetを表示させるだけで簡単なアプリは作れますが、
Widgetの値が変わる時やWidgetが表示されるときの後ろではどのような処理が走っているのかを説明したいと思います。
これを理解することによって、のちのProviderを理解するときに役立ちます。
Widgetの主な役割は3つ

  1. UIの設定情報を保持すること(テキストのスタイルなど)
  2. Elementを生成すること
  3. RenderObjectを生成すること(RnderObjectWidgetの場合)

この二つのElementとRenderObjectを理解することこそがWidgetを理解すると言っても過言ではありません。
FlutterはWidgetが全てと言いましたが、UIのレイアウトや描画する際にはWidgetは参照されておらず、RenderObjectを参照しています
WidgetとElement、RenderObjectはこのように生成されます

これらWidgetが連なることで「3つのツリー」と言われる形で生成されていきます。

3つのツリー

flutterのプロジェクトを作成したときにあるサンプルの場合こんな感じになります。細かいところは省いています。

このように、Widgetツリー、Elementツリー,RenderObjectツリーがあり全て役割が違います。

  • Widgetツリー
    上で説明したように、Elementツリー,RenderObjectツリーの生成とテキストスタイルなどの情報を保持することが役割です。あくまでテキストスタイルなどの構成情報を保持しているだけです。

  • Elementツリー
    Elementツリーは「3つのツリー」の中心的な存在で、矢印でつながっている通りお互いを参照しており、ツリー内で唯一先祖や子孫を参照することができます。Elementは初めはWidgetから生成されていますが、生成されたあとはWidgetやRenderObject、Stateなどを全て管理するのが役割です。

  • RenderObjectツリー
    RenderObjectはアプリを描写する際にどのような数字を描写するのか、どんな文字を描写をするのかが役割です。

ここまでで、Widgetから始まりどういうふうにアプリの画面が描写されたかを理解していただけたかと思いますが、次はFlutterのサンプルのCountというデータは誰が持っているのか、ボタンを押したときにどういうふうにツリーが変わるのかについて説明していきたいと思います。

StatefulWidget/setState

StatelessWidgetとStatefulWidgetがありますが言葉の通りStateを持っているか、持っていないかの違いです。このStateというものがCountのデータを持っており、変化することで画面の描写が変わります。
StefuleWidgetやStatelessWidgetを含むとツリーはこのようになります。

新たにMyHomePageElementからStateObjectができています。
これは、Stateに変更があれば即座にWidgetを再生成する必要があるかの確認をするためです。

floatingActionButtonを押し、setStateでStateに変更が走れば、MyHomePage(count:1)になり即座にStateObjectが走ります。StateObjectが走れば、Widgetツリーが新しいWidgetツリーに作り替えられます。この作り替えられたツリーと古いツリーをRenderObjectが見比べ、同じ場合は再描写されず、Widgetツリーのみが更新されます。
このように、StatefulWidgetにすることでStateObjectが作成されsetStateでCountの更新ができます。

間違っていることなどご意見いただけると有難いです...

次回はInheritedWidgetについて書いていこうと思います

そのほか書きたいこと

  • DockerでVScodeやAndroid Studioの環境構築(Flutter)
  • AWSについて
  • AWS & Dockerについて
  • SupaBaseやFirebaseについて
  • Rustについて

Discussion