CODEWITHSUNDEEP
flutter
hok khai
hok khai

Reputation: 9

dropdown_search how to show hintText on search field

1

DropdownSearch<T>(
      dropdownBuilder: (context, data) {
        return AutoSizeText(
          displayProperty(data) ?? "",
          maxLines: 1,
          style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
        );
      },
      popupProps: PopupProps.menu(
        fit: FlexFit.loose,
        // showSelectedItems: true,
        // interceptCallBacks: true,
        itemBuilder: popupItemBuilder ??
            (context, data, selected) {
              return Container(
                margin: const EdgeInsets.symmetric(horizontal: 8),
                decoration: const BoxDecoration(
                  border: Border(bottom: BorderSide(color: Colors.black12)),
                ),
                child: ListTile(
                  title: Text(
                    displayProperty(data) ?? "",
                    maxLines: 1,
                    style: AppTheme.subtitle1,
                  ),
                ),
              );
            },
        showSearchBox: showSearchBox,
        emptyBuilder: (context, data) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Text("No Data in $label was found."),
          ),
        ),
      ),
      asyncItems: (String? data) => getData(),
      // focusNode: focusNode,
      onSaved: onSaved,
      selectedItem: value,
      validator: !isRequired
          ? null
          : validator ??
              (value) => value == null ? "$label can't be empty" : null,
      // mode: Mode.MENU,
      // showClearButton: enable,
      key: keyX,
      enabled: enable,

      // maxHeight: maxHeight,
      dropdownDecoratorProps: DropDownDecoratorProps(
        dropdownSearchDecoration: InputDecoration(
          labelText: label,
          errorMaxLines: 2,
          isDense: false,
          enabledBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.black45)),
          // border: const OutlineInputBorder(),
          errorBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
          ),
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.lightGreen),
          ),
        ),
      ),
      itemAsString: (data) => displayProperty(data) ?? "",
      onChanged: onChanged,
    );

Upvotes: 0

Views: 1423

Answers (2)

Creative Meg
Creative Meg

Reputation: 51

I added mine like this and it worked.

DropdownSearch<dynamic>(
                      popupProps: const PopupProps.menu(
                          showSearchBox: true,
                          searchFieldProps: TextFieldProps(
                            decoration: InputDecoration(
                              border: OutlineInputBorder(),
                              contentPadding:
                                  EdgeInsets.fromLTRB(12, 12, 8, 0),
                              hintText: "search staff...",
                            ),
                          )),

Upvotes: 1

pmatatias
pmatatias

Reputation: 4404

its empty because you build the field with empty string.

displayProperty(data) ?? "", this is return empty string when data is null.

DropdownSearch<T>(
  dropdownBuilder: (context, data) {
   return AutoSizeText(
      displayProperty(data) ?? "your Hint Text here",
      maxLines: 1,
      style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
     );
   },
.......

UPDATE

if you want to add hint text on popup search field you can add this to you code

searchBoxDecoration: InputDecoration(
                  border: OutlineInputBorder(),
                  contentPadding: EdgeInsets.fromLTRB(12, 12, 8, 0),
                  hintText: "hint goes here",
                )

you can found it from plugin owner : https://github.com/salim-lachdhaf/searchable_dropdown/issues/138#issuecomment-808702346

Upvotes: 0

Related Questions