Unlock the Power of Search Bars in Your Flutter Apps

Building a Search Bar from Scratch

In this article, we’ll create a bare-bones journal app with a search bar using Flutter’s Material Design. Before we dive in, make sure you have the Flutter development environment set up and are familiar with the basics of Flutter widgets and development.

Setting Up the Sample App

First, create a new project using the Flutter create command. Then, clear out the content of the main.dart file and create a new MaterialApp.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Journal App',
      home: HomeScreen(),
    );
  }
}

Creating the Search Button

Create a new stateful widget named HomeScreen and pass it to the home property of the MaterialApp. Add an AppBar and a title to the app, which will come in handy if you’re practicing your app building skills along with this tutorial.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Journal App'),
      ),
    );
  }
}

Designing the Search Button

Use the AppBar‘s actions property to list various activities, including the search button. We’ll use the IconButton widget, which generates a small animation when pressed, indicating that the user’s selection was registered by the app. Pass in the magnifying glass icon to represent “search.”

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Journal App'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // TO DO: implement search functionality
            },
          ),
        ],
      ),
    );
  }
}

Managing State Changes

To show the text field in the app bar when the search button is pressed, update the app’s state using the setState({}) function. Create two variables inside the HomeScreen widget: one for the icon and one for the widget. These will hold the default search button and title for the AppBar.

class _HomeScreenState extends State<HomeScreen> {
  IconData _customIcon = Icons.search;
  Widget _customSearchBar = Text('Journal App');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _customSearchBar,
        actions: [
          IconButton(
            icon: Icon(_customIcon),
            onPressed: () {
              setState(() {
                // TO DO: implement search functionality
              });
            },
          ),
        ],
      ),
    );
  }
}

Implementing the Search Functionality

In the onPressed function of the IconButton, call the setState function to update the state of the variables. Run an if-else condition to check the current icon and make the correct decision. If it’s not a search icon, update the variables to their defaults/original values.

onPressed: () {
  setState(() {
    if (_customIcon == Icons.search) {
      _customIcon = Icons.cancel;
      _customSearchBar = ListTile(
        title: TextField(
          decoration: InputDecoration(
            hintText: 'Search',
            border: InputBorder.none,
          ),
        ),
      );
    } else {
      _customIcon = Icons.search;
      _customSearchBar = Text('Journal App');
    }
  });
},

Customizing the Search Bar

Inside the if-else logic block, pass in the new state values: assign the cancel icon to the customIcon and a ListTile containing the TextField to the customSearchBar. Adjust the hintText and styles through the InputDecoration widget, and remove the InputBorder using the InputBorder.none property.

With these steps, you’ve successfully implemented a search bar in your Flutter app! Now, you can customize and build search bars in your Flutter applications, empowering users to query databases for specific information.