Flutter: Search field with magnifying glass inside

A few examples of search fields with magnifying glass icons inside in Flutter.

Example 1 (Simple)

The code:Advertisements

Center(
        child: TextFormField(
          decoration: const InputDecoration(
            labelText: "Search",
            prefixIcon: Icon(Icons.search),
          ),
        ),
      ),

Output:

Example 2: Shows the magnifying glass when the field has a focus

The code:

Center(
          child: TextFormField(
            decoration: const InputDecoration(
              labelText: "Search",
              suffix: Icon(Icons.search),
            ),
          ),
        )

Output:

Example 3: Rounded Corners TextFormField with a magnifying glass icon

AdvertisementsThe code:

Center(
            child: Form(
          child: Container(
            width: 300,
            height: 50,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.purple),
                borderRadius: BorderRadius.circular(20)),
            child: TextFormField(
              decoration: const InputDecoration(
                  labelText: "Search",
                  suffixIcon: Icon(Icons.search),
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.all(10)),
            ),
          ),
        )
)

Output:

Hope this helps. Further reading:

• Using Chip widget in Flutter: Tutorial & Examples
• Flutter: SliverGrid example
• Best Libraries for Making HTTP Requests in Flutter
• Flutter & Hive Database: CRUD Example
• Flutter: GridPaper example
• Flutter: Creating Custom Back Buttons

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.