Flutter Search Bar — The correct way

2 min readFeb 19, 2024

In the realm of mobile application development, particularly with Flutter, implementing a search functionality that is both efficient and user-friendly is crucial for enhancing user experience. Today, I will guide you through the process of creating a search bar in Flutter using the SearchDelegate class and GetX controllers, a method that stands out for its simplicity and effectiveness.

Setting Up the Search Controller

First and foremost, let’s define our search controller, ContactsSearchBarController, which will utilize GetX for state management. This controller will be responsible for filtering our contacts based on the user’s search query. Here’s how it looks:

import 'package:contacts_service/contacts_service.dart';
import 'package:get/get.dart';
import 'contact_list_controller.dart';

class ContactsSearchBarController extends GetxController {
  ContactListController contactsListController = Get.put(ContactListController());
  RxList<Contact> searchResults = RxList<Contact>();

  Future<void> search(String query) async {
    print("Search term: $query");
    if (contactsListController.contactsList.isNotEmpty) {
      print("Contacts list is not empty");
      searchResults.clear(); // Clear previous search results
      for (Contact contact in contactsListController.contactsList) {
        if (contact.displayName!.toLowerCase().contains(query.toLowerCase())) {
          searchResults.add(contact); // Add the contact to the searchResults list
        }
      }
      print(searchResults.isEmpty ? "Search result is empty" : "Found ${searchResults.length} results");
    } else {
      print("Contacts list is empty");
    }
  }
}

Creating the Search Bar Screen

Next, we will create a ContactSearchBarScreen that extends SearchDelegate. This component will render the search bar and handle the display of search results and suggestions. To customize the appearance of our search bar and its functionality, we override several methods provided by the SearchDelegate class:

import 'package:contacts_service/contacts_service.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '/contacts_search_controller.dart';
import '/contact_controller.dart';
import '/helper/route_helper.dart';
import '/util/color_resources.dart';
import '/util/images.dart';

class ContactSearchBarScreen extends SearchDelegate {
  final ContactsSearchBarController contactsSearchController = Get.put(ContactsSearchBarController());

  @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      appBarTheme: AppBarTheme(
        backgroundColor: ColorResources.gradientBlue,
        elevation: 0,
      ),
      textTheme: const TextTheme(
        titleLarge: TextStyle(fontSize: 16.0, color: Colors.white),
      ),
      inputDecorationTheme: const InputDecorationTheme(
        border: InputBorder.none,
        hintStyle: TextStyle(fontSize: 16.0, color: Colors.white60),
      ),
    );
  }

  @override
  String get searchFieldLabel => 'Search contacts';

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: const Icon(Icons.clear),
        onPressed: () => query = '',
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => close(context, null),
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    contactsSearchController.search(query);
    return Obx(() => ListView.builder(
      itemCount: contactsSearchController.searchResults.length,
      itemBuilder: (context, index) {
        var result = contactsSearchController.searchResults[index];
        // ListTile to display each result
      },
    ));
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // Suggestions logic
  }
}

This setup provides a functional and visually appealing search feature, leveraging Flutter’s powerful SearchDelegate and the state management capabilities of GetX.

Conclusion

Integrating a search feature in your Flutter application doesn’t have to be complicated. By utilizing the SearchDelegate class and GetX controllers, you can implement an efficient and user-friendly search functionality. This approach not only simplifies the development process but also enhances the overall user experience by providing quick and relevant search results.

Flutter Search Bar — The correct way

Setting Up the Search Controller

Creating the Search Bar Screen

Conclusion

References

Written by Chanaka