Flutterの状態管理手法は現在時点(2021年2月時点)で、以下のような組み合わせが流行っています。
Riverpod + StateNotifier + flutter_hooks + freezed
この中でfreezedはimmutableなクラスを生成するために使用されます。
しかし、freezedは作成時にbuild_runnerを使用したり、様々な事ができるので使い方を検索すると、コード例が複雑になっています。
freezedを使用したことがない人にとっては、手を出しにくい原因となっている気がします。
そのため、この記事ではfreezedに備わった最小限の機能だけを使用して、クラスを作成する手順をご紹介します。
※Null Safety対応版が安定してきたので、本記事の内容もNull Safety版をメインに編集しました。2021/5月時点。
最小限の機能を試して、なんとなく流れを掴んでから他にできる様々なことをやってみるのがfreezedを触るには良いでしょう。
Flutter freezed 最小限の使用手順
以下の手順でfreezedを最小限の機能だけで使用できます。
- freezedパッケージの仕様に必要なパッケージをインストールする
- freezedアノテーションを付与した元ファイルを作成する
- build_runnerを起動する
Null Safety対応版(0.14.0以降)と、それ以前のNull Safety非対応版の両方のやり方を記載しているので、方針に合わせて必要な版の方を読んでください。
(Null Safety対応版)freezedパッケージの仕様に必要なパッケージをインストールする
freezedパッケージを使用するために必要なパッケージをインストールしましょう。
pubspec.ymlファイルに以下の定義を追加します。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.0
freezed_annotation: ^0.14.2
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^2.0.3
freezed: ^0.14.2
dependencies以下には次のパッケージを追加します。
dev_dependencies以下には次のパッケージを追加します。
追加したら、Pub getしましょう。
(Null Safety非対応版)freezedパッケージの仕様に必要なパッケージをインストールする
Null Safetyには対応していないバージョンを使用する場合は以下のバージョンを指定します。
pubspec.ymlファイルに以下の定義を追加します。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.0
freezed_annotation: ^0.12.0
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.11.1
freezed: ^0.12.7
追加したら、Pub getしましょう。
(Null Safety対応版)freezedアノテーションを付与した元ファイルを作成する
今回はcoutnerというクラスを例にします。
counter.dartというファイルを作成してください。
counter.dartファイルの内容は以下の通りにします。
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';
part 'counter.freezed.dart';
@freezed
class Counter with _$Counter {
const Counter._();
const factory Counter({
int? count,
required bool isLoading,
}) = _Counter;
}
ポイントは以下のとおりです。
- freezedアノテーションを付与すること
- partで、counter.freezed.dartを指定すること
- factory Coutnerの中に、Counterクラスに保持したい変数を記述すること
- Null Safety対応のために、必須の変数にはrequiredを、そうでないものには?をつけること
この時点ではエラーが出ていますが、以降の作業(build runner実行)で解消されるので問題ありません。
(Null Safety非対応版)freezedアノテーションを付与した元ファイルを作成する
Null Safetyに対応していないバージョンを使用する場合は以下の通り記載します。
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';
part 'counter.freezed.dart';
@freezed
abstract class Counter with _$Counter {
const Counter._();
const factory Counter({
int count,
bool isLoading,
}) = _Counter;
}
この時点ではエラーが出ていますが、以降の作業(build runner実行)で解消されるので問題ありません。
build_runnerを起動する
ここまで来たらbuild_runnerを起動して完了です。
ターミナルにて以下のコマンドを実行しましょう。
flutter packages pub run build_runner build --delete-conflicting-outputs
counter.freezed.dartファイルが生成されます。
これだけで、完了です。
CounterクラスのgetterやcopyWithを使用することができます。
Flutter freezedを最小限で使う方法まとめ
Flutterでfreezedパッケージを使用する、最小限の手順は以下の通りです。
- freezedパッケージの仕様に必要なパッケージをインストールする
- freezedアノテーションを付与した元ファイルを作成する
- build_runnerを起動する
一見とっつきにくいですが、まずは最小構成で使ってみると、そこまで難しくないことがわかります。
Flutter学習情報
Flutterを勉強するのに最適な参考書は、以下の「基礎から学ぶFlutter」です。
環境構築から、Dart/Flutterの基本/テストやパフォーマンスチューニングまで一通り学ぶことができます。
また、当ブログではFlutterを初心者が学ぶためにオススメな方法を「Flutter を初心者が学ぶおすすめの勉強法！【間違いない動画があります】」という記事で公開していますので、Flutterに興味がある方は是非読んでみてください。
動画学習がしたい！という方にオススメの記事がこちらです。
Flutterの将来性はどうなのか？をまとめた記事はこちらです。
