Auto-Complete Search Functionality in Flutter

Auto-complete search functionality enhances user interaction by predicting and displaying search results in real-time as the user types.

This not only simplifies the search process but also provides a more engaging and efficient user experience.

We will guide you through the process of building a Flutter application with autocomplete search functionality, focusing on Nepalese cities as our example dataset.

In this blog post, we will explore how to create a simple Flutter application that allows users to search for cities in Nepal automatically.

The app will utilize a predefined list of Nepalese cities and implement search functionality for a seamless user experience.

Setting up the Flutter Project:

Firstly, make sure you have Flutter and Dart installed on your system. Create a new Flutter project by running the following command in your terminal:

flutter create nepal_city_search cd nepal_city_search

Open the project in your preferred code editor.

Defining the City List:

We will use a list of Nepalese cities to populate our search functionality. Define the list as follows:

List<String> nepalCities = [
  'Kathmandu',
  'Pokhara',
  'Lalitpur',
  'Biratnagar',
  'Bharatpur',
  'Butwal',
  // Add more cities...
];

Implementing the Search Functionality: To create a dynamic search, we’ll utilize the TextField widget for user input and update the UI in real time. Add the following code to the Flutter app:

class _MyHomePageState extends State<MyHomePage> {
  List<String> filteredCities = [];

  void filterCities(String query) {
    setState(() {
      filteredCities = nepalCities
          .where((city) => city.toLowerCase().contains(query.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nepal Cities Search'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              onChanged: (query) => filterCities(query),
              decoration: InputDecoration(
                labelText: 'Search Cities',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filteredCities.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(filteredCities[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Explanation:

• The filterCities the function is responsible for updating the filteredCities list based on the search query.
• We use the TextField widget for user input and listen to the onChanged callback to trigger the search function.
• The UI is updated using the setState method to reflect changes in the search results.

Running the App: Now, you can run your Flutter app by executing:

flutter run

This will launch the app on your emulator or connected device.

Output:

Conclusion

In this blog post, we’ve walked through the process of building a simple Flutter application that enables users to search for cities in Nepal.

Flutter’s flexibility and ease of use make it a powerful framework for developing interactive and dynamic mobile applications. You can further enhance the app by integrating additional features or improving the user interface.