Open9

riverpodのtodosをやってみる

ken1flanken1flan

「さあ、始めよう！」にある、TODOリストのサンプルアプリをポチポチ打ち込んでみて、ちょっと体験してみようかーと思ってます。サンプルを打ち込んでいくときに感じたことをまぁ、書き留める感じです。
https://riverpod.dev/docs/introduction/getting_started

ken1flanken1flan

追加されていたパッケージはこんなところかしら。
（ChatGPTに説明をつけてもらいました。）

  • flutter_hooks
    • flutter_hooksは、Flutterアプリケーションで状態管理とウィジェットのライフサイクルをより簡潔に扱うためのライブラリです。このライブラリは、ウィジェットがビルドされる際の様々なフック（hooks）を提供します。これにより、状態の保存や変更、ウィジェットのライフサイクルイベントに対する処理をより効果的に行うことができます。
  • riverpod
    • Riverpodは、Flutterアプリケーションで状態管理を行うための強力なライブラリです。Providerと呼ばれる概念に基づいており、依存性注入（Dependency Injection）の原則に基づいています。
  • hooks_riverpod
    • hooks_riverpodは、FlutterアプリケーションでRiverpodを使用する際に、ReactのHooks APIにインスパイアされたカスタムフックを提供するライブラリです。これにより、状態管理とウィジェットのライフサイクルをより簡潔に扱うことができます。
  • uuid
    • uuidは、Dart言語で一意な識別子（UUID: Universally Unique Identifier）を生成するためのライブラリです。

ken1flanken1flan

main.dartのmainからかなあ。

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

ProviderScopeは…どのパッケージのだ？と思ったんですが…flutter_riverpodのものみたいです。

Providerをウィジェットのどこでも利用できるようにするためのものですかね…。

ken1flanken1flan

次はMyAppだけど、Homeを包んでるだけ。

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}
ken1flanken1flan

次はHome。

  • extends HookConsumerWidget
    • HookConsumerWidgetはhooks_riverpodのものでした。
    • hookやlistenに対応できるようにするようです。
  • GestureDetector
    • 標準のジェスチャーを取れるようにできるやつ。
class Home extends HookConsumerWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final todos = ref.watch(filteredTodos);
    final newTodoController = useTextEditingController();

    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        // 省略
      ),
    );
  }
}
ken1flanken1flan

うーん…デカすぎて見えない…。
手を動かして作ってみるか…。

ken1flanken1flan

とりあえず、サンプル通りに通常のウィジェットを並べてみよう。