[Flutter] See what makes widgets' rebuilding(1)

main.dart

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

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class _MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _IntWatcher(),
              _ListWatcher(),
              _SetWatcher(),
              _SelectWatcher(),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => ref.read(provider.notifier).updateInt(),
                child: const Text('Update int value'),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () => ref.read(provider.notifier).updateList(),
                child: const Text('Update list value'),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () => ref.read(provider.notifier).updateSet(),
                child: const Text('Update set value'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

final provider =
    StateNotifierProvider<Controller, MyState>((ref) => Controller());

class Controller extends StateNotifier<MyState> {
  Controller() : super(MyState(n: 1, list: [1, 2, 3], set: {1, 2, 3}));

  void updateInt() {
    state = state.copyWith(n: state.n + 1);
  }

  void updateList() {
    state = state.copyWith(list: state.list.map((n) => n).toList());
  }

  void updateSet() {
    state = state.copyWith(set: state.list.map((n) => n).toSet());
  }
}

class MyState {
  MyState({required this.n, required this.list, required this.set});

  final int n;
  final List<int> list;
  final Set<int> set;

  MyState copyWith({int? n, List<int>? list, Set<int>? set}) {
    return MyState(
      n: n ?? this.n,
      list: list ?? this.list,
      set: set ?? this.set,
    );
  }
}

class Counter {
  int _count = 0;

  int get count {
    return ++_count;
  }
}

class _IntWatcher extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = useMemoized(() => Counter(), []);

    ref.watch(provider.select((state) => state.n));
    return Text('Int changed: ${counter.count}');
  }
}

class _ListWatcher extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = useMemoized(() => Counter(), []);

    ref.watch(provider.select((state) => state.list));
    return Text('List changed: ${counter.count}');
  }
}

class _SetWatcher extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = useMemoized(() => Counter(), []);

    ref.watch(provider.select((state) => state.set));
    return Text('Set changed: ${counter.count}');
  }
}

class _SelectWatcher extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = useMemoized(() => Counter(), []);

    ref.watch(provider.select((state) => state.list.map((n) => n).toList()));
    return Text('On demand list changed: ${counter.count}');
  }
}