Flutterを学ぶ中で必ず押さえておきたいこと

0. はじめに

Flutterについて、必ず押さえておきたい基本的な知識をまとめてみました。

1. Flutterとは

• Googleが開発しているアプリケーションフレームワーク。
  • 公式：https://flutter.dev/
  • API：https://api.flutter.dev/
  • GitHub：https://github.com/flutter
• クロスプラットフォームなフレームワークのため、**「Android」「iOS」「Web」「Windows」「MacOS」「Linux」**といったアプリケーションを、同じコードで開発することができる。
• Flutter 1.X では、「Web」「Windows」「MacOS」「Linux」はベータ版だったが、Flutter 2.0(2021/3～)から安定版になった。
  • 但し「Windows」「MacOS」「Linux」は安定版といいつつ、品質はベータ版らしい。
  • 2021/10/11時点での最新バージョンは2.5.2。
• Widget(UI部品)が豊富に用意されており、簡単に画面を構築することができる。
• Dart言語を使って実装する。

2. 開発環境

• 「Android Studio」or「XCode」or「VSCode」にFlutter SDKをぶち込んで開発する。
  • SDK：https://flutter.dev/docs/get-started/install
• ホットリロードに対応していて、コードの変更をすぐにエミュレータや実機に反映することができる。
• Flutter用パッケージがたくさん公開されている。使用する場合はpubspec.yamlにパッケージを記載。
  • パッケージ一覧：https://pub.dev/
  • pubspec.yamlのバージョン指定方法：https://qiita.com/youmeee/items/035358cf4293d4315b3f
• flutter doctorというコマンドが便利。環境構築の際、コマンドを叩くと「プラグインがインストールされてないけど？」「Android SDKのバージョンが古いんだけど？」など教えてくれる。メッセージでググれば大体解決方法が載っている。

例：Windowsデスクトップ開発において、VisualStudioにコンポーネントが足りていない場合

PS C:\xxxxx\hogehoge_app> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.0, on Microsoft Windows [Version 10.0.19042.1237], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Enterprise 2019 16.9.4)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK
[√] Android Studio (version 4.0)
[√] VS Code, 64-bit edition (version 1.55.2)
[√] Connected device (3 available)

3. Dart言語

• こちらもGoogleが開発しているクラスベースのオブジェクト指向言語。
  • 公式：https://dart.dev/
  • GitHub：https://github.com/dart-lang
• 2018年、学ぶ価値のないプログラミング言語1位に選ばれた
• しかし、Dart2、Flutterの登場により人気は急上昇。
  • Study of Programming Languages Not to Learn in 2019：https://www.codementor.io/blog/worst-languages-2019-6mvbfg3w9x
• 静的型付け・動的型付けの両方に対応している。
• パフォーマンスが高く、大規模サービスの開発にも適用できる。
• Java・JavaScriptに近い。(そもそも影響を受けた言語がJava・JavaScriptらしい)
  これらの言語に慣れている人にとっては学習コストが低い。
• アクセス修飾子がない。変わりに、変数名やクラス名にアンダースコア(_)を付けることで、privateになる。

4. Widget

• Flutterでは画面を構成するためにWidgetを使う。
  • 公式：https://flutter.dev/docs/development/ui/widgets
  • Flutter:Widget一覧：https://qiita.com/matsukatsu/items/e289e30231fffb1e4502
  • Flutter開発する前に知っておきたい35のWidget一覧：https://qiita.com/coka__01/items/dedb569f6357f1b503fd
• Widgetを親子関係にして構築していくイメージ。ReactのCompornent的な。

4-1. StatelessWidget

• 状態がずっと変化しないWidget。
• 実装がシンプルになる。
• buildメソッドを実装する。

4-2. StatefulWidget

• ユーザーによる操作やデータを受け取った際などに状態が変化する可能性のあるWidget。
• 自分の変数を更新することで、自分自身を再ビルドすることができる。
• 実装が複雑になる分、状態を扱える。
• StatefulWidget.createStateとStateクラスの実装が必要。
• Stateクラスにてbuildメソッドを実装する。

4-3. クラス図

• サンプルアプリのWidgetのクラス関連は以下の図参照。
• はじまりの「Widget」クラスを継承し「StatelessWidget」「StatefulWidget」「RenderObjectWidget」クラスが存在する。
  

（以下のイメージに近い）

5. ファイル構成

ディレクトリ	説明
lib	Dartのソースコードを配置する
android	Androidアプリ用のファイルを配置する
ios	iOSアプリ用のファイルを配置する
web	Webアプリ用のファイルを配置する
windows	Windows用のファイルを配置する
build	ビルドファイルが格納される
test	ユニットテスト用のファイルを配置する

• Dartで実現の難しい機能(デバイス関連など)については、「android」「ios」などのフォルダに、kotlin/swiftのコードを追加し、Dartから呼び出すイメージ。

6. サンプルコードと画面の対応

7. おわりに

これからちょこちょこFlutterアプリ開発していきたいと思います