Flutter

【簡単】Flutter freezedパッケージを最小限の機能だけで使用する手順

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に入門するためのオススメ勉強法【間違いない動画があります】Flutter 初心者が勉強する場合に、最高の動画をお伝えします。...

動画学習がしたい!という方にオススメの記事がこちらです。

【Udemy】スマホアプリ作成を学ぶときに受講しておきたい講座3選【Flutter】スマホアプリを初めて作成する場合、何らかの教材を見ながら進めると思います。 私は動画で学習するのが好きで、非常に効率よく学ぶことが...

Flutterの将来性はどうなのか?をまとめた記事はこちらです。

【2021/8 更新】Flutterの将来性をトレンドやGoogleの情勢から分析した結果クロスプラットフォーム開発のフレームワークの中で近年注目されているのが「Flutter」です。 私も2020年の4月頃から注目して...