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

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