DropdownFieldBlocBuilder with search

[devZakariya]

Hello
thank you a lot for this project
please can you add search to the DropdownField
thank you

[GiancarloCode]

Hello, you can use any widget with form_bloc easily, please find one and I will gladly tell you how, maybe in the future I will integrate one.
For example this, I remain attentive :)
https://pub.dev/packages/select_dialog

[devZakariya]

thank you for your feedback
https://pub.dev/packages/select_dialog looks great and that's exactly what i(m talking about.
i also worked with this https://pub.dev/packages/searchable_dropdown, if you can integrate it will be helpful
Thanks in advance

[GiancarloCode]

Hello, for the moment I will not integrate them, in future versions when the internal API improves a little it will be easier to add widgets :)

But it is quite simple, just do the following steps:

1. create a BlocBuilder
2. Create a GestureDectector
3. create widget to show the current value, for example InputDecorator with Text
4. In onTap show the widget for select
5. Use state.items in the items of select widget
6. Use fieldBloc.updateValue to update the value in the widget callback

If you want to reuse it, just add the parameters you need

dependencies:
  select_dialog: ^1.0.7

class SelectDialogFieldBlocBuilder<Value> extends StatelessWidget {
  const SelectDialogFieldBlocBuilder({
    Key key,
    @required this.selectFieldBloc,
  }) : super(key: key);

  final SelectFieldBloc<Value, Object> selectFieldBloc;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<SelectFieldBloc, SelectFieldBlocState>(
      bloc: selectFieldBloc,
      builder: (context, state) {
        return GestureDetector(
          child: InputDecorator(
            decoration: InputDecoration(
              labelText: 'Dropdown with search',
              errorText: state.canShowError
                  ? FieldBlocBuilder.defaultErrorBuilder(
                      context,
                      state.error,
                      selectFieldBloc,
                    )
                  : null,
            ),
            child: Text(state?.value ?? ''),
          ),
          onTap: () {
            SelectDialog.showModal<Value>(
              context,
              label: "Select an option",
              selectedValue: state.value,
              items: state.items,
              onChange: selectFieldBloc.updateValue,
              searchBoxDecoration: InputDecoration(
                hintText: 'Awesome hint',
              ),
            );
          },
        );
      },
    );
  }
}

class MyFormBloc extends FormBloc<String, String> {
   final select1 = SelectFieldBloc(
    items: ['Option 1', 'Option 2'],
  );
  //...
}

...
build...
SelectDialogFieldBlocBuilder(
  selectFieldBloc: formBloc.select1,
),
...

---

If you create or find any awesome widget in pub, create a request to add support for it :)

[devZakariya]

thank you a lot, you are the best