searchable_listview: Filtering List In Flutter Made Easy
Effective list display and filtering functionalities are integral components for any app, as they enhance user experience and streamline information accessibility. Nearly every application incorporates list displays accompanied by filtering options, and users anticipate a seamless and swift interaction with these features. The responsiveness and efficiency of list displays, coupled with intuitive and speedy filtering mechanisms, are paramount for ensuring a smooth user experience without unnecessary complications. Developers, in turn, are tasked with the responsibility of swiftly and robustly implementing these features to meet user expectations and contribute to the overall stability of the application.
Manual implementation for this feature
Flutter developers commonly employ ListViewor ListView.builder() to present lists within their applications. To enable users to filter the displayed list, a TextField widget is typically integrated. Managing the state of the displayed list is crucial, and developers often achieve this through setState or explore more advanced state management solutions such as Bloc or Redux. To illustrate, consider the following code snippet, which exemplifies the implementation. Admittedly, it may appear extensive at first glance — a sentiment shared by many developers 🙃 .
Searchable listview package presentation
The aforementioned example inspired me to create a dedicated package aimed at simplifying the seamless integration of a versatile component designed for both displaying and filtering lists in your application. This package extends beyond the conventional ListView.builder approach, offering a comprehensive set of features, including:
1. Direct Linking to Async Data Callbacks: Seamlessly link your asynchronous data callback directly to the component.
2. Filtering on Expansion Lists: Enable efficient filtering within expansion lists for a more dynamic user experience.
3. Sortable Items Widget: Integrate a convenient sorting widget to easily organize the displayed items.
4. Pagination Support: Facilitate efficient navigation through large datasets with built-in pagination support.
5. Pull-to-Refresh List Feature: Enhance user interaction by incorporating a pull-to-refresh functionality for seamless data updates.
For a detailed overview of the package and its functionalities, you can explore the complete presentation on
Elevate your list management capabilities with this feature-rich package, streamlining development and enhancing the user experience in your Flutter applications.
Displaying a basic listview using SLV
To effortlessly incorporate a ListView using the SLV package, only three parameters are required — the bare minimum for a seamless integration. These parameters include the list of data to be displayed, the builder function responsible for generating the widgets within the list, and a callback function for filtering the list based on a specified query. This minimalistic yet powerful approach simplifies the process, making it both efficient and effective.
Here’s a practical example to illustrate the implementation.
return SearchableList<Actor>(
builder: (list, index, item) {
return ActorItem(actor: item);
},
initialList: actors,
filter: (p0) {
return actors.where((element) => element.name.contains(p0)).toList();
},
);Using asynchronous data with SLV
Displaying asynchronous data becomes a breeze for developers with just three essential parameters — quite astonishing, isn’t it? 😳 The asynchronous callback, the powerhouse behind fetching the list of data in the future, takes center stage. Next up is the builder callback, mirroring its simpler list counterpart, responsible for generating the necessary widgets. Lastly, there’s another callback specifically designated for filtering the data obtained from the initial asynchronous callback. This streamlined approach simplifies the developer experience, requiring only these three parameters to effortlessly manage asynchronous data.
the example below explains more the second constructor
return SearchableList<Actor>.async(
builder: (displayedList, itemIndex, item) {
return ActorItem(actor: displayedList[itemIndex]);
},
asyncListCallback: () async {
await Future.delayed(const Duration(seconds: 5));
return actors;
},
asyncListFilter: (query, list) {
return actors
.where((element) =>
element.name.contains(query) ||
element.lastName.contains(query))
.toList();
},
);Searching in an Expansion Panel List
Another compelling aspect of incorporating the SLV package into your project is the ability to create an expansion panel list with a filter, allowing you to dynamically refine the data beneath each expansion item — quite intriguing, isn’t it? 🤔
To better illustrate this functionality, here’s a practical example.
return SearchableList<Actor>.expansion(
expansionListData: mapOfActors,
expansionTitleBuilder: (p0) {
return Container(
color: Colors.grey[300],
width: MediaQuery.of(context).size.width * 0.8,
height: 30,
child: Center(
child: Text(p0.toString()),
),
);
},
filterExpansionData: (p0) {
final filteredMap = {
for (final entry in mapOfActors.entries)
entry.key: (mapOfActors[entry.key] ?? [])
.where((element) => element.name.contains(p0))
.toList()
};
return filteredMap;
},
style: const TextStyle(fontSize: 25),
expansionListBuilder: (int index) => ActorItem(actor: actors[index]),
emptyWidget: const EmptyView(),
inputDecoration: InputDecoration(
labelText: "Search Actor",
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.blue,
width: 1.0,
),
borderRadius: BorderRadius.circular(10.0),
),
),
);
}Conclusion & Contribution
The Searchable ListView offers a straightforward, efficient, and rapid solution for implementing a dynamic list view with comprehensive filtering and sorting capabilities tailored to your project requirements. Beyond its fundamental functionalities, this package boasts a range of additional features that I encourage you to explore in the comprehensive documentation.
As with any Flutter package, the Searchable ListView is an open-source project. As a developer, your contributions are welcome — feel free to submit Pull Requests (PRs), raise Issues, or share your valuable suggestions to enhance and refine the package further. Your engagement is pivotal to the continuous improvement of this tool for the entire developer community.
