Flutterを再開するときにやったこと。その2(登場人物とRiverpodを思い出す)

Flutter再開しようと思ったときにやったことのメモ。作業ログ的な備忘録。
インストールまでは終わったので、いろいろ思い出す。

とりあえず、過去に書いた記事を読み直す

Flutterのタグをつけていた記事を見直す。

Flutter カテゴリーの記事一覧 - くらげになりたい。

この記事が、わりとちゃんと知りたいことをまとめてあった、えらい(´ω｀)

Dartの特徴、ディレクトリ構成、UI関連(StatelessWidget/StatefulWidget)など思い出してきた。

lib配下のディレクトリ構成を決める

とりあえず、ディレクトリ構成を決める。
前に考えたシンプルな構成をベースに拡張。

lib/
├── configs     ... 共通の設定関連
├── domain      ... コアの処理関連
│   └── models  ... モデル関連
├── pages       ... ページなどのUI関連
│   └── widgets ... ページ内で使うWidget
└── main.dart   ... メイン。テーマのカスタムやルーティングも

必要なライブラリを入れる

Getting started | Riverpod

Riverpod

とりあえず、状態管理にRiverpodを入れる。

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^2.0.0-dev.5

flutter pub getで変更を反映。

Riverpodの使い方

以前、調べてたときと少し変わっているっぽい。

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      theme: appTheme,
      home: const ProviderScope(
        child: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

ProviderScopeをつけるのは変わらず。

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

// provider
final homeProvider =
    StateNotifierProvider<HomeState, Counter>((ref) => HomeState());

// state class
class HomeState extends StateNotifier<Counter> {
  HomeState() : super(const Counter());

  void countUp() {
    state = Counter(count: state.count + 1);
  }
}

// state data
@immutable
class Counter {
  const Counter({this.count = 0});
  final int count;
}


class MyHomePage extends HookConsumerWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(homeProvider);
    final provider = ref.read((homeProvider.notifier));

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Column(
          children: <Widget>[
            Text('${state.count}'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: provider.countUp,
        child: const Icon(Icons.add),
      ), 
    );
  }
}

呼び出し方が少し違う感じ。

StateNotifierProviderの型が第2引数を取るように
StateNotifierが完全にイミュータブルに
HookConsumerWidgetかConsumerWidgetを継承するように
useProviderがなくなり、WidgetRef(ref)を使うように

今の使い方はこのあたり。
・プロバイダとは | Riverpod
・プロバイダの利用方法 | Riverpod

変更点などは、このあたり。
・^0.13.0 → ^0.14.0 | Riverpod

プロバイダの種類

各プロバイダの種類はこんな感じ。

プロバイダの種類	生成されるステートの型	具体例
Provider	任意	サービスクラス / 算出プロパティ（リストのフィルタなど）
StateProvider	任意	フィルタの条件 / シンプルなステートオブジェクト
FutureProvider	任意のFuture	API の呼び出し結果
StreamProvider	任意のStream	API の呼び出し結果のStream
StateNotifierProvider	StateNotifierのサブクラス	イミュータブル（インタフェースを介さない限り）で複雑なステートオブジェクト
ChangeNotifierProvider	ChangeNotifier のサブクラス	ミュータブルで複雑なステートオブジェクト