クリーンアーキテクチャ Riverpod Flutter - 万年素人からHackerへの道

クリーンアーキテクチャに基づいたFlutterアプリの雛形を作成するには、以下の手順に従うことができます。

プロジェクトを作成する Flutterコマンドラインツールを使用して、新しいFlutterプロジェクトを作成します。例えば、以下のコマンドを使用することができます。

flutter create --org com.example myapp

このコマンドは、myappという名前のFlutterプロジェクトを作成し、com.exampleのような組織名を指定します。これは、AndroidアプリケーションIDに使用されます。

プロジェクトの構成を決定する

次に、アプリケーションの構成を決定する必要があります。これは、Clean Architectureの基本原則に従う必要があります。これには、以下のコンポーネントが含まれます。

Domain Layer（ドメイン層）：ビジネスロジックを含むコードが格納されます。
Data Layer（データ層）：永続化やネットワーク通信など、データの取得と保存を担当するコードが格納されます。
Presentation Layer（プレゼンテーション層）：UIを担当するコードが格納されます。
プロジェクトのフォルダ構成を作成する

プロジェクトのフォルダ構成を作成することで、Clean Architectureの原則に従うことができます。以下のような構成を使用することができます

- lib
  - data
    - models
    - repositories
    - sources
  - domain
    - entities
    - repositories
    - usecases
  - presentation
    - pages
    - widgets
    - main.dart
  - utils

この構成では、libフォルダに、data、domain、presentation、utilsのサブフォルダがあります。これらのサブフォルダには、それぞれ、データ層、ドメイン層、プレゼンテーション層、およびユーティリティクラスが格納されます。

Riverpodを導入する

FlutterアプリでRiverpodを使用するには、flutter_riverpodパッケージを使用する必要があります。pubspec.yamlファイルに以下を追加して、flutter_riverpodパッケージをインストールします。

dependencies:
  flutter_riverpod: ^1.0.3

Providerを設定する

libフォルダにproviders.dartというファイルを作成し、このファイルにProviderを設定します。以下は、例として、ドメイン層にあるカウンターの初期値を管理するCounterRepositoryクラスを示しています。

import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterRepositoryProvider = Provider((_) => CounterRepository());

class CounterRepository {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }

  void decrement() {
    _count--;
  }
}

このようにProviderを定義することで、CounterRepositoryのインスタンスを使用できるようになります。

Riverpodを使用するウィジェットを作成する lib/presentation/pagesフォルダに新しいウィジェットを作成し、flutter_riverpodパッケージのConsumerウィジェットを使用して、Providerを使用します。以下は、例として、CounterPageクラスを示しています。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:myapp/data/repositories/counter_repository.dart';

class CounterPage extends ConsumerWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final counterRepository = watch(counterRepositoryProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Count: ${counterRepository.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => counterRepository.increment(),
              child: const Text('Increment'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () => counterRepository.decrement(),
              child: const Text('Decrement'),
            ),
          ],
        ),
      ),
    );
  }
}

このウィジェットは、CounterRepositoryを使用して、カウンターの値を表示し、増減するための2つのボタンを提供します。

アプリケーションのエントリーポイントを作成する最後に、lib/presentation/main.dartファイルを作成し、アプリケーションのエントリーポイントを作成します。以下は、例として、CounterPageを使用するMyAppクラスを示しています。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:myapp/presentation/pages/counter_page.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterPage(),
    );
  }
}

このように、ProviderScopeを使用してアプリケーションをラップすることで、アプリケーション全体でProviderを使用できるようになります。また、MyAppクラスでは、CounterPageをホーム画面として使用するように設定されています。

以上が、クリーンアーキテクチャに基づいたFlutterアプリの雛形を作成する手順です。これにより、アプリケーションの構造を整理し、可読性とメンテナンス性を向上させることができます。ただし、アプリケーションの規模や要件に応じて、フォルダ構成やProviderの設定方法を調整する必要があります。