Flutter 〜riverpodを使って極シンプルなカウンターアプリ〜

riverpodを使った標準アプリよりもさらにシンプルなカウンターアプリ。
全体のコードの後にポイントごとに説明をしていく。

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

// プロバイダの定義
// StateProviderは状態管理を行うプロバイダで、ここでは整数型のカウンターを管理
final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(
    // ★★★★①ProviderScopeはプロバイダの範囲を定義し、アプリ全体でプロバイダを利用可能にする★★★★
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// MyAppはアプリケーションのルートウィジェット
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // アプリのホーム画面をCounterWidgetに設定
      home: CounterWidget(),
    );
  }
}

// ★★★★②CounterWidgetはConsumerWidgetを継承し、プロバイダの状態を消費するウィジェット★★★★
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ★★★★③ref.watchを使ってcounterProviderの状態を監視し、現在のカウント値を取得★★★★
    final count = ref.watch(counterProvider);

    return Scaffold(
      // アプリの上部に表示されるアプリバーの設定
      appBar: AppBar(title: Text('Counter')),
      // 中央に配置されるカウント値を表示するテキストウィジェット
      body: Center(
        child: Text(
          '$count', // カウント値を表示
          style: TextStyle(fontSize: 40), // テキストのスタイルを設定
        ),
      ),
      // 右下に配置されたFloatingActionButton
      // ボタンが押されるとカウントが増える
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // ★★★★④ref.readを使ってcounterProviderのnotifierを取得し、stateを更新★★★★
          ref.read(counterProvider.notifier).state++;
        },
        // ボタンに表示されるアイコンを設定
        child: Icon(Icons.add),
      ),
    );
  }
}

import部分

//flutter/material.dartはFlutterのマテリアルデザインのウィジェットをインポート
import 'package:flutter/material.dart';
//flutter_riverpod/flutter_riverpod.dartはRiverpodのプロバイダ機能をインポート
import 'package:flutter_riverpod/flutter_riverpod.dart';

Provider部分

//StateProviderは整数型の状態を管理
//初期値は0
final counterProvider = StateProvider<int>((ref) => 0);

main関数

void main() {
  //ProviderScopeでラップされたMyAppウィジェットをrunAppで実行
  runApp(
    //ProviderScopeはプロバイダの範囲を定義
    ProviderScope(
      child: MyApp(),
    ),
  );
}

MyAppウィジェット

//MyAppはアプリのルートウィジェットで、ホーム画面としてCounterWidgetを設定
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterWidget(),
    );
  }
}

CounterWidget

//CounterWidgetはConsumerWidgetを継承し、プロバイダの状態を監視
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Text(
          //ref.watch(counterProvider)でカウント値を取得し、テキストとして表示
          '$count',
          style: TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //FloatingActionButtonが押されると、
          //ref.read(counterProvider.notifier).state++でカウント値が1増加する。
          ref.read(counterProvider.notifier).state++;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}