How can I add vertically a widget between the Search field and the list

[burekas7]

Use case

Hi,

I need to add vertically a widget between the seach field the the list area.

I see there is option for "secondaryWidget", but it adds the widget alongside the search field, so it's not what I need.
How can I do that?

Proposal

No response

[koukibadr]

Hello @burekas7
Actually there's no direct way to do this behavior but here's an example how to achieve this with current package

return SearchableList<Actor>(
      textAlignVertical: TextAlignVertical.center,
      searchFieldHeight: 40,
      lazyLoadingEnabled: false,
      sortPredicate: (a, b) => a.age.compareTo(b.age),
      itemBuilder: (item) {
        int index = filteredActors.indexOf(item);
        if (index == 0) {
          return Container(
            color: Colors.red,
            height: 10,
            width: 300,
          );
        } else {
          return ActorItem(actor: filteredActors[index - 1]);
        }
      },
      emptyWidget: Column(
        children: [
          Container(
            color: Colors.red,
            height: 10,
            width: 300,
          ),
          const Column(
            children: [Icon(Icons.error), Text('No Data found')],
          )
        ],
      ),
      filter: (query) {
        filteredActors = actors
            .where((element) =>
                element.name.toLowerCase().contains(query.toLowerCase()) ||
                element.lastName.toLowerCase().contains(query.toLowerCase()))
            .toList();
        return filteredActors;
      },
      initialList: actors,
    );

Forcing the itemBuilder to render a widget at first index and then render other widgets of the list , note that the widget will be scrollable with the list

[burekas7]

@koukibadr
Thanks.
You could also consider adding an option in the future to determine whether the secondaryWidget appears next to the search field or below.

[koukibadr]

Yes it's a good enhancement I'll plan it in the next release