Skip to content

Instantly share code, notes, and snippets.

@ThrowJojo
Created Jan 5, 2021
Embed
What would you like to do?
Merging two Providers together(Riverpod)
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/all.dart';
void main() {
runApp(
ProviderScope(
child: MyApp()
)
);
}
// To create a StateNotifier you first need to create class/model to hold the state
class CounterState {
CounterState({this.value = 0});
final int value;
// This is just a simple utility method, you might want to try out freezed
// for more complex implementations
CounterState copyWith({int count}) {
return CounterState(
value: count ?? this.value
);
}
}
class CounterNotifier extends StateNotifier<CounterState> {
CounterNotifier() : super(CounterState());
increase() => state = state.copyWith(count: state.value + 1);
decrease() => state = state.copyWith(count: state.value - 1);
}
// Adding .autoDispose will dispose of the provider when it is no longer needed
final counterProvider = StateNotifierProvider.autoDispose((_) => CounterNotifier());
// A StateProvider for an int value
final multiplierProvider = StateProvider.autoDispose((_) => 4);
// A Provider that merges both of the above providers
final valueProvider = Provider.autoDispose((ref) {
// Watch the value of the original counter
final value = ref.watch(counterProvider.state).value;
// Watch the value of the multiplier
final multiplier = ref.watch(multiplierProvider).state;
// Multiply the original value by the multiplier
return value * multiplier;
});
class MyApp extends HookWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
class CounterPage extends HookWidget {
@override
Widget build(BuildContext context) {
final int value = useProvider(valueProvider);
final CounterNotifier counterNotifier = useProvider(counterProvider);
return Scaffold(
appBar: AppBar(
title: Text('CounterPage'),
),
body: Container(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Text('Count: $value')
),
ElevatedButton(
child: Text('Increase'),
onPressed: () => counterNotifier.increase(),
),
ElevatedButton(
child: Text('Decrease'),
onPressed: () => counterNotifier.decrease(),
)
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment