Flutterの基礎

2022年5月にFlutter3がリリースされました。この記事ではFlutter2について解説しており、最新の情報ではない可能性があります。

この記事はFlutterの環境構築が終わり、Flutterのサンプルアプリを動かすことができた人を対象に書いています。環境は作ったものの、いざ実際にアプリを開発しようとすると、どこから手を付ければよいのかわからないものです。そのような場合は、下に示した事柄をひとつずつ勉強するとFlutterの全体像が見えてきます。それぞれの内容については詳しく説明しませんので、自分でネット検索して勉強してください。

この記事で「サンプルアプリ」とはFlutterに初めから含まれている、ボタンを押すと数字がカウントアップするアレのことです。

Dart言語

FlutterのプログラムはDart言語（バージョン2.xx）によって記述されます。Dart言語の基本について理解しておきましょう。

公式ページ（英語）

非公式ですが日本語でよくまとまっています

JAVAやC言語などの経験があるなら、サンプルアプリのソースコードを参考にして、Dart言語の特徴的なところを理解したら、後は必要に応じて調べれば問題ありません。

サンプルアプリを良く見る

Flutterの環境構築のときに作ったサンプルアプリについて、そのソースコードを１行ずつ理解していくと良い勉強になります。Dart言語の勉強にもなりますし、Flutterの基本的な構造を理解できます。Qiita等でFlutterのサンプルアプリを解説している記事があるので参考にしてください。

Widget

FlutterはWidgetを使ってアプリを構築します。
公式ページ – Widget catalog

どんなWidgetがあるのか、とりあえず知りたい場合はブログ系の記事も参考になります。
Flutter:Widget一覧（Qiitaの記事は参考にはしても、全面的に信用はしないように）

サンプルアプリの中にもWidgetが使われているので、それらをイジってみるとWidgetとは何者か理解できると思います。

Text()に属性を追加して文字のスタイルを変更してみてください。
Column()は複数のWidgetを並べるためのWidgetです。Text()を追加して文字を表示してみてください。
Center()はWidgetを中央に配置します。Center()を消すとどうなるか見てみましょう。

等など、いろいろ試してみてください。

画面遷移

サンプルアプリにはひとつの画面しかありませんでしたが、一般的なアプリはメインの画面の他にサインイン画面や設定画面など複数の画面間を移動しながら動作します。FlutterではNavigatorというクラスを使用して画面遷移を行います。「Flutter Navigator」または「Flutter 画面遷移」のキーワードで解説ページを探して、いくつか試しておいてください。

非同期処理

Flutterで例えば通信を伴う機能を作ろうとしたとき、相手の応答がいつ返ってくるかわからないような状況に遭遇します。そのようなときに非同期処理を使って無駄な待ち時間が発生しないようにするのですが、慣れないうちはとても理解に苦しみます。「Flutter 非同期処理」で検索していくつか解説ページに目を通しておいてください。

状態管理

Flutterの入門書には必ず「StatefulWidgetは状態を持つWidgetです」というような説明がありますが、多くの人は何のことか理解できないと思います。そもそも「状態」と言う言葉がFlutterでは重要な概念で、それを理解せずに「状態を持つ」と説明されてもわかるはずがないのです。また、StatefulWidgetを使う以外にも状態管理を行うライブラリが存在します。「Flutter 状態管理」で検索するとProviderやRiverpod等のライブラリの解説記事が出てくるので見ておくと良いです。

Firebase

FirebaseとはGoogleが提供しているモバイルアプリ開発のためのプラットフォームです。FlutterもGoogleが開発したもので、FlutterとFirebaseの組み合わせは最強だと言われています。アプリを作ろうとするとアカウント管理やデータを置くサーバーが必要になりますが、Firebaseはそのようなことを一手に引き受けてくれるので開発が大変に楽になります。Flutterを本格的に使い始める前に、Firebaseを使ったFlutterのチュートリアルを最低ひとつはやっておいてください。

Firebaseは無料で始められますが、無料枠を使い切ると有償契約に変更しなければなりません。有償契約になっても使用量が少なければ課金されることはなく、個人開発のアプリなら、大抵は開発段階では無料で済ますことが出来ます。とはいえ、アプリが意図しない動きをしたりすると想定以上の通信が発生して課金される恐れはありますので、くれぐれも注意して使ってください。

まとめ

Flutterでアプリを作ろうとしたとき、チュートリアルをいくつかやって勉強すると思いますが、上で説明したようなことが理解できていないと途中で挫折する可能性があります。まず基本的なテクニックについて知識を付けてからチュートリアルに進んでください。