Buy Me A Coffee Donate


A Search App Bar like the one in Gmail and Google Photos.

Online Demo:

Getting Started

If you want to just use the floating bar as an app bar please use SliverFloatingBar otherwise use FloatingSearchBar.


if you add a drawer the menu icon will show up:



import 'package:flutter/material.dart';

import 'package:floating_search_bar/floating_search_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FloatingSearchBar.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Text(index.toString()),
        trailing: CircleAvatar(
          child: Text("RD"),
        drawer: Drawer(
          child: Container(),
        onChanged: (String value) {},
        onTap: () {},
        decoration: InputDecoration.collapsed(
          hintText: "Search...",