Flutter: How to implement floating SearchBar (Custom AppBar) with Drawer like Google Apps

Question

Can somebody please tell me how can I integrate the menu drawer inside the Row widget instead of in a Scaffold widget? Something like Gmail's app (search with drawer icon).

Answer 1

It's very simple.

Screenshot of the output

Steps:

Step 1:

Define the scaffold with a custom Appbar widget

return Scaffold(
  appBar: FloatAppBar(),
  body: Center(
    child: Text('Body'),
  ),
  drawer: Drawer(
    child: SafeArea(
      right: false,
      child: Center(
        child: Text('Drawer content'),
      ),
    ),
  ),
);

Step 2:

Implement the PreferredSizeWidget to create a custom AppBar

class FloatAppBar extends StatelessWidget with PreferredSizeWidget {

step 3:

Use Scaffold.of(context).openDrawer(); to open the drawer when required.

Here is the complete snippet.

  import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: FloatAppBar(),
      body: Center(
        child: Text('Body'),
      ),
      drawer: Drawer(
        child: SafeArea(
          right: false,
          child: Center(
            child: Text('Drawer content'),
          ),
        ),
      ),
    );
  }
}

class FloatAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: 10,
          right: 15,
          left: 15,
          child: Container(
            color: Colors.white,
            child: Row(
              children: <Widget>[
                Material(
                  type: MaterialType.transparency,
                  child: IconButton(
                    splashColor: Colors.grey,
                    icon: Icon(Icons.menu),
                    onPressed: () {
                      Scaffold.of(context).openDrawer();
                    },
                  ),
                ),
                Expanded(
                  child: TextField(
                    cursorColor: Colors.black,
                    keyboardType: TextInputType.text,
                    textInputAction: TextInputAction.go,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.symmetric(horizontal: 15),
                        hintText: "Search..."),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

See the live demo here.

Answer 2

the AppBar widget alredy has mechanisms for that,

AppBar(
 drawaer: YourDrawer(),
 actions: [
   IconButton(
    icon: Icon(Icons.search),
    onPressed: (){}
   ) 
 ]
);

it will create the Gmail appbar you want