Zenn
Open10

Flutter入門

Flutter
Yuma ItoYuma Ito

Installation

Flutter

早速書籍とは異なる方法でインストールしてみる。（業務での方法に合わせるため）

fvmというFlutterのバージョンマネージャーを利用する。
https://fvm.app/

すでに Homebrew経由でインストールしていたが、バージョンが最新ではなかったのでバージョンアップした。

brew upgrade fvm

fvm --version
3.0.9

次に最新のstableのFlutterをインストールする。
まずは最新バージョンを確認。

fvm releases | tail
Jan 26 24  │ 3.19.0-0.3.pre
Feb 2 24   │ 3.19.0-0.4.pre
Feb 15 24  │ 3.19.0
Feb 15 24  │ 3.20.0-1.1.pre
--------------------------------------
Feb 21 24  │ 3.19.1            stable
--------------------------------------
--------------------------------------
Feb 22 24  │ 3.20.0-1.2.pre    beta
--------------------------------------

v3.19.1をインストールする。

fvm install 3.19.1

インストールしたバージョンを利用するコマンドを実行。

fvm use 3.19.1

Not a Flutter project. Run this FVM command at the root of a Flutter project or use --force to bypass this.

まだFlutterプロジェクトが作成されていないので、--forceコマンドが必要。

fvm use 3.19.1 --force

これでに設定ファイルが追加された。

.fvm/fvm_config.json
{
  "flutterSdkVersion": "3.19.1",
  "flavors": {}
}

インストールできたかversionを確認する。

fvm flutter --version
Flutter 3.19.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision abb292a07e (2 days ago) • 2024-02-20 14:35:05 -0800
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

VSCode

Flutterの拡張機能を追加。
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

設定ファイルには以下のようにFlutter SDKのパスを設定する。

{
    "dart.flutterSdkPath": ".fvm/flutter_sdk"
}

Android Studio

JetBrains Toolboxを使ってAndroid Studio Jellyfish (2023.3.1 Canary 11) をインストール。

Xcode

App StoreからXcode 15.2 をインストール。

Yuma ItoYuma Ito

flutter doctorで確認

メモを忘れて最初の結果とは異なるが、以下のように出力された。

fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.1, on macOS 14.2.1 23C71 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 15.2)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[!] Android Studio (version unknown)
    ✗ Unable to determine Android Studio version.
[✓] VS Code (version 1.86.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 3 categories.

1つ1つ対処していこう。

Android SDK Command-line Toolsのインストール

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.

まずはAndroid SDKのツールチェーンでエラーになっている。

  1. Android Studioを開く
  2. Preferences > Languages & Frameworks > Android SDK を開く
  3. SDK Toolsのタブを開く
  4. Android SDK Command-line Tools (latest)にチェックを入れる
  5. OKを押す

Android SDKのライセンスエラー

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

指示の通りにコマンドを打つが、fvm経由で実行することに注意。

fvm flutter doctor --android-licenses

後はyを推して承認していく。

CocoaPodsのインストール

CocoaPodsはXcodeプロジェクトでのライブラリマネージャー。

[!] Xcode - develop for iOS and macOS (Xcode 15.2)
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

案内されたページに従ってインストールする。
https://guides.cocoapods.org/using/getting-started.html#installation

sudo gem install cocoapods

Android Studioのバージョンが不明

[!] Android Studio (version unknown)
✗ Unable to determine Android Studio version.

これは原因が不明。
JetBrains Toolboxによってインストールしたのが原因だろうか。

他のツールを使ってAndroid Studioをインストールした際に同じようなエラーが発生しているようだ。
https://github.com/flutter/flutter/issues/140575

最終的な結果

Android Studioのバージョンがわからない点以外は解決できた。

fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.1, on macOS 14.2.1 23C71 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[!] Android Studio (version unknown)
    ✗ Unable to determine Android Studio version.
[✓] VS Code (version 1.86.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 1 category.
Yuma ItoYuma Ito

カウンタアプリの作成

VSCodeのコマンドパレットから

  1. Fulutter: New Projectを選択
  2. Applicationを選択
  3. プロジェクトを配置するフォルダを選択
  4. プロジェクト名を入力
  5. 自動的に必要なファイルが作られる。

そこから「実行＞デバッグの開始＞Flutter」を選択してしばらく経過すると、自動的に作成されたカウンタアプリが起動する。

Yuma ItoYuma Ito

Dart

https://dart.dev/

Dart is a client-optimized language for developing fast apps on any platform. Its goal is to offer the most productive programming language for multi-platform development, paired with a flexible execution runtime platform for app frameworks.

（訳）Dartはどのプラットフォームでも速くアプリを開発するためのクライアントに最適化された言語です。その目標はアプリフレームワーク用の柔軟な実行ランタイムプラットフォームと組み合わせて、マルチプラットフォーム開発のための最も生産的なプログラミング言語を提供することです。

Yuma ItoYuma Ito

material library

https://api.flutter.dev/flutter/material/material-library.html

マテリアルデザインのウィジット用のパッケージ。

Yuma ItoYuma Ito

TextTheme

https://api.flutter.dev/flutter/material/TextTheme-class.html

マテリアルデザインでのテキストテーマが用意されている。

body: Column(
  children: <Widget>[
    Text("Display Large", style: Theme.of(context).textTheme.displayLarge,),
    Text("Display Medium", style: Theme.of(context).textTheme.displayMedium,),
    Text("Display Small", style: Theme.of(context).textTheme.displaySmall,),
    Text("Headline Large", style: Theme.of(context).textTheme.headlineLarge,),
    Text("Headline Medium", style: Theme.of(context).textTheme.headlineMedium,),
    Text("Headline Small", style: Theme.of(context).textTheme.headlineSmall,),
    Text("Title Large", style: Theme.of(context).textTheme.titleLarge,),
    Text("Title Medium", style: Theme.of(context).textTheme.titleMedium,),
    Text("Title Small", style: Theme.of(context).textTheme.titleSmall,),
    Text("Label Large", style: Theme.of(context).textTheme.labelLarge,),
    Text("Label Medium", style: Theme.of(context).textTheme.labelMedium,),
    Text("Label Small", style: Theme.of(context).textTheme.labelSmall,),
    Text("Body Large", style: Theme.of(context).textTheme.bodyLarge,),
    Text("Body Medium", style: Theme.of(context).textTheme.bodyMedium,),
    Text("Body Small", style: Theme.of(context).textTheme.bodySmall,),
  ],
),
Yuma ItoYuma Ito

変数の宣言・初期化

https://dart.dev/language/variables

varを使って宣言すると、初期化する値の型によって変数の型が変わる。

var name = 'Bob';

値の型が変わるのであれば、Object型（もしくは dynamic）で宣言する。

Object name = 'Bob';

特定の型を指定して宣言するには以下。

String name = 'Bob';
Yuma ItoYuma Ito

Null安全

変数の宣言時にその変数がNull安全かどうか指定することができる。

String? name // String or null
String name // String only
Yuma ItoYuma Ito

late修飾子

変数の宣言時にlateをつけることで遅延して初期化することができる。

late String description;

void main(){
  description = 'Feijoada!';
  print(description);
}

以下のようなユースケースで用いる

  • 必要がないかもしれない変数で、初期化のコストが高い場合
  • インスタンス変数の初期化時にthisを参照したい場合

例：

temperature変数が呼ばれない場合、（実行コストが高い）readThermometer関数は呼ばれない。

late String temperature = readThermometer();

initStateメソッド内で初期化される。その際にthis が参照されている。

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 3));
  }