Bloc: Question how to update different widget with different states
I have three widget. One shows default Address. One is a button to show list of Address. The last widget is Address list itself. After event PageOpen fired, it will yield DefaultAddressLoaded and update first widget. When button is clicked, event OpenListAddress fired and it will yield ListAddressLoaded and update List widget.
The proble is, when state is ListAddressLoaded, default address become error because there is no address field return by the state. I think about insert both address and list address in both state, but i dont think that is the best solution. What is the best approach?
My code is something like this
This is the event
`@immutable
abstract class AddressEvent extends Equatable {
const AddressEvent();
}
class PageOpen extends AddressEvent {
const InitDefaultAddress();
@override
List
class OpenListAddress extends AddressEvent {
const OpenListAddress();
@override
List
This is the state
`@immutable
abstract class AddressState extends Equatable {
const AddressState();
}
class DefaultAddressLoaded extends AddressState {
final Address address; //only return one address
const AddressLoaded(this.address);
@override
List
class ListAddressLoaded extends AddressState {
final List
const ListAddressLoaded(this.list);
@override
List
`class AddressBloc extends Bloc
final AddressRepository addressRepository;
AddressBloc(this.addressRepository);
@override
AddressState get initialState => InitState();
@override
Stream
AddressEvent event,
) async* {
if (event is PageOpen) {
yield* mapPageOpenToState();
} else if (event is OpenListAddress) {
yield* mapOpenListAddressToState();
}
}
Stream
yield Loading();
try {
Address address = await addressRepository.getDefaultAddress();
if (address == null){
yield NoAddressLoaded();
} else {
yield DefaultAddressLoaded(address);
}
} catch (e) {
yield ErrorLoading(e.toString());
}
}
Stream
yield Loading();
try {
List list = await addressRepository.getAllAddress();
yield ListAddressLoaded(list);
} catch (e) {
yield ErrorLoading(e.toString());
}
}
}
`
And my UI is something like this
BlocBuilder<AddressBloc, AddressState>(
builder: (context, state){
if (state is DefaultAddressLoaded){
AddressWidget(address: state. address);
} else if (state is ListAddressLoaded){
ListAddressWidget(listaddress: state.list)
}
},
);
ZipoNamberwan
All 8 comments
Hi @ZipoNamberwan 馃憢
You'd be better of going with a single state class where you keep both the default address and the list of addresses.
Hope it helps you 馃憤
narcodico
on 25 May 2020
Thank you for your help @RollyPeres . The problem is, when I have error only in loading address list it also affect default address widget coz it is a single state. What I really mean is like setState to only ListAddress variable or DefaultAddress variable.
ZipoNamberwan
on 25 May 2020
@ZipoNamberwan well depends on how you're handling those errors. If you just show a snackbar that's tied to the scaffold so it won't affect your UI.
But if you're planning to have the error message shown on each widget then you should keep separate error message fields on the state and build each widget using a BlocBuilder with a condition to only match the fields you care about(e.g.: default address + error message for it). That will ensure your default address widget won't rebuild when the list changes or errors.
You could go even more granular and create one widget for default address and a separate one for it's error message(if your requirements + UI allows for it) and properly pass the condition to each BlocBuilder to match proper field. 馃憤
narcodico
on 25 May 2020
Thank you so much @RollyPeres . It is a nice solution using condition there. One more question, how to send value of default address to other page? Because last yield state is not always DefaultAddressLoaded. I mean how to get the variable value of default address so i can pass it to other page?
ZipoNamberwan
on 25 May 2020
@ZipoNamberwan glad you found it helpful.
As I mentioned earlier, you should be using a single state class and not split your state into multiple subclasses, since this particular scenario doesn't play well with that.
narcodico
on 25 May 2020
As always, thanks @RollyPeres for taking the time to answer! 馃檹
@ZipoNamberwan closing this for now but feel free to comment with additional questions and I鈥檓 happy to continue the conversation 馃憤
felangel
on 26 May 2020
Hi @felangel @RollyPeres . I still feel confused with this bloc pattern. This is scenario i have
I have list view with the data comes from API. Every time user hit end of scroll it will fetch other data from API. I know how to do this.
But problem happen when I have to add filter in the list view. What I confuse is how to maintain filter param when user hit end of scroll.
this is my event
`@immutable
abstract class RestaurantListEvent extends Equatable {
const RestaurantListEvent();
}
class GetRestaurantList extends RestaurantListEvent {
final String address;
const GetRestaurantList(this.address);
@override
List
class LoadMore extends RestaurantListEvent {
final String address;
const LoadMore(this.address);
@override
List
this is my state
`@immutable
abstract class RestaurantListState extends Equatable {
const RestaurantListState();
}
class LoadingRestaurantList extends RestaurantListState {
const LoadingRestaurantList();
@override
List
class SuccessRestaurantList extends RestaurantListState {
final List
const SuccessRestaurantList(this.restaurants);
@override
List
class ErrorRestaurantList extends RestaurantListState {
final String message;
ErrorRestaurantList(this.message);
@override
List
class InitialRestaurantListState extends RestaurantListState {
const InitialRestaurantListState();
@override
List
class NoRestaurantListAvailable extends RestaurantListState {
const NoRestaurantListAvailable();
@override
List
and this is my bloc. There is field page, sortBy and cusineType here to filter the list. How should I add this filter functionality?
class RestaurantListBloc
extends Bloc
DataRepository repository = DataRepository();
List
int page = 0;
String sortBy;
List
@override
RestaurantListState get initialState => InitialRestaurantListState();
@override
Stream
RestaurantListEvent event,
) async* {
if (event is GetRestaurantList) {
yield* mapGetRestaurantListToState(event.address, page);
} else if (event is LoadMore) {
yield* mapLoadMoreToState(event.address);
}
}
Stream
String address, int page) async* {
try {
List
await repository.getRestaurantList(address, page);
currentList = restaurants;
if (restaurants.isEmpty) {
yield NoRestaurantListAvailable();
} else {
yield SuccessRestaurantList(currentList);
}
} catch (e) {
//yield ErrorRestaurantList(e.toString());
}
}
Stream
page = page + 1;
try {
List
await repository.getRestaurantList(address, page);
currentList = currentList + restaurants;
if (restaurants.isEmpty) {
yield NoRestaurantListAvailable();
} else {
yield SuccessRestaurantList(currentList);
}
} catch (e) {
//yield ErrorRestaurantList(e.toString());
}
}
}
Thx for your help
ZipoNamberwan
on 4 Jun 2020
Your approach depends on what your UI should look like(is the filtered list going to replace the all items one or it's going to be shown in a different screen?) and where you're doing the filtering (client side or server side?).
But first of all, you would not want to have state inside your bloc, so fields like:
List currentList = List();
int page = 0;
String sortBy;
List cusineType;
should be in the state class.
narcodico
on 4 Jun 2020
Related issues
krusek
路
3Comments
clicksocial
路
3Comments
Reidond
路
3Comments
RobPFarley
路
3Comments
frankrod
路
3Comments
Most helpful comment
Thank you so much @RollyPeres . It is a nice solution using condition there. One more question, how to send value of default address to other page? Because last yield state is not always DefaultAddressLoaded. I mean how to get the variable value of default address so i can pass it to other page?