form_bloc icon indicating copy to clipboard operation
form_bloc copied to clipboard

Best way to show conditional text in form bloc?

Open JulianSwales opened this issue 5 years ago • 6 comments

What is the best way to show conditional text widgets (read only, not input) in a form when using this library? I have a requirement based on selections made in the form, to show data, and other selection fields. So for the selection fields I've been using the onchange and adding or removing. However I'd like to do the add or remove a regular text widget. Any thoughts on the best solution for that? Thanks.

JulianSwales avatar Aug 10 '20 03:08 JulianSwales

hello, this could be an option

CanShowFieldBlocBuilder(
  fieldBloc: formBloc.conditionalField,
  builder: (context, canShow) {
    return Text('Conditional Label');
  },
),

GiancarloCode avatar Aug 10 '20 04:08 GiancarloCode

Ok, this is getting there.. I have it working with static text. Is there a way to pass in a variable so that the Text can show a dynamic message? I am attempting a booking screen, where the users selects a date and time, this is all working well and dynamically responding , however I then need to present some dynamic data from the response, in text form, along with new fields. Everything works except for displaying the dynamic text.

JulianSwales avatar Aug 10 '20 13:08 JulianSwales

where does the dynamic text come from?

GiancarloCode avatar Aug 10 '20 13:08 GiancarloCode

When the user changes the startTime it does a lookup and returns bookingInfo. I would like to integrate that into some text in a Text widget to display along with, as you can see some other fields. The conditionalField below is the one that I'm using that CanShowFieldBlocBuilder on..

    startTime.onValueChanges(onData: (previous, current) async* {
      print('current: $current');
      final bookingInfo = await bookingsRepository.getSimAvail(
          bookingDate.value, '14:00', int.parse(numberOfHours.value));
      print('bookingInfo: ${bookingInfo}');
      if (bookingInfo != null) {
        print('adding NumberOfPlayers');
        addFieldBlocs(fieldBlocs: [conditionalField, numberOfPlayers, players]);
      } else {
        removeFieldBlocs(fieldBlocs: [numberOfPlayers, players]);
      }
    });

JulianSwales avatar Aug 10 '20 13:08 JulianSwales

  1. set the type of ExtraData in the field bloc, String or any Class this is used for you to add whatever you want to the state of field bloc
final textField = TextFieldBloc<BookingInfo>();
  1. update the object using field.updateExtraData()
...
      if (bookingInfo != null) {
        textField.updateExtraData(bookingInfo);
      }
... 
  1. access to this object with a bloc builder
CanShowFieldBlocBuilder(
  fieldBloc: formBloc.textField,
  builder: (context, canShow) {
    return BlocBuilder<TextFieldBloc<BookingInfo>, TextFieldBlocState<TextFieldBloc>>(
      cubit: formBloc.textField,
      builder: (context, state) {
        return Text(state.extraData.someValue);
      },
    );
  },
),

GiancarloCode avatar Aug 10 '20 13:08 GiancarloCode

I would like to thank you for your assistance on this.. I now have this piece working and it's pretty slick...

JulianSwales avatar Aug 10 '20 16:08 JulianSwales