Flutter flatter：如何使用抽屉式谷歌应用程序实现浮动搜索栏（定制AppBar）

有人能告诉我如何将菜单抽屉集成到Row小部件中而不是Scaffold小部件中吗？类似于Gmail的应用程序（用抽屉图标搜索）。

AppBar小部件alredy有这样的机制

AppBar(
抽屉：你的抽屉（），
行动：[
图标按钮(
图标：图标（Icons.search），
onPressed:（）{}
) 
]
);

它将创建你想要的Gmail应用程序条，非常简单

输出的屏幕截图

步骤： 第1步：

使用自定义Appbar小部件定义脚手架

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

第二步：

实现PreferredSizeWidget以创建自定义AppBar

class FloatAppBar extends StatelessWidget with PreferredSizeWidget {

第三步：

使用

Scaffold.of（context.openDrawer（）在需要时打开抽屉

下面是完整的代码片段

  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);
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
标题：“飞舞游乐场”，
主页：TestPage（），
);
}
}
类TestPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:FloatAppBar（），
正文：中(
子项：文本（“正文”），
),
抽屉(
儿童：安全区(
右：错，
儿童：中心(
子项：文本（“抽屉内容”），
),
),
),
);
}
}
类FloatAppBar使用PreferredSizeWidget扩展无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回堆栈(
儿童：[
定位(
前10名，
右：15，
左：15，
子：容器(
颜色：颜色，白色，
孩子：排(
儿童：[
材料(
类型：MaterialType.transparency，
孩子：我的钮扣(
颜色：颜色。灰色，
图标：图标（图标菜单），
已按下：（）{
Scaffold.of（context.openDrawer（）；
},
),
),
扩大(
孩子：TextField(
光标颜色：颜色。黑色，
键盘类型：TextInputType.text，
textInputAction:textInputAction.go，
装饰：输入装饰(
边框：InputBorder.none，
内容填充：边集。对称（水平：15），
hintText:“搜索…”），
),
),
],
),
),
),
],
);
}
@凌驾
Size get preferredSize=>Size.fromHeight（kToolbarHeight）；
}

查看现场演示。
是什么让您无法这样做？我不知道如何在抽屉溢出且未显示按钮时执行此操作：（你能给我一个演示代码吗？在gmail应用程序中，他们只是在搜索栏中显示一个抽屉图标，点击操作他们打开抽屉，但我无法添加。请给我一个基本代码。检查此项，可能会帮助你：-显示错误<代码>类“PreferredSize”不能用作混音，因为它扩展了一个类，而不是han对象。