【Flutter】Riverpod 2.1系 完全攻略

flutter pub add flutter_riverpod
fluter pub get

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

final _counterProvider = ChangeNotifierProvider((ref) => Counter());
late final _doubleProvider =
  Provider<int>((ref) => ref.watch(_counterProvider).counter * 2);

Text(
  '${ref.watch(_doubleProvider)}',
),

final _counterProvider = StateProvider((ref) => 0);

Text(
  '${ref.watch(_counterProvider)}',
),

ref.read(_counterProvider.notifier).update((state) => state + 1);
ref.read(_counterProvider.notifier).state = 0;

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void countUp() {
    state++;
  }
}

final _counterProvider =
  StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());

Text(
  '${ref.watch(_counterProvider)}',
  style: Theme.of(context).textTheme.headline4,
),

ref.read(_counterProvider.notifier).countUp(),

class Counter extends ChangeNotifier {
  int _counter = 0;
  get counter => _counter;

  void countUp() {
    _counter++;
    notifyListeners();
  }
}
final _counterProvider = ChangeNotifierProvider((ref) => Counter());

Text(
  '${ref.watch(_counterProvider).counter}',
  style: Theme.of(context).textTheme.headline4,
),

ref.read(_counterProvider).countUp()

final _futureProvider = FutureProvider((ref) async {
    final sharedPreferences = await SharedPreferences.getInstance();
    return sharedPreferences.getInt(kKey) ?? 0;
});

ref.watch(_futureProvider).when(
    loading: () => const CircularProgressIndicator(),
    error: (error, stack) => const Text('error'),
    data: (data) => Text(
        '${ref.watch(_futureProvider).value}',
        style: Theme.of(context).textTheme.headline4,
    ),
)

ref.invalidate(_futureProvider)

final _streamController = StreamController<int>();
late final _streamProvider = StreamProvider<int>((ref) {
    return _streamController.stream;
});

ref.watch(_streamProvider).when(
      loading: () => const CircularProgressIndicator(),
      error: (error, stack) => const Text('error'),
      data: (data) => Text(
        '${ref.watch(_streamProvider).value}',
        style: Theme.of(context).textTheme.headline4,
      ),
),

_streamController.sink.add(++_count)

Consumer(builder: (context, ref, child) {
  return Text(
    '${ref.watch(_counterProvider)}',
    style: Theme.of(context).textTheme.headline4,
  );
}),

class MyHomePage extends ConsumerWidget {
  MyHomePage({super.key, required this.title});
  final String title;

  final _counterProvider = StateProvider((ref) => 0);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
        (中略)
    }
}

class MyHomePage extends ConsumerStatefulWidget {
  @override
  ConsumerState<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends ConsumerState<MyHomePage> {
  final _counterProvider = StateProvider((ref) => 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () =>
            ref.read(_counterProvider.notifier).update((state) => state + 1),
        child: const Icon(Icons.add),
      ),
    );
  }
}

final listInNormalUsage = ref.read(_normalListProvider);
listInNormalUsage.add(0);
ref.read(_normalListProvider.notifier).state = listInNormalUsage;

final list = ref.read(_immutableListProvider);
final newList = [...list, 0];
ref.read(_immutableListProvider.notifier).state = newList;

// 上記の3文を1文で実施
ref.read(_immutableListProvider.notifier).update((state) => [...state, 0]);

// クラス定義
class MutableData {
  int count = 0;
  void countUp() {
    count++;
  }
}

// Provider定義
final _mutableProvider = StateProvider<MutableData>((ref) => MutableData());

// 更新
final mutableData = ref.read(_mutableProvider);
mutableData.countUp();
ref.read(_mutableProvider.notifier).state = mutableData;

// クラス定義
class ImmutableData {
  ImmutableData(this.count);
  final int count;

  ImmutableData countUp() {
    return ImmutableData(count + 1);
  }
}
// Provider定義
final _immutableProvider =
StateProvider<ImmutableData>((ref) => ImmutableData(0));

// 更新
final oldImmutableData = ref.read(_immutableProvider);
final newImmutableData = oldImmutableData.countUp();
ref.read(_immutableProvider.notifier).state = newImmutableData;

Consumer(builder: (context, ref, child) {
  return Text(
    '${ref.watch(_immutableProvider.select((e) => e.sameValue))}',
    style: Theme.of(context).textTheme.headline4,
  );
}),

ref.listen(_stateProvider, (previous, next) {
  print('previous: $previous next: $next');
});

final _apiProvider =
  FutureProvider.autoDispose.family<String, int>((ref, page) async {
    String url =
        'https://api.github.com/search/repositories?q=flutter&page=$page';

    final client = http.Client();
    final response = await client.get(Uri.parse(url));
    final data = json.decode(response.body);
    final projectName = data['items'][0]['name'];
    return projectName;
});

ref.watch(_apiProvider(_counter)).when(
  loading: () => const CircularProgressIndicator(),
  error: (_, __) => const Text('error'),
  data: (data) => Text(data),
)

ref.invalidate(_apiProvider);

ref.onDispose(() => print('provider was disposed (page=$page)'));
ref.onCancel(() => print('provider was canceled (page=$page)'));
ref.onResume(() => print('provider was resumed (page=$page)'));

  Widget build(BuildContext context, WidgetRef ref) {
    print('context == ref: ${context == ref}');

WidgetsBinding.instance.addPostFrameCallback((_) {
  ref.read(_stateProvider.notifier).update((state) => state + 1);
});