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のバージョンが古いんだけど?」など教えてくれる。メッセージでググれば大体解決方法が載っている。
例: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 forAndroid devices (Android SDK version 30.0.2)
[√] Chrome - develop forthe web
[!] Visual Studio - develop forWindows (Visual Studio Enterprise 2019 16.9.4)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer forthe "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, installthe latest
        C++ CMake tools forWindows
        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.createStateStateクラスの実装が必要。
  • Stateクラスにてbuildメソッドを実装する。

4-3. クラス図

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

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

5. ファイル構成

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

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

ウィジェット.png

7. おわりに

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

コメント

タイトルとURLをコピーしました