[Flutter] freezed の公式 Example を試すチュートリアル

概要

やりたいこと

freezed で Immutable (不変) なクラスを作成する。

題材は、公式の Example。

freezed | Dart Package
Code generation for immutable classes that has a simple syntax/API without compromising on the features.

環境

  • Flutter 2.8.1
  • freezed 1.1.1
  • freezed_annotation 1.1.0
  • build_runner 2.1.7

freezed

freezed はクラスを Immutable にするもの。

freezed | Dart Package
Code generation for immutable classes that has a simple syntax/API without compromising on the features.

Immutable にするべき理由は下記を参照。

【Flutter, Dart】ミュータブルの代償とイミュータブルの代償、そしてfreezed - Qiita
はじめに 本記事は The Mutability Tax をベースにしています。 意訳・抜粋しまくったので翻訳記事と呼ぶには忍びないですが、記述の足らない箇所があれば元の記事を参照してください。 筆者の David Morgan...

freezed チュートリアル

freezed が生成する Immutable なクラスを利用するための流れ。

  • freezed パッケージ群をインストール
  • freezedアノテーションを付与した元ファイルを作成
  • build_runner でコードを自動生成
  • 生成されたコードを利用する

最初に feezed 用のプロジェクト作成。

flutter create example_freezed
cd example_freezed

freezed パッケージ群をインストール

freezed と build_runner は開発段階でのみ必要となため、「dev_dependencies」に設定する。

生成されたコードは freezed_annotation を通して利用できる。

つまりパッケージ管理としては以下となる。

# pubspec.yaml
dependencies:
  freezed_annotation:

dev_dependencies:
  build_runner:
  freezed:

もしくは CLI からインストールする場合は下記。

dev_dependencies に freezed と build_runner を追加。

flutter pub add --dev build_runner
flutter pub add --dev freezed

dependencies に freezed_annotation を追加(json_annotation もここで追加)。

flutter pub add freezed_annotation

freezedアノテーションを付与した元ファイルを作成

main.dart を修正。サンプルだと main.dart だが user.dart や count.dart などのモデルに合った名前が良い。

vi lib/main.dart

今回作成する Union クラスは以下の特徴をもつ。

  • @freezed アノテーションを指定
  • factory MyClass 内に保持する変数を記載
    • a プロパティは String 型で Null を許容
    • b プロパティは Int 型で Null を許容
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';

part 'main.freezed.dart';

@freezed
class MyClass with _$MyClass {
  factory MyClass({String? a, int? b}) = _MyClass;
}

build_runner でコードを自動生成

build_runner 実行。

flutter pub run build_runner build --delete-conflicting-outputs

main.freezed.dart が作成される。

生成されたコードを利用する

part で生成されたファイルを指定する。

part 'main.freezed.dart';

通常通りにクラスを使っていくだけ。

  • copyWith
  • ==
  • toString
  • hashCode

実際に作っていくのはカウンターアプリを題材として次回。

公式 Example を動かす

公式 Example。

freezed | Dart Package
Code generation for immutable classes that has a simple syntax/API without compromising on the features.

JSON_Serializable が必要(freezed_annotation 追加時に json_annotation は追加されている)。

flutter pub add --dev json_serializable

これで下記のように part 指定する。

part 'main.g.dart';

実行すると以下のようにコンソール上に実行結果が出力される。

% flutter run
Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...
Running Xcode build...
 └─Compiling, linking and signing...                        15.8s
Xcode build done.                                           27.5s
flutter: MyClass(a: null, b: 42)
flutter: MyClass(a: 42, b: 42)
flutter: true
flutter: false
flutter: 42
flutter: 42
flutter: Union(value: 42)
flutter: fallthrough
flutter: Union(value: 42)
flutter: Union.loading()
flutter: Union.error(message: Failed to fetch)
flutter: Remi
flutter: London
Syncing files to device iPhone SE (2nd generation)...               43ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

Widget とか作ってるわけじゃないからシミュレータの方には何も出力されない。

参考

freezed | Dart Package
Code generation for immutable classes that has a simple syntax/API without compromising on the features.
上級編7:freezedとstate_notifier|Flutter実践入門 ~環境構築からAndroid/iOS/Webに広告を付けて同時にリリース!!~
【簡単】Flutter freezedパッケージを最小限の機能だけで使用する手順|Worth IT
Flutterの状態管理手法は現在時点(2021年2月時点)で、以下のような組み合わせが流行っています。 Riverpo
【Flutter, Dart】ミュータブルの代償とイミュータブルの代償、そしてfreezed - Qiita
はじめに 本記事は The Mutability Tax をベースにしています。 意訳・抜粋しまくったので翻訳記事と呼ぶには忍びないですが、記述の足らない箇所があれば元の記事を参照してください。 筆者の David Morgan...
[Flutter]immutableなクラスを扱いやすくする機能をコード生成で提供してくれるfreezedを使ってみる | DevelopersIO
Flutterで作ったアプリの構成をProvider + ChangeNotifierからriverpod + state_notifier + flutter_hooks + freezedのに書き換えたいと思っていま …

コメント

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