CODEWITHSUNDEEP
flutterdartblocflutter-bloc
JonasLevin
JonasLevin

Reputation: 2109

Flutter Bloc access response message of an api call in the ui

I'm making a post request and returning a success/error message afterwards. I have my state setup like this:

import 'package:did_flutter_windows/blocs/createDid/formSubmissionStatus.dart';

class CreateDidState {
  final String firstName;
  final String lastName;
  final String email;
  final String phoneNumber;
  final DateTime? dateOfBirth;
  final String sex;
  final String address;
  final String city;
  final String state;
  final String postalCode;
  final String country;
  final FormSubmissionStatus formStatus;

  CreateDidState({
    this.firstName = "",
    this.lastName = "",
    this.email = "",
    this.phoneNumber = "",
    this.dateOfBirth,
    this.sex = "",
    this.address = "",
    this.city = "",
    this.state = "",
    this.postalCode = "",
    this.country = "",
    this.formStatus = const InitialFormStatus(),
  });

  CreateDidState copyWith({
    String? firstname,
    String? lastName,
    String? email,
    String? phoneNumber,
    DateTime? dateOfBirth,
    String? sex,
    String? address,
    String? city,
    String? state,
    String? postalCode,
    String? country,
    FormSubmissionStatus? formStatus,
  }) {
    return CreateDidState(
      firstName: firstname ?? this.firstName,
      lastName: lastName ?? this.lastName,
      email: email ?? this.email,
      phoneNumber: phoneNumber ?? this.phoneNumber,
      dateOfBirth: dateOfBirth ?? this.dateOfBirth,
      sex: sex ?? this.sex,
      address: address ?? this.address,
      city: city ?? this.city,
      state: state ?? this.state,
      postalCode: postalCode ?? this.postalCode,
      country: country ?? this.country,
      formStatus: formStatus ?? this.formStatus,
    );
  }
}

The formstatus represent the different states the Submission can be in. So initial/submitting/success/fail.

import 'package:did_flutter_windows/data/models/did.dart';

abstract class FormSubmissionStatus {
  const FormSubmissionStatus();
}

class InitialFormStatus extends FormSubmissionStatus {
  const InitialFormStatus();
}

class FormSubmitting extends FormSubmissionStatus {}

class SubmissionSuccess extends FormSubmissionStatus {
  final Did did;
  final String successMessage;

  SubmissionSuccess({required this.did, required this.successMessage});
}

class SubmissionFailed extends FormSubmissionStatus {
  final error;

  SubmissionFailed({required this.error});
}

As you can see I pass in the response message to the status of the form but I don't know how to access that message in the ui. I right now have a BlocListener listen to the formstatus and return a static notification if the submission is successfull or failed. But I want to make the message dynamic and display the message returned from the backend passed to the formstatus.

BlocListener<CreateDidBloc, CreateDidState>(
  listener: (context, state) {
    if (state.formStatus is SubmissionSuccess) {
      showSuccessNoti(
          message: state.formStatus.succsessMessage,  //TODO: make mesasge dynamic and display message of formstatus
          context: context);
    } else if (state.formStatus is SubmissionFailed) {
      showErrorNoti(message: "error", context: context);
    }
  },
...

Upvotes: 1

Views: 946

Answers (1)

Baraa Aljabban
Baraa Aljabban

Reputation: 1152

if I got you correctly

BlocListener<CreateDidBloc, CreateDidState>(
  listener: (context, state) {
    if (state is SubmissionSuccess) {
      showSuccessNoti(
          message: state.successMessage,  //TODO: make mesasge dynamic and display message of formstatus
          context: context);
    } else if (**state is SubmissionFailed**) {
      showErrorNoti(message: **state.error**, context: context);
    }
  },

and from the Bloc :

  final result = await apiCall() 

yield SubmissionSuccess(state.successMessage: result.message);

in this case you will pass from the Bloc to the SubmissionFailed the error you got and will display it as it is from the backend

Upvotes: 1

Related Questions