間違っている箇所、謎な箇所があったら指摘してください。

動機

riverpodの勉強がしたかった（建前）
自滅するWidgetが欲しかった（本音）

前提知識

riverpodをほんの少しだけ知っている。

バージョン

	バージョン
Flutter	3.3.0
Dart	2.18.0
flutter_riverpod	^2.2.0
Xcode	14.2

概要

ElevatedButtonはStateNotifierのサブクラス越しに挿入する。
StateNotifierProviderを使って、ボタンをタップした時にWidgetをnullにする。　
今回はiOSシミュレーターを使ってる。

重要な部分だけ軽く抑えて、最後に全体のコードを貼る。

実装

provider辺りの部分

final buttonTogglerProvider =
    StateNotifierProvider<ButtonToggler, VanishButton?>(
        (ref) => ButtonToggler());

class ButtonToggler extends StateNotifier<VanishButton?> {
  ButtonToggler() : super(const VanishButton());

  void toggle() => state = state == null ? const VanishButton() : null;
}

Widgetとnullで切り替えたかったので、型はVanishButton?を指定している。　

ButtonToggler内にtoggle()を定義することで、自発的にWidgetを削除し、任意のタイミングで再構築できる。（←まさにこれがしたかった！！）
StateNotifierProviderにしたのは、Widgetとnullの切り替えを自分で作りたかったから。他のでもいいかもしれないけど、公式パッと見た感じこれがベストっぽかった。　

プロバイダとはでproviderの種類が確認できる。

stateのとこにButtonToggerの状態が格納されてるイメージ。基本的にこのstateを参照していくっぽい。stateはもともとあるものなので自分で宣言したりしなくていい、てかしない。　
　

ElevatedButtonの挙動のとこ　

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ElevatedButton(
      onPressed: () {
        ref.read(buttonTogglerProvider.notifier).toggle();
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.amber,
      ),
      child: Text(
        ref.watch(buttonTogglerProvider).toString(),
      ),
    );
  }
}

refで監視とかできるようにConsumerWidgetを継承する。

前項のButtonTogglerでVanishButtonを渡してるのは、このボタンを消したいから。そのため、このボタンのonPress内でtoggle()を呼んで、間接的に自分をnullにして消す。（逆に渡したいのでクラスを定義するみたいなとこある）

onPressの様な、ユーザーのアクションに起因する処理の中にはwatch()ではなくread()を使うらしい。read()にはbuttonTogglerProvider.notifierを渡すところがwatch()と異なる。
watchは監視をするだけ？っぽい。

watch メソッドは ElevatedButton の onPressed 内など、非同期的な場面で呼び出さないでください。また initState を始め、State のライフサイクルメソッド内での使用も避けてください。
これらの場合は代わりに ref.read を使用してください。

ref.read はリアクティブではないため、可能な限り使用を避けてください。
watch や listen の使用では問題が生じる場合の回避策として存在しています。ほとんどの場面では watch や listen の使用、特に watch の使用がベターなはずです。
【重要】 ref.read は build メソッドの中で使わない

らしい。¹

ref.watch()は今回対して関係ないが、これで状態を監視できる。

スコープ

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

main()でちゃんとスコープを決めとるのを忘れないのが大事。

実行結果 (GIF)

vanishButton消えちゃうので復活用のボタンも用意してた。

状態の変化がわかりやすいように一応テキストも変えた。

何もない時に復活ボタンを押しても何も起きない。

全体コード

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

final buttonTogglerProvider =
    StateNotifierProvider<ButtonToggler, VanishButton?>(
        (ref) => ButtonToggler());

class ButtonToggler extends StateNotifier<VanishButton?> {
  ButtonToggler() : super(const VanishButton());

  void toggle() => state = state == null ? const VanishButton() : null;
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CountPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("title"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 50),
            Container(
              height: 50,
              child: ref.watch(buttonTogglerProvider),
            ),
            const SizedBox(height: 50),
            Container(
              height: 50,
              child: ElevatedButton(
                onPressed: () {
                  ref.watch(buttonTogglerProvider) ??
                      ref.read(buttonTogglerProvider.notifier).toggle();
                },
                child: Text(
                  ref.watch(buttonTogglerProvider) == null
                      ? "restore button"
                      : "do noting",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ElevatedButton(
      onPressed: () {
        ref.read(buttonTogglerProvider.notifier).toggle();
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.amber,
      ),
      child: Text(
        ref.watch(buttonTogglerProvider).toString(),
      ),
    );
  }
}

参考

https://riverpod.dev/ja/docs/concepts/reading ↩