I am worker for a project on flutter with bloc as state management.
But my screen contain a wide variety of data.
How can I management all this data?
class ProductCubit extends Cubit<ProductState> {
Worker worker = Worker();
List<ProductMakePriceChange> productsPriceChange = [];
List<PurchaseCount> purchaseCount = [];
int productCount = 0;
int productSaleCount = 0;
int productCategoryCount = 0;
int productUnitCount = 0;
}
I have One state for each data (Loading state)
And One method for each data to load it
The problem!
when one state are change, all screen are rebuild
I need to change just one partition from my screen, just that partition when that data are effect
There are several ways to achieve this.
As you guessed correctly, you can of course move some fields to separate cubits. Another option would be to implement different subclasses of ProductState and check for the type in the BlocBuilder or BlocConsumer at runtime.
class ProductCubit extends Cubit<ProductState> {
ProductCubit()
: super(
const ProductInitial(
ProductInfo(
productsPriceChange: [],
purchaseCount: [],
productSaleCount: 0,
productCategoryCount: 0,
productCount: 0,
productUnitCount: 0,
),
),
);
Future<void> loadProductPurchaseCount() async {
emit(ProductPurchaseCountLoadInProgress(state.productInfo));
try {
// TODO load product purchase count
final productPurchaseCount = <dynamic>[];
emit(
ProductPurchaseCountLoadSuccess(
state.productInfo.copyWith(
purchaseCount: productPurchaseCount,
),
),
);
} catch (_) {
emit(
ProductPurchaseCountLoadSuccess(state.productInfo),
);
}
}
}
abstract class ProductState extends Equatable {
const ProductState(this.productInfo);
final ProductInfo productInfo;
#override
List<Object?> get props => [productInfo];
}
class ProductInitial extends ProductState {
const ProductInitial(ProductInfo productInfo) : super(productInfo);
}
class ProductPurchaseCountLoadInProgress extends ProductState {
const ProductPurchaseCountLoadInProgress(ProductInfo productInfo)
: super(productInfo);
}
class ProductPurchaseCountLoadFailure extends ProductState {
const ProductPurchaseCountLoadFailure(ProductInfo productInfo)
: super(productInfo);
}
class ProductPurchaseCountLoadSuccess extends ProductState {
const ProductPurchaseCountLoadSuccess(ProductInfo productInfo)
: super(productInfo);
}
Last, but not least, there is a relatively new Widget called BlocSelector which lets you check the state in order to determine whether the child should be built.
BlocSelector<BlocA, BlocAState, SelectedState>(
selector: (state) {
// return selected state based on the provided state.
},
builder: (context, state) {
// return widget here based on the selected state.
},
)
Check out the docs: https://pub.dev/packages/flutter_bloc
Related
I thought Riverpod will only trigger rebuild if the state value is different but turn out it rebuild every time when state is set although the value is the same. Is that true?
The case is as below
#Freezed(genericArgumentFactories: true)
class Model with _$Model {
const factory Model({required int id}) = _Model;
}
class Manager {
static StateProvider<Model> modelProvider =
StateProvider<Model>((ref) => Model(id: 1));
Manager() {
Stream.periodic(Duration(seconds: 1)).take(1000).listen((event) {
ref.read(modelProvider.notifier).update((state) {
var cloneState = state.copyWith();
print("${state == cloneState}"); //This print true
return cloneState;
});
});
}
}
class TestWidget extends ConsumerWidget {
const TestWidget();
#override
Widget build(BuildContext context, WidgetRef ref) {
var model = ref.watch(Manager.modelProvider);
print("model change......................"); //print every second
return Text(model.id.toString());
}
}
It showed that the TestWidget was rebuilt every seconds but I thought it shouldn't as the state is the same although I set it again.
Am I missing something? Thanks.
Riverpod by default doesn't rely on == but identical to filter updates.
The reasoning is that == can be quite inefficient if your model becomes large.
But this causes the behavior you described: If two objects have the same content but use a different instance, listeners will be notified.
It's not considered a problem though, as there is no value in doing:
state = state.copyWith();
It's all about using identical(old, current) under the hood to compare states. identical presents for itself the following:
/// Check whether two references are to the same object.
///
/// Example:
/// ```dart
/// var o = new Object();
/// var isIdentical = identical(o, new Object()); // false, different objects.
/// isIdentical = identical(o, o); // true, same object
/// isIdentical = identical(const Object(), const Object()); // true, const canonicalizes
/// isIdentical = identical([1], [1]); // false
/// isIdentical = identical(const [1], const [1]); // true
/// isIdentical = identical(const [1], const [2]); // false
/// isIdentical = identical(2, 1 + 1); // true, integers canonicalizes
/// ```
external bool identical(Object? a, Object? b);
Here is a complete copy-run example:
void main() => runApp(const ProviderScope(child: MyApp()));
#Freezed(genericArgumentFactories: true)
class Model with _$Model {
const factory Model({required int id}) = _Model;
}
class Manager {
static StateProvider<Model> modelProvider = StateProvider<Model>((ref) {
Stream.periodic(const Duration(seconds: 1)).take(1000).listen((event) {
ref.read(modelProvider.notifier).update((state) {
final cloneState = state.copyWith();
// const cloneState = Model(id: 1); //The print true in both cases
print("${state == cloneState}"); //This print true
print("identical: ${identical(state, cloneState)}"); //This print false
return cloneState;
});
});
return const Model(id: 1);
});
}
class MyApp extends ConsumerWidget {
const MyApp();
#override
Widget build(BuildContext context, WidgetRef ref) {
var model = ref.watch(Manager.modelProvider);
print("model change......................"); //print every second
return MaterialApp(home: Text(model.id.toString()));
}
}
I modified the example a little, but kept the essence the same. Only by applying `const' can we achieve the absence of rebuilds.
I'm fairly new to Flutter providers. I use Riverpod.
I have a Future provider that provide some data from a JSON file - in the future it will be from a API response.
import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../models/pokemon.dart';
final pokemonProvider = FutureProvider<List<Pokemon>>((ref) async {
var response =
await rootBundle.loadString('assets/mock_data/pokemons.json');
List<dynamic> data = jsonDecode(response);
return List<Pokemon>.from(data.map((i) => Pokemon.fromMap(i)));
});
I subscribe to with ref.watch in ConsumerState widgets, e.g.:
class PokemonsPage extends ConsumerStatefulWidget {
const PokemonsPage({Key? key}) : super(key: key);
#override
ConsumerState<PokemonsPage> createState() => _PokemonsPageState();
}
class _PokemonsPageState extends ConsumerState<PokemonsPage> {
#override
Widget build(BuildContext context) {
final AsyncValue<List<Pokemon>> pokemons =
ref.watch(pokemonProvider);
return pokemons.when(
loading: () => const CircularProgressIndicator(),
error: (err, stack) => Text('Error: $err'),
data: (pokemons) {
return Material(
child: ListView.builder(
itemCount: pokemons.length,
itemBuilder: (context, index) {
Pokemon pokemon = pokemons[index];
return ListTile(
title: Text(pokemon.name),
);
},
));
},
);
}
}
But in that case, what is the best practice to write/update data to the JSON file/API?
It seems providers are used for reading/providing data, not updating it, so I'm confused.
Should the same provider pokemonProvider be used for that? If yes, what is the FutureProvider method that should be used and how to call it? If not, what is the best practice?
I am new to riverpod too but I'll try to explain the approach we took.
The examples with FutureProviders calling to apis are a little bit misleading for me, because the provider only offers the content for a single api call, not access to the entire api.
To solve that, we found the Repository Pattern to be very useful. We use the provider to export a class containing the complete api (or a mock one for test purposes), and we control the state (a different object containing the different situations) to manage the responses and updates.
Your example would be something like this:
First we define our state object:
enum PokemonListStatus { none, error, loaded }
class PokemonListState {
final String? error;
final List<Pokemon> pokemons;
final PokemonListStatus status;
const PokemonListState.loaded(this.pokemons)
: error = null,
status = PokemonListStatus.loaded,
super();
const PokemonListState.error(this.error)
: pokemons = const [],
status = PokemonListStatus.error,
super();
const PokemonListState.initial()
: pokemons = const [],
error = null,
status = PokemonListStatus.none,
super();
}
Now our provider and repository class (abstract is optional, but let's take that approach so you can keep the example for testing):
final pokemonRepositoryProvider =
StateNotifierProvider<PokemonRepository, PokemonListState>((ref) {
final pokemonRepository = JsonPokemonRepository(); // Or ApiRepository
pokemonRepository.getAllPokemon();
return pokemonRepository;
});
///
/// Define abstract class. Useful for testing
///
abstract class PokemonRepository extends StateNotifier<PokemonListState> {
PokemonRepository()
: super(const PokemonListState.initial());
Future<void> getAllPokemon();
Future<void> addPokemon(Pokemon pk);
}
And the implementation for each repository:
///
/// Class to manage pokemon api
///
class ApiPokemonRepository extends PokemonRepository {
ApiPokemonRepository() : super();
Future<void> getAllPokemon() async {
try {
// ... calls to API for retrieving pokemon
// updates cached list with recently obtained data and call watchers.
state = PokemonListState.loaded( ... );
} catch (e) {
state = PokemonListState.error(e.toString());
}
}
Future<void> addPokemon(Pokemon pk) async {
try {
// ... calls to API for adding pokemon
// updates cached list and calls providers watching.
state = PokemonListState.loaded([...state.pokemons, pk]);
} catch (e) {
state = PokemonListState.error(e.toString());
}
}
}
and
///
/// Class to manage pokemon local json
///
class JsonPokemonRepository extends PokemonRepository {
JsonPokemonRepository() : super();
Future<void> getAllPokemon() async {
var response =
await rootBundle.loadString('assets/mock_data/pokemons.json');
List<dynamic> data = jsonDecode(response);
// updates cached list with recently obtained data and call watchers.
final pokemons = List<Pokemon>.from(data.map((i) => Pokemon.fromMap(i)));
state = PokemonListState.loaded(pokemons);
}
Future<void> addPokemon(Pokemon pk) async {
// ... and write json to disk for example
// updates cached list and calls providers watching.
state = PokemonListState.loaded([...state.pokemons, pk]);
}
}
Then in build, your widget with a few changes:
class PokemonsPage extends ConsumerStatefulWidget {
const PokemonsPage({Key? key}) : super(key: key);
#override
ConsumerState<PokemonsPage> createState() => _PokemonsPageState();
}
class _PokemonsPageState extends ConsumerState<PokemonsPage> {
#override
Widget build(BuildContext context) {
final statePokemons =
ref.watch(pokemonRepositoryProvider);
if (statePokemons.status == PokemonListStatus.error) {
return Text('Error: ${statePokemons.error}');
} else if (statePokemons.status == PokemonListStatus.none) {
return const CircularProgressIndicator();
} else {
final pokemons = statePokemons.pokemons;
return Material(
child: ListView.builder(
itemCount: pokemons.length,
itemBuilder: (context, index) {
Pokemon pokemon = pokemons[index];
return ListTile(
title: Text(pokemon.name),
);
},
));
}
}
}
Not sure if this is the best approach but it is working for us so far.
you can try it like this:
class Pokemon {
Pokemon(this.name);
final String name;
}
final pokemonProvider =
StateNotifierProvider<PokemonRepository, AsyncValue<List<Pokemon>>>(
(ref) => PokemonRepository(ref.read));
class PokemonRepository extends StateNotifier<AsyncValue<List<Pokemon>>> {
PokemonRepository(this._reader) : super(const AsyncValue.loading()) {
_init();
}
final Reader _reader;
Future<void> _init() async {
final List<Pokemon> pokemons;
try {
pokemons = await getApiPokemons();
} catch (e, s) {
state = AsyncValue.error(e, stackTrace: s);
return;
}
state = AsyncValue.data(pokemons);
}
Future<void> getAllPokemon() async {
state = const AsyncValue.loading();
/// do something...
state = AsyncValue.data(pokemons);
}
Future<void> addPokemon(Pokemon pk) async {}
Future<void> updatePokemon(Pokemon pk) async {}
Future<void> deletePokemon(Pokemon pk) async {}
}
am following this Bloc's official example and I couldn't find a way how to access the state without that if statement.
Let's have the example below, I would like to display a specific text based on the initial value of showText, the only possible solution to access the state is via:
if(statement is ExampleInitial) {state.showText? return Text("yes") : return Text("no")}
But am finding this solution hard to implement when you have more values with initial values. Or am I doing this wrong?
////////// bloc
class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
ExampleBloc() : super(const ExampleInitial()) {
on<ExampleStarted>(_onExampleStarted);
}
void _onExampleStarted(ExampleStarted event, Emitter<ExampleState> emit) {
emit(const ExampleInitial());
}
}
////////// event
part of 'example_bloc.dart';
abstract class ExampleEvent extends Equatable {
const ExampleEvent();
}
class ExampleStarted extends ExampleEvent {
#override
List<Object> get props => [];
}
////////// state
part of 'example_bloc.dart';
abstract class ExampleState extends Equatable {
const ExampleState();
}
////////// state
class ExampleInitial extends ExampleState {
final bool showText = false;
const ExampleInitial();
#override
List<Object> get props => [showText];
}
// ui
class CreateExampleScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocBuilder<ExampleBloc, ExampleState>(
builder: (context, state) {
return state.showText ? Text("yes") :Text("no"); // can't access to state.showText
});
}
}
You can declare a variable inside Bloc Class which will be global and need to be set inside the 'bloc.dart' file like in the case of Provider Package. This variable does not need state to be checked before accessing it in UI. You can access this value from the Navigation tree using context.
////////// bloc
class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
ExampleBloc() : super(const ExampleInitial()) {
on<ExampleStarted>(_onExampleStarted);
}
bool showText = false;
void _onExampleStarted(ExampleStarted event, Emitter<ExampleState> emit) {
emit(const ExampleInitial());
}
}
// ui
class CreateExampleScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocProvider.of<ExampleBloc>(context).showText
? const Text('Yes')
: const Text('No');
}
}
There is another way in which you declare abstract State Class to always have the boolean value. So, whatever new class extends those State will have inherited boolean value from parent class. This concept is called inheritance in OOP.
////////// state
abstract class ExampleState extends Equatable {
const ExampleState();
final bool showText = false;
}
////////// state
class ExampleInitial extends ExampleState {
const ExampleInitial();
// You can also set ExampleInitial to accept showText and send it to its
// parent class using 'super' method in constructor,
// if parent class has constructor with 'showText' as boolean
#override
List<Object> get props => [];
}
// ui
class CreateExampleScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocBuilder<ExampleBloc, ExampleState>(builder: (context, state) {
return state.showText ? const Text("yes") : const Text("no");
});
}
}
A pragmatic usecase for different State Classes having different state variables is as follows:
Let's account for three states while fetching data from api
-if(state is DataLoadingState),
// there is no need for state
-if(state is DataLoadedState)
// state need to have a variable named weatherData containing temperatures, cities and so on.
-if(state is ErrorWhileLoadingState)
// state needs to have a reason for the error. For example: errorMsg: 'Internal Server Error'
So, you need to check the state before accessing its values.
I'm developing the beginning of a card game where players must draw the first N cards and start playing.
My idea is to use a Deck that will handle all these processes giving/removing one or more Cards from owner's hand.
But, since can be a maximum of 6 players, how can it do it?
I was thinking to create one Row on the screen for each player and put here the List<Card> handled by Provider and Consumer.
With this kind of setup what the Deck must do is just to add one or more Cards to the line and it's all over. The problem is that I don't know how Deck can access to the List<Card> inside Provider's Consumer.
I was thinking that Deck should create 6 global keys, passing them to each Consumer so it can access all 6 states but I don't know how to do it, this is what I wrote.
Hand class, handles Cards :
class Hand extends ChangeNotifier {
final List<Card> _hand = [];
void addCard(Card card) {
_hand.add(card);
notifyListeners();
}
void removeAll() {
_hand.clear();
notifyListeners();
}
List<Card> getCards() {
return this._hand;
}
}
GameLineData just uses Provider and Consumer for Hand :
class GameLineData extends StatefulWidget {
Player player;
GameLineData({Key? key, required this.player}) : super(key: key);
#override
State<GameLineData> createState() => _GameLineDataState();
}
class _GameLineDataState extends State<GameLineData> {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => Hand(),
child: Consumer<Hand>(
builder: (context, value, child) {
return Row(
children: value.getCards(),
);
},
),
);
}
}
And Deck :
class Deck {
final Map<int, Key> keys = {
1:GlobalKey(),
2:GlobalKey(),
3:GlobalKey(),
4:GlobalKey(),
5:GlobalKey(),
6:GlobalKey(),
};
void giveCards() {
//TODO
}
}
Is my design correct? Any suggestion?
Whenever I call the toggleLocked event, the BlocBuilder does not rebuild the widget.
I have looked around a lot on the internet and found this explanation: https://stackoverflow.com/a/60869187/3290471
I think that somewhere I incorrectly use the equatable package which results in the fact that the BlocBuilder thinks nothing has changed (while is has).
I have read the FAQ from the Bloc libray and the three provided solution (props for equatable / not reusing the same state / using fromList) seem to not fix the problem.
My Cubit:
class LockCubit extends Cubit<LockState> {
LockCubit({#required this.repository})
: assert(repository != null),
super(LockInitial());
final LocksRepository repository;
Future<void> fetch() async {
try {
final locks = await repository.fetchLocks();
emit(LocksDisplayed().copyWith(locks));
} on Exception {
emit(LockError());
}
}
Future<void> toggleLocked(int id) async {
try {
final locks = await repository.toggleLocked(id);
emit(LocksDisplayed().copyWith(List.from(locks)));
} on Exception {
emit(LockError());
}
}
}
My states:
abstract class LockState extends Equatable {
const LockState();
#override
List<Object> get props => [];
}
class LockInitial extends LockState {
#override
String toString() => 'LocksUninitialized';
}
class LockError extends LockState {
#override
String toString() => 'LockError';
}
class LocksDisplayed extends LockState {
final List<Lock> locks;
const LocksDisplayed([this.locks = const []]);
LocksDisplayed copyWith(locks) => LocksDisplayed(locks ?? this.locks);
#override
List<Object> get props => [locks];
#override
String toString() => 'LocksDisplayed { locks: $locks }';
}
My model:
class Lock extends Equatable {
Lock({this.id, this.name, this.locked, this.displayed});
final int id;
final String name;
final bool locked;
final bool displayed;
#override
String toString() =>
'Lock { id: $id name: $name locked: $locked displayed: $displayed }';
Lock copyWith({id, name, locked, displayed}) => Lock(
id: id ?? this.id,
name: name ?? this.name,
locked: locked ?? this.locked,
displayed: displayed ?? this.displayed);
#override
List<Object> get props => [id, name, locked, displayed];
}
My repositotory:
class LocksRepository {
List<Lock> locks = [];
Future<List<Lock>> fetchLocks() async {
// This is a temporary implementation
// In the future the data should be fetched from a provider
locks = [
new Lock(
id: 0,
name: 'Voordeur',
locked: false,
),
new Lock(
id: 1,
name: 'Achterdeur',
locked: false,
)
];
return locks;
}
Future<List<Lock>> toggleLocked(int id) async {
// This is a temporary implementation
// In the future a request to change a lock should be made and then the specific lock should be retrieved back and edited.
locks[id] = locks[id].copyWith(locked: !locks[id].locked);
return locks;
}
}
I am changing a state with the following trigger:
context.read<LockCubit>().toggleLocked(focusedIndex);
I am using BlocBuilder like this to build the state:
BlocBuilder<LockCubit, LockState>(builder: (context, state) {
print('State Changed');
if (state is LockInitial) {
return Text('lockInitial');
}
if (state is LocksDisplayed) {
return Swiper(
itemBuilder: (BuildContext context, int index) {
return Column(
children: [
Text(state.locks[index].name),
Text(state.locks[index].locked.toString())
],
);
},
onIndexChanged: onIndexChanged,
loop: true,
itemCount: state.locks.length);
}
if (state is LockError) {
return Text('lockError');
}
return Container();
});
All help would be very appreciated.
Can you check BlocProvider ? I got the same problem. If this bloc inside materialApp, you must pass BlocProvider.value not create in widget.
I am a bit confused, if this could work. But with a bloc you would use an event not a cubit (even though events are based on cubits).
So first of all I would use the standard pattern:
state
event
bloc with mapEventToState
Then, what I also do not see in your code, if you toggle your lock it would look like this in pseudo code
if (event is toggleLock) {
yield lockInProgress();
toggleLock();
yield locksDisplayed;
}
This way your state always changes from locksDisplayed to lockInProgress to locksDisplayed - just as you read in your link above