Flutter 再入門

はじめに

YUMEMI Flutter Advent Calendar 2023 の7日目の記事です。

著者は、普段は主に Swift/Kotlin でモバイルアプリ開発をしています。Flutter 自体は2019年頃にデモアプリの開発で採用したことがあるものの、その後継続して利用する機会がありませんでした。
直近で、 Flutter で開発されたモバイルアプリを Swift/Kotlin に置き換えるプロジェクトに参加し、既存コードの解析を目的として、Flutter に再入門するきっかけとなりました。

Flutter Kaigi

今年の11月に Flutter Kaigi が開催され参加しました。

基調講演では、Flutter/Dart の8年の歴史について紹介され、成熟している印象を持ちました。開発中はホットリロードで素早く修正を反映し、リリース時はコンパイルされプラットフォームに最適化されたコードで高速に動く。プラットフォーム固有の UI Framework に依存せずに Canvas に直接描画しているので、プラットフォームの影響を受けない。¹
altJS として開発されたので Web との相性も良く、サーバサイド Dart も魅力的に感じました。オール Dart を採用しているところもありました。

開発言語の選択基準

チーム開発においてメンバーの扱う技術領域を選択できるくらいに Swift/Kotlin/Dart は成熟してきていて、チーム構成に合わせて言語選択していけば良いという印象を持ちました。つまり、マルチプラットフォームに対応しているから Dart を選択するというよりは、 Dart を選択した結果、マルチプラットフォームに対応となるイメージです。 Kotlin に注力するなら、 KMP² やサーバサイド Kotlin を採用してその領域を拡げていくような順番です。まず言語を選択して、結果的にその恩恵が拡がっていくのが無理のない選択に感じました。もちろん、そういった恩恵があると予想できるからその言語を選択するという意識は働くと思いますが。

Flutter 再入門

それでは Flutter に再入門していきます。

Dart

まずは開発言語です。

Dart is a client-optimized language for fast apps on any platform

最適化された optimized と高速な fast が Dart と Flutter の特徴をよく表していると感じました。

Dart のコードを試しながら学ぶには DartPad が活用できそうです。
Dart を個別で学ぶよりは、後述の Flutter Playground で試しながら文法など確認したい時にここに戻ってくると良さそうです。

Flutter

次に SDK です。

Build for any screen

Dart も Flutter も any が強力なキーになってそうです。Swift/Kotlin で iOS/Android それぞれにコードを書くことを Dart では意識しないで済むのが魅力です。もっというと Canvas に描画するので、 iOS/Android OS 固有の UI Framework の制約についても気にしなくて良いです。それが any と強調される所以です。

Flutter ドキュメント内に Playground が用意されていてコードを書きながら学べるようになっています。

Flutter のモバイルアプリ開発は Flutter SDK を Dart で開発します。

環境構築 ³

基本的には、公式のドキュメントに従って進めたら構築できます。

ただし、最新版ではなかったり、複数のバージョンを共存させたり、iOS/Android アプリ開発の環境への影響を制御する必要がある場合には、以降の情報を参考にしてみてください。

前提として、 iOS/Android の開発環境ができている状態とし、 Xcode や Android Studio 周りの構築について省略します。

現時点で Flutter 3 が最新⁴ですが、 Flutter 2 の環境も構築できるように配慮しています。既存のプロジェクトはこの内容で動作確認できました。

必要なもの

• Homebrew
• CocoaPods
• Dart SDK
• fvm
• SDKMAN

Homebrew

Homebrew 経由でインストールするもの

• rbenv⁵
• dart⁶
• fvm⁷

rbenv

rbenv 経由でインストールするもの

• Ruby 2.7⁸ or latest(=3.2.2)

Dart SDK

Dart SDK で任意のバージョンを環境に合わせてインストールします。 ↩

fvm

fvm で今回は Flutter 2 をインストールします。

CocoaPods

Flutter で iOS framework の生成に利用します。

SDKMAN

flutter doctor --android-licenses で要求される Java 17 をインストールします。

Unable to find bundled Java version ⁹

Flutter 2 の構築が必要な場合は、シンボリックリンクで解消するのが無難そうです。

Flutter 研修

ゆめみでは Flutter 研修を公開しています。これをやっていこうと思っているところです。

Flutter エンジニアコードチェック課題

ゆめみでは Flutter エンジニアコードチェック課題も公開しています。こちらにも取り組んでみようと思います。

おわりに

明日は @rizumita さんの記事です。

1. 基調講演を聞いた後のツイート https://x.com/ykws__/status/1722804259463499829?s=20 ↩

2. Kotlin Multiplatform https://kotlinlang.org/docs/multiplatform.html ↩

3. 調査した時のスクラップ記事 https://zenn.dev/ykws/scraps/1c99adcac1a57e ↩

4. 執筆時点では 3.16 が最新 https://medium.com/flutter/whats-new-in-flutter-3-16-dba6cb1015d1 ↩

5. Ruby のバージョン管理ツール ↩

6. Dart SDK は任意のバージョンを環境に合わせてインストール可能 ↩

7. Flutter のバージョン管理ツール ↩

8. M1 以降は 2.7 以上が必要なものの macOS にプリインストールされている Ruby は 2.6 のことが多いような ↩

9. Flutter 3 では解消されていそうです ↩