adham-ashraf77 / floating_search_bar

Floating Search Bar like Gmail for Flutter

floating_search_bar

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

Online Demo: https://rodydavis.github.io/floating_search_bar/

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:

Usage

import 'package:flutter/material.dart';

import 'package:floating_search_bar/floating_search_bar.dart';

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

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

class _MyAppState extends State<MyApp> {
  @override
  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...",
        ),
      ),
    );
  }
}