Flutterの初期コードをRiverpod + Freezed + ドメイン駆動設計(DDD) でリファクタする

本記事の実装で以下のRiverpodのアンチパターンを踏んでいるため、あくまで参考程度としてください。

• 再描画範囲を限定していない（本記事の実装ではScaffoldを丸ごと再描画している）

対象読者

• Flutterの基礎知識がある
• Riverpod, Freezedを使ったことがない
• ドメイン駆動設計（DDD）でのアプリ開発がない

本記事の目的

本記事では各技術の説明を最低限にし、実際に手を動かすことでRiverpod+Freezed+DDDのミニマムな開発が体験できるように執筆しています。

前提条件

• Flutterプロジェクトを作成していること

パッケージのインストール

Riverpod

以下を参考にパッケージをインストールします

はじめに | Riverpod

pubspec.yamlに以下を追記します

flutter_hooks: ^0.18.0
hooks_riverpod: ^2.1.1

Freezed

以下を参考にパッケージをインストールします

freezed | Dart Package

ターミナルで以下を1行ずつ実行します

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

アーキテクチャ

注意点

ドメイン駆動設計（DDD）の勉強中なので、原則に沿っていない設計が含まれている可能性があります。もし、間違い等ありましたらコメントでご指摘いただけると助かります。

構成

以下のような構成で実装しました。

今回の実装では外部DBや共通ロジックがないので、repositoryディレクトリとutilsディレクトリは作成しませんでした。

└── lib
    ├── domain                  　　// Domain層
    │   └── **
    │       ├── **_notifier.dart　　　　// UI層の状態管理
    │       ├── **_service.dart   // UI層に必要なビジネスロジック
    │       └── **_state.dart     // UI層で使うstate
    ├── infrastructure          　// Infrastructure層
    │   ├── model                 // Model層 (型を定義する)
    │   │   └── ~~
    │   │       └── ~~.dart
    │   └── repository            // 外部DBとの接続部
    │       └── ¥¥
    │           └── ¥¥.dart
    ├── presentation            // UI層 (画面を定義する)
    │   └── **
    │       └── **_page.dart
    ├── utils                   // システム全体で使うロジック
    └── main.dart

UI層作成

初期コードのmain.dartをコメントアウトしたものは以下のようになっています。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

このうち、表示部分に該当するMyHomePageクラスをUI層に移動します。

presentation/my_home/my_home_page.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_notifier.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_state.dart';

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final MyHomeState myHomeState = ref.watch(myHomeStateNotifierProvider);
    final MyHomeNoifier myHomeNotifier = ref.watch(myHomeStateNotifierProvider.notifier);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              myHomeState.counter.value.toString(),
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => myHomeNotifier.increment(),
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

カウント回数のクラス作成

Freezedでクラスを定義する場合、以下の記述が必須です。

import 'package:freezed_annotation/freezed_annotation.dart';

part 'クラスのファイル名.freezed.dart';

クラスのファイルを作成したら、以下のコマンドを実行します。これにより、クラスのファイル名.freezed.dartが作成されます。

flutter pub run build_runner build

では、カウント回数を表すCounterクラスを定義します。

以下のようにCounterクラスのファイルを作成します。

infrastructure/model/counter/counter.dart

import 'package:freezed_annotation/freezed_annotation.dart';

part 'counter.freezed.dart';

@freezed
class Counter with _$Counter {
  const factory Counter({
    required int value,
  }) = _Counter;
}

表示用画面で使うstateのクラス作成

先ほど作成したCounterクラスを使ってMyHomePage用のstateを定義します。

以下のようにCounterのvalueの初期値を0として定義します。

domain/my_home/my_home_state.dart

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:riverpod_freezed_test/infrastructure/model/counter/counter.dart';

part 'my_home_state.freezed.dart';

@freezed
class MyHomeState with _$MyHomeState {
  const factory MyHomeState({
    @Default(Counter(value: 0)) Counter counter,
  }) = _MyHomeState;
}

Domain層の作成

ボタンタップで+1する処理の作成

まずは、引数で現在のカウンターの数を受け取り、それに+1する関数をserviceファイルに定義します。

domain/my_home/my_home_service.dart

int increment(int value) {
  return value + 1;
}

次に、上記の関数をMyHomeServiceクラスでカプセル化します。

domain/my_home/my_home_service.dart

class MyHomeService {
  int increment(int value) {
    return value + 1;
  }
}

次にRiverpodのProviderを使ってMyHomeServiceのインスタンスを全ファイルから参照できるようにします。

domain/my_home/my_home_service.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';

final myHomeService = Provider.autoDispose((ref) => MyHomeService());

class MyHomeService {
  int increment(int value) {
    return value + 1;
  }
}

myHomeServiceはMyHomePageのみで参照できればいいので、ProviderにautoDispose修飾子をつけ、参照がなくなった後（ex. 別ページに遷移する）キャッシュを削除するようにします。

