Chan19 Log
ぜんぶC#FlutterJavaScriptPG基礎設計テストインフラマネジメント効率化人間関係ストレス対策

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

Flutter

0. はじめに

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

1. Flutterとは

  • Googleが開発しているアプリケーションフレームワーク。
  • クロスプラットフォームなフレームワークのため、「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言語を使って実装する。

キャプチャ.PNG

2. 開発環境

  • 「Android Studio」or「XCode」or「VSCode」にFlutter SDKをぶち込んで開発する。
  • ホットリロードに対応していて、コードの変更をすぐにエミュレータや実機に反映することができる。
  • Flutter用パッケージがたくさん公開されている。使用する場合はpubspec.yamlにパッケージを記載。
  • flutter doctorというコマンドが便利。環境構築の際、コマンドを叩くと「プラグインがインストールされてないけど？」「Android SDKのバージョンが古いんだけど？」など教えてくれる。メッセージでググれば大体解決方法が載っている。
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が開発しているクラスベースのオブジェクト指向言語。
  • 2018年、学ぶ価値のないプログラミング言語1位に選ばれた:sob:
  • しかし、Dart2、Flutterの登場により人気は急上昇。
  • 静的型付け・動的型付けの両方に対応している。
  • パフォーマンスが高く、大規模サービスの開発にも適用できる。
  • Java・JavaScriptに近い。(そもそも影響を受けた言語がJava・JavaScriptらしい)
    これらの言語に慣れている人にとっては学習コストが低い。
  • アクセス修飾子がない。変わりに、変数名やクラス名にアンダースコア(_)を付けることで、privateになる。

4. Widget

4-1. StatelessWidget

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

4-2. StatefulWidget

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

4-3. クラス図

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

（以下のイメージに近い:thinking:） kimetsu.png

5. ファイル構成

ディレクトリ 説明
lib Dartのソースコードを配置する
android Androidアプリ用のファイルを配置する
ios iOSアプリ用のファイルを配置する
web Webアプリ用のファイルを配置する
windows Windows用のファイルを配置する
build ビルドファイルが格納される
test ユニットテスト用のファイルを配置する
  • Dartで実現の難しい機能(デバイス関連など)については、「android」「ios」などのフォルダに、kotlin/swiftのコードを追加し、Dartから呼び出すイメージ。

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

ウィジェット.png

7. おわりに

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