How to create a search bar in Flutter

Key takeaways:

  • Flutter, developed by Google, enables developers to create fast and responsive mobile, web, and desktop applications using a single codebase, ensuring efficiency and consistency across platforms.

  • A search bar is an essential UI element for filtering and searching content quickly within a list, improving user experience in data-heavy applications.

  • By using a TextField widget controlled by a TextEditingController, Flutter allows the creation of a functional search bar. The ListView.builder dynamically displays filtered results as users type.

  • A filterItems function updates a filtered list based on user input in the search bar, ensuring real-time updates and seamless interactivity within the application.

Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one Codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers who want to create beautiful and responsive user interfaces across multiple platforms.

Search bar

A search bar is a user interface element that allows users to provide text to search or filter content. It’s commonly used in applications where we have a list of items and want to search and find specific items within that list quickly.

Create a search bar in Flutter

Let’s follow the steps below to create a search bar in the Flutter application:

1- Create a Flutter project

Let’s start by creating a new Flutter project. For this, open the terminal and execute the following commands:

flutter create searchbar
cd searchbar

2- Create the user interface

We’ll create a TextField for the search bar, which will be controlled by a TextEditingConroller named _searchController. This can be implemented using the following code:

// Search bar controller
TextEditingController _searchController = TextEditingController();
// UI for the search bar
Container(
  padding: EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    color: Colors.grey[300],
  ),
  child: Row(
    children: [
      Icon(Icons.search),
      SizedBox(width: 10),
      Expanded(
        child: TextField(
          controller: _searchController,
          onChanged: (_) => {_filterItems(_searchController.text)},
          decoration: InputDecoration(
            hintText: 'Search...',
            border: InputBorder.none,
          ),
        ),
      ),
    ],
  ),
)

3- Implementation of search bar

We’ll create a list of names in the application using the following code:

 List<String> names = [
  'John',
  'James',
  'Williams',
  'Sarah',
  'Sarmeen',
  'Thomas',
  'Alex'
  ];

Next, we create a list of filtered names that will change when the text in the search bar changes. The application will be initialized with the list of all names at the start.

List<String> _filteredItems = [];
  void initState() {
    // TODO: Implement initState
    super.initState();
    _filteredItems.addAll(names);
  }

Now, we will display the filtered list using ListView.builder, which is given in the code below:

ListView.builder( 
  scrollDirection: Axis.horizontal,
  itemCount: _filteredItems.length,
  itemBuilder: (context, index) {
    return Container(
      margin: EdgeInsets.all(20),
      color: Colors.green.withOpacity(0.2),
      height: 100,
      width: 100,
      child: Center(
        child: Text(_filteredItems[index])
      )
    )
  )

We will create a function that changes the filtered list according to the text in the search bar.

// Function to filter items according to the text in search bar
void _filterItems(String query) {
  setState(() {
    _filteredItems = names
        .where((item) => item.toLowerCase().contains(query.toLowerCase()))
        .toList();
  });
}

Complete implementation

Let’s look at an example showing the complete implementation of the search bar in the Flutter application.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}
Complete implementation of search bar

Note: You can find your application running at the given link once you run the code widget above.

Explanation

  • Lines 51–57: We use a search bar to filter the names from the list of all the names, names.

  • Lines 86–91: We create the search bar using the TextField, which is controlled by the _searchController.

  • Lines 88–111: We create a _filterItems function that takes query as a parameter and updates the _filteredItems list according to the text in the search bar. This _filteredItems list is then displayed under the search bar, which is updated whenever the text in the search bar changes.

Conclusion

Flutter empowers developers to create fast, responsive, and visually appealing applications across mobile, web, and desktop platforms using a single codebase. By incorporating key features like a search bar, developers can enhance user experience through efficient content filtering and navigation. Leveraging tools like TextField, TextEditingController, and ListView.builder, Flutter provides a seamless way to manage dynamic user inputs and display filtered data in real-time, making it an ideal choice for building feature-rich, multi-platform applications.

Further learning

  • Learn how to implement other selection widgets like checkboxes and switches, which provide alternative ways for users to select options in a form or UI.

  • Explore creating custom widgets in Flutter to design reusable, more complex UI components that can be tailored specifically to your app’s requirements.

  • Study how to work with forms, including input fields and validation logic, ensuring user data is correctly formatted and validated before submission.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How do you add a bar in Flutter?

Adding a bar in Flutter typically involves using predefined widgets like AppBar, BottomAppBar, or BottomNavigationBar based on the desired type of bar. For instance, an AppBar can be added at the top of the screen by specifying it in the Scaffold widget’s appBar property. This allows for customization such as adding a title, icons, or actions. Similarly, a BottomAppBar or BottomNavigationBar can be used to create bars at the bottom of the screen for navigation or additional functionalities. These widgets are highly customizable, offering developers the flexibility to align the bar’s design and behavior with their app’s requirements.

How do I add a search filter in Flutter?

Adding a search filter in Flutter involves creating a user interface with a TextField widget for user input and dynamically filtering a list based on the input. First, use a TextEditingController to control and listen for changes in the TextField. Maintain an original list of items and a separate filtered list. Implement a function that updates the filtered list whenever the text in the search bar changes, typically using the onChanged callback of the TextField. Finally, display the filtered list using a widget like ListView.builder to reflect the updates in real-time as users type in the search bar. This approach ensures a responsive and intuitive search experience in your application.

How do you make an animated search bar Flutter?

Creating an animated search bar in Flutter involves using widgets and tools that support animations, such as AnimatedContainer, AnimatedOpacity, or the AnimationController. Here’s a general approach:

  • Set up a base state: Start with a simple UI, including an AppBar or a placeholder where the search bar will appear.

  • Implement animation logic: Use an AnimationController to control the animation’s duration and behavior. For example, you can animate the width or opacity of the search bar when it toggles between visible and hidden states.

  • Use conditional rendering: When the search bar is activated, replace the default UI with a TextField wrapped in an AnimatedContainer or similar widget. This allows smooth transitions in size, shape, or position.

  • Customize user interaction: Add an icon button to trigger the animation. For instance, clicking a search icon can expand the search bar, and clicking a close button can collapse it.

  • Finalize the design: Style the search bar with decorations like rounded corners, shadows, or transitions for a polished look.

By combining these elements, you can create a visually engaging and functional animated search bar to enhance user experience in your Flutter app. For more information, you can check out our Educative course: Responsive and Adaptive UI in Flutter.

What is a TextEditingController, and why is it used?

A TextEditingController is used to manage the text entered in a TextField. It allows accessing, modifying, and clearing the text programmatically.

How can I test my Flutter UI components?

Use Flutter’s built-in testing framework. For widgets, write widget tests to simulate user interactions and validate the UI behavior. Use unit tests for logic and integration tests for end-to-end workflows.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved