Select Provider is an item picker that open a dropdown bottom sheet to select item from.

Features

Select Provider

Getting started

Select Provider

Usage

Select Provider

    const providerController = TextEditingController();
    final provider = await RxItemPicker.picker<Provider>(
      title: "Select Provider",
      selectedFilterColor: environment.theme.primary.color,
      unselectedFilterColor: environment.theme.primary.textColor,
      value: providers.firstWhereOrNull(
          (element) => element.name == providerController.text),
      values: providers
          .map(
            (e) => RxItemPickerDto(
              value: e,
              search: [e.id, e.name].join(" "),
            ),
          )
          .toList(),
      itemBuilder: (context, item) => Row(
        children: [
          createProviderIcon(item.value.id),
          Text(item.value.name),
        ],
      ),
    );
    if (provider == null) {
      return;
    }
    providerController.text = provider.value.name;

Additional information

 final plan = await RxItemPicker.picker<Plan>(
      title: "Select a Plan",
      fullscreen: true,
      initialFilter: "daily",
      filters: ["Daily", "Weekly", "Monthly", "2 Months", "Yearly"],
      selectedFilterColor: environment.theme.primary.color,
      unselectedFilterColor: environment.theme.primary.textColor,
      value: plans
          .firstWhereOrNull((element) => element.id == planController.text),
      values: plans
          .map((e) => RxItemPickerDto(
                name: e.name,
                value: e,
                search: e.name,
              ))
          .toList(),
    );
    if (plan == null) {
      return;
    }