I am working on a flutter project where i am calling an Api using bloc provider and emiting a state if i got the output.When i printed the output in cubit its working and after emiting that output i cant get it in bloc builder, even the state is also not printing in bloc builder.
my api fetch code is as below
Map<String, dynamic> fields = {'upload_id': widget.content.id};
ApiModel apiData = (ApiModel(
fields: fields,
token: userToken == null ? userDataGlobal['data'].token : userToken,
));
if (widget.content.isSeries) {
BlocProvider.of<SeasonCountCubit>(context).getSeasonCount(apiData);
BlocBuilder<SeasonCountCubit, SeasonCountState>(
builder: (context, state) {
print('state is $state');
if (state is SeasonCountLoaded) {
print('season Cout is ${(state as SeasonCountLoaded).data}');
setState(() {
int seasonCount = (state as SeasonCountLoaded).data;
});
}
return CircularProgressIndicator();
});
}
and my cubit is as follows
part 'season_count_state.dart';
class SeasonCountCubit extends Cubit<SeasonCountState> {
final Repository repository;
SeasonCountCubit({this.repository}) : super(SeasonCountInitial());
getSeasonCount(ApiModel fields) {
repository.getSeasonCount(fields).then((datas) {
emit(SeasonCountLoading());
print('seson count in cubit $datas');
seasonCount = datas;
emit(SeasonCountLoaded(data: datas));
});
}
}
part of 'season_count_cubit.dart';
#immutable
abstract class SeasonCountState {}
class SeasonCountInitial extends SeasonCountState {}
class SeasonCountLoading extends SeasonCountState {}
class SeasonCountLoaded extends SeasonCountState {
final int data;
SeasonCountLoaded({this.data});
}
Anyone please help me with this..
Related
I have 2 widgets on a screen - A and B. There is an event
performed on widget B, on which the state of A and B should
get updated.
I have used different blocs and states for each of them and used the approach of Futures to get data from api while loading the screen.
On an event of widget B, how can I update state of both the widgets A and B without calling the api again as I can get the data from previous session and also from the response of event on widget B, it is possible to build the state on the UI itself.
Adding code:
class BlocA extends Bloc<BlocAEvent,BlocAState>
{
BlocA():super(InitialState()){
on<GetData>(_getBlocAData);
}
}
void _getBlocAData(GetData event, Emitter<BlocAState>emit)
async{
try {
List<User> getDataResponse = await
DataService().getWidgetAData(
event.userid);
emit(BlocALoadedState(BlocAData: getDataResponse));
}
catch(e){
rethrow;
}}
class InitialState extends BlocAState{}
class BlocALoadedState extends BlocAState{
final List<User> BlocAData;
BlocALoadedState({required this.BlocAData});
}
BlocB:
abstract class BlocBStates {}
class BlocBLoadedState extends BlocBStates{
List<User> BlocBdata;
BlocBLoadedState({required this.BlocBdata});
}
class BlocBAcceptedState extends BlocBStates{
User user;
BlocBAcceptedState({required this.user});
}
Now, BlocB has event which fetches data from a different
enter code heresource.
class BlocB extends Bloc<BlocBEvent,BlocBState>
{
BlocB():super(InitialState()){
on<GetData>(_getBlocBData);
on<BlocBevent>(_onClickofaButtoninWidgetB);
}
}
void _getBlocBData(GetData event,
Emitter<BlocBState>emit)
async{
try {
List<User> getDataResponse = await
DataService().getWidgetBData(
event.userid);
emit(BlocBLoadedState(BlocBData: getDataResponse));
}
catch(e){
rethrow;
}}
void _onClickofaButtoninWidgetB(BlocBevent event,
Emitter<BlocBStates>emit) {
User blocBEventResponse = await
DataService().acceptRequest(
event.senderId,event.receiverId)
// From this response, I want to add this entry to bloc A's
// state and remove from bloc B's state
}
use BlocListener
BlocProvider(
create: BlocA(),
child: BlocListener<BlocB, StateB>(
listener: (context, state) {
if (state is StateBLoading) {
context.read<BlocA>().add(EventALoading());
} else if (state is StateBLoaded) {
context.read<BlocA>().add(EventALoaded(state.someData));
}
},
child: WidgetA();
);
}
I update BLOC state using this context.read<SurveyBloc>().add(SurveyChanged(surveys: data)); in my bloc file updated value is printed but after i navigated to next page value is not updated. that also using same bloc.
bloc file snippet
if (event is SurveyChanged) {
print("SurveyChanged:"+ event.surveys.survey_name);
yield state.copyWith(surveys: event.surveys);
}
this is how i update my bloc & navigate to next page
onTap: () {
context.read<SurveyBloc>().add(SurveyChanged(surveys: data));
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return SurveyView();
}));
}
surveyEvent.dart
import 'package:whfms_mobile_app/models/ModelProvider.dart';
abstract class SurveyEvent {}
class SurveyHome extends SurveyEvent{
}
class SurveyResultChanged extends SurveyEvent {
final String surveyResult;
SurveyResultChanged({this.surveyResult});
}
class SurveyModeChanged extends SurveyEvent {
final String mode;
SurveyModeChanged({this.mode});
}
class SurveyChanged extends SurveyEvent {
final Surveys surveys;
SurveyChanged({this.surveys});
}
class SaveSurveyChanges extends SurveyEvent {}
my app structer same as this repo
newState = state.copyWith(surveys: event.surveys);
...
yield newState;
I am using model to convert data to map. When I pass value to the model from class A it returns a map and then I am passing the returned value (Map) to class B. Before sending the valuing I am printing value in class A (It is showing data) but in class B it is showing null. here is class A function.
///Dummy Data remove later
jobPostModel = JobPostModel(
jobPost: 'Web design',
);
var data = jobPostModel.toJob(jobPostModel);
print('before $data');
JobPostScreen8(data);
Here is Model class function which is returning Map
class JobPostModel {
String jobPost;
JobPostModel(
{this.jobPost});
Map toJob(JobPostModel info){
var data = Map<String, dynamic>();
data['jobPost'] = info.jobPost;
return data;
}
factory JobPostModel.fromJob(Map<String, dynamic> data){
return JobPostModel(
jobPost: data['jobPost']
);
}
}
and here is other class where i must display data but it is showing null
class JobPostScreen8 extends StatefulWidget {
Map jobPostModelMapData;
JobPostScreen8([this.jobPostModelMapData]);
#override
_JobPostScreen8State createState() => _JobPostScreen8State();
}
class _JobPostScreen8State extends State<JobPostScreen8> {
#override
void initState() {
super.initState();
print('after ${widget.jobPostModelMapData}');
}
}
The solution is I was passing directly to class B. All I need is to use Navigation.
BlocListener<JobBloc, JobState>(
listener: (context, state) {
if (state is JobSuccessfulState)
Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => JobPostScreen8(state.data)));
})
here is Bloc
if (event is PreviewPostJob) {
yield JobSuccessfulState(_updateModel());
}
and state
class JobSuccessfulState extends JobState {
var data;
JobSuccessfulState([this.data]);
}
I'm trying to figure out the BLoC library, but it gives me headaches.
I'm trying to fetch hotel names from an API. I have a model and a service responsible for contacting the API and fetching the data. However, I don't know how to connect it to the BLoC library.
Once my app starts, I want BLoC to fetch the data from the API and then show it in the app.
Here's my code:
hotel_model.dart
class Hotels {
final List<Hotel> hotels;
Hotels({this.hotels});
factory Hotels.fromJson(Map<String, dynamic> json) {
return Hotels(
hotels: List<Hotel>.from(
json['hotels'].map(
(x) => Hotel.fromJson(x),
),
),
);
}
}
class Hotel {
final String hotelName;
Hotel({this.hotelName});
factory Hotel.fromJson(Map<String, dynamic> json) {
return Hotel(
hotelName: json['name'],
);
}
}
hotel_service.dart
import 'package:http/http.dart' as http;
abstract class DownloadService {
Future<http.Response> fetchHotels();
}
class HotelService extends DownloadService {
#override
Future<http.Response> fetchHotels() {
final Uri uri = Uri.https('services.lastminute.com', 'mobile/stubs/hotels');
return http.get(uri);
}
}
And here's what I did wit the BLoC lib.
hotel_event.dart
part of 'hotel_bloc.dart';
#immutable
abstract class HotelEvent {}
class OnAppStartEvent extends HotelEvent {}
hotel_bloc.dart
import 'dart:async';
import 'package:bloc/bloc.dart';
import 'package:hotels/models/hotel/hotel_model.dart';
import 'package:hotels/services/hotel/hotel_service.dart';
import 'package:meta/meta.dart';
part 'hotel_event.dart';
part 'hotel_state.dart';
class HotelBloc extends Bloc<HotelEvent, HotelState> {
HotelBloc() : super(HotelFinal());
final HotelService hotelService = HotelService();
#override
Stream<HotelState> mapEventToState(
HotelEvent event,
) async* {
if (event is FetchEvent) {
final response = hotelService.fetchHotels();
yield
}
}
}
hotel_state.dart
part of 'hotel_bloc.dart';
#immutable
abstract class HotelState {
HotelState();
}
class HotelFinal extends HotelState {
final Hotel hotel;
HotelFinal(this.hotel);
Hotel getHotel() {
return hotel;
}
}
First of all add await to this line in your bloc
final response = await hotelService.fetchHotels();
return List<Hotel> from your fetchHotels function
you must have stateful class for your screen and in the initState
you can create your bloc object and call .add method on it
in your build method wrap your widget with BlocBuilder and on builder callback check your bloc state, if the state is HotelFinal return your ui with list of hotels in your state object.
It'll be useful to add another state for your HotelState for when your bloc is fetching the data, and even for when there's an error. e.g;
part of 'hotel_bloc.dart';
#immutable
abstract class HotelState {
HotelState();
}
class HotelFinal extends HotelState {
final Hotel hotel;
HotelFinal(this.hotel);
Hotel getHotel() {
return hotel;
}
}
class HotelLoading extends HotelState {
HotelLoading();
}
class HotelError extends HotelState {
final String error;
HotelError(this.error);
}
You would want to change your mapEventToState to something like this:
#override
Stream<HotelState> mapEventToState(
HotelEvent event,
) async* {
if (event is FetchEvent) {
yield HotelLoading();
try {
final response = await hotelService.fetchHotels();
// It seems like your service doesn't return an hotel directly, so you'll have to deal with this as it is not part of the question.
final hotel = getYourHotelHereWithTheResponse;
yield HotelFinal(hotel);
} catch (e) {
yield HotelError('something went wrong getting the hotel info');
}
}
}
Lastly, add a widget to your widget tree that adds FetchEvent to your bloc and add a BlocBuilder to react to the change of states. Note that this is very flexible and can be done in many ways, but it is out of the scope of your very broad question, I'm just showing you how to use the library at a minimal:
class MyStatefulWidget extends StatefulWidget {
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
HotelBloc hotelBloc;
#override
void initState() {
hotelBloc = HotelBloc..add(FetchEvent());
super.initState();
}
#override
void dispose() {
hotelBloc.close();
super.dispose();
}
#override
Widget build(BuildContext context) {
return BlocBuilder(builder: (context, state) {
if(state is HotelLoading) {
// return a widget to deal with loading
}
if(state is HotelFinal) {
// return a widget to deal with success
}
if(state is HotelError) {
// return a widget to deal with error
}
});
}
}
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