如何保持汉堡图标没有可见的appBar颤动答案

【问题标题】：How to keep hamburger icon without visible appBar flutter如何保持汉堡图标没有可见的appBar颤动
【发布时间】：2019-06-13 16:58:46
【问题描述】：

我最近尝试在没有 AppBar 或至少完全不可见的情况下为我的菜单滑块保留一个汉堡包图标。第一次尝试是使用 SafeArea，但它清空了 Scaffold。然后我尝试将不透明度设置为 0.0，如下面的代码所示。但它给出了与 SafeArea 相同的结果，而 Scaffold 上没有任何内容。请问有人可以帮忙吗？

    import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
          Opacity(
            opacity: 0.0,
            appBar: AppBar(),
          ),
          drawer: new Drawer(
            child: new ListView(),
          ),
          body: new Center(
              child: new Column(
            children: <Widget>[],
          ))),
    );
  }
}

【问题讨论】：

标签： dart flutter opacity flutter-appbar

【解决方案1】：

如果我理解你的话，你想显示一个菜单按钮来显示Drawer，而不显示任何AppBar。

一种选择是使用Stack 作为Scaffold 的正文。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
        key: scaffoldKey,
        drawer: new Drawer(
          child: new ListView(),
        ),
        body: Stack(
          children: <Widget>[
            new Center(
                child: new Column(
              children: <Widget>[],
            )),
            Positioned(
              left: 10,
              top: 20,
              child: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () => scaffoldKey.currentState.openDrawer(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

像我这样的新手注意：我在无状态小部件上使用了上述方法，当从新导航的页面返回时，东西坏了。 “在 null 上调用了 getter 'usergesture progress'”是错误。当小部件更改为有状态小部件时，一切正常。
我收到 NoSuchMethodError: invalid member on null: 'openDrawer'

【解决方案2】：

您可以通过设置相同的颜色和高度 = 0 使 AppBar 完全不可见 screenshot here

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF198BAA),
      appBar: AppBar(
        backgroundColor: Color(0xFF198BAA),
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text('Item1'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：

如果 Scaffold 的 body 中有可滚动的内容，Appbar 将介于两者之间。

【解决方案3】：

如果我很好地理解了你的问题。

您有自己的自定义菜单按钮来打开/关闭抽屉。您也不想使用 AppBar。

在这种情况下，您可以使用GlobalKey<ScaffoldState>() 对象打开抽屉。

import 'package:flutter/material.dart';

GlobalKey<ScaffoldState> _scaffoldState = GlobalKey<ScaffoldState>();

return Scaffold(
  key: _scaffoldState,
  drawer: DrawerView(),
  body: ThemeScreen(
    header: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        IconButton(
          icon: Icon(Icons.menu,
              color: Colors.white,
              size: 15),
          onPressed: (){
            _scaffoldState.currentState.openDrawer();
          },
        ),
      ],
    ),
  ),
);

【讨论】：

【解决方案4】：

这类似于 Ox.S 的回答，但您可以让 AppBar 透明，然后将图标更改为您想要的任何颜色。

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0.0,
    iconTheme: IconThemeData(color: Colors.black),
  ),
  drawer: Drawer(...

【讨论】：