notifierの作成

notifierファイルでは画面の状態管理を行います。

具体的には先ほど作成したMyHomeStateのインスタンスの状態管理を行うのですが、ここでRiverpodのStateNotifierProviderを使います。

StateNotifierProviderはその名前の通り、StateNotifierのキャッシュ及び共有を行います。

StateNotifierは、変数の状態管理及び更新を行うためのクラスです。immutable（不変）であることが大きな特徴であり、変数の更新はStateNotifier内で定義された関数でしか行えないようになっています。

以下のように記述することで、MyHomeStateのインスタンスをimmutableに管理することができます。

domain/my_home/my_home_notifier.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_state.dart';

class MyHomeNoifier extends StateNotifier<MyHomeState> {
  MyHomeNoifier() : super(const MyHomeState());
}

StateNotifierは引数を持つことができます。

今回はserviceで定義した関数を利用するため、MyHomeService型の引数を定義します。

domain/my_home/my_home_notifier.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_service.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_state.dart';

class MyHomeNoifier extends StateNotifier<MyHomeState> {
  MyHomeNoifier({required MyHomeService myHomeService})
      : _myHomeService = myHomeService,
        super(const MyHomeState());

  final MyHomeService _myHomeService
}

次にStateNotifierProviderを使い、MyHomeNoifierをキャッシュしつつ、全ての場所から参照できるようにします。

domain/my_home/my_home_notifier.dart

final myHomeStateNotifierProvider = StateNotifierProvider.autoDispose<MyHomeNoifier, MyHomeState>((ref) {
  return MyHomeNoifier(
    myHomeService: ref.watch(myHomeService),
  );
});

class MyHomeNoifier extends StateNotifier<MyHomeState> {
  MyHomeNoifier({required MyHomeService myHomeService})
      : _myHomeService = myHomeService,
        super(const MyHomeState());

  final MyHomeService _myHomeService
}

引数に代入しているref.watch(myHomeService)により、先ほど定義したmyHomeServiceを参照できます。

Providerの参照は以下の2通りがありますが、基本的にはref.watchを使います。

ref.watch(Provider名)
ref.read(Provider名)

次に、+ボタンがタップされた時の処理を定義します。

StateNotifierではstateで現在保持している値を参照できます。

また、stateに値を代入することで保持している値を更新できます。

今回は、incrementという関数で更新されたCounterをstateに代入します。

domain/my_home/my_home_notifier.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_service.dart';
import 'package:riverpod_freezed_test/domain/my_home/my_home_state.dart';

final myHomeStateNotifierProvider = StateNotifierProvider.autoDispose<MyHomeNoifier, MyHomeState>((ref) {
  return MyHomeNoifier(
    myHomeService: ref.watch(myHomeService),
  );
});

class MyHomeNoifier extends StateNotifier<MyHomeState> {
  MyHomeNoifier({required MyHomeService myHomeService})
      : _myHomeService = myHomeService,
        super(const MyHomeState());

  final MyHomeService _myHomeService;

  void increment() {
    final counter = state.counter;
    final newCounter = _myHomeService.increment(counter);
    state = state.copyWith(counter: newCounter);
  }
}

UI層とnotifierの繋ぎこみ

先ほど定義したnotifierをMyHomePageに反映します。

RiverpodをWidget内で参照するには、ConsumerWidget等の専用のWidgetクラスを使用する必要があります。

まずは、my_home_page.dartを以下のように書き換えます。

presentation/my_home/my_home_page.dart

class MyHomePage extends ConsumerWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      ...
    );
  }
}

次に、先ほど定義したmyHomeStateNotifierProviderを呼び出します。

以下をScaffoldの前で定義します。

myHomeStateではStateNotifierで管理しているstate（Counter）を参照しています。

また、myHomeNotifierではStateNotifier自体を参照しています。StateNotifierの関数を呼び出す際はmyHomeNotifierを利用します。

final MyHomeState myHomeState = ref.watch(myHomeStateNotifierProvider);
final MyHomeNoifier myHomeNotifier = ref.watch(myHomeStateNotifierProvider.notifier);

次に、カウント数の表示部分とボタンタップ時の処理を以下のように書き換えます。

Text(
-  '$_counter',
+  myHomeState.counter.value.toString(),
  style: Theme.of(context).textTheme.headlineMedium,
),

floatingActionButton: FloatingActionButton(
-  onPressed: _incrementCounter,
+  onPressed: () => myHomeNotifier.increment(),
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

以上で実装は完了です。
動作確認を行い、初期コードと同様にタップ回数がカウントされていればOKです！

おわりに

ソースコードを以下で公開しています。
ご不明点等あればお気軽にコメントください！
https://github.com/fumiyadoi/riverpod_freezed_test