在以下情况下使 appbar 透明答案

【问题标题】：Make appbar transparent this below case在以下情况下使 appbar 透明
【发布时间】：2020-04-06 12:37:00
【问题描述】：

伙计们！我正在尝试使这个 AppBar 透明。因为它背后会有背景，但到目前为止我还没有成功。谢谢大家谢谢！

class _HomePageState extends State<HomePage> {
  int index = 0;
  Widget build(BuildContext context) {
    return Scaffold(
      body: show(index),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: (){},
          )
        ],
      ),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Colors.grey[900],
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: index,
          showUnselectedLabels: true,
          unselectedItemColor: Colors.white54,
          selectedItemColor: Colors.white,
          onTap: ((int x) {
            setState(() {
              index = x;
            });
          }),
          items: [
            new BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text("Home")),
            new BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text("Search")),
            new BottomNavigationBarItem(
                icon: Icon(Icons.library_music), title: Text("Library")),
          ],
        ),
      ),
    );
  }
}

enter image description here

【问题讨论】：

标签： flutter dart flutter-layout transparent appbar

【解决方案1】：

Appbar默认有阴影，如果你想要透明的appbar，你还需要添加elevation: 0到AppBar来去除阴影。

【讨论】：

不仅，我想我还需要将背景颜色设置为Colors.transparent
上面的代码有backgroundColor: Colors.transparent，这就是为什么我说你也需要添加elevation。正如你所说，它们需要结合起来。谢谢

【解决方案2】：

从以下代码获取提示（来源https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/）

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                    'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Text(
                'mrflutter.com',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                ),
              ),
            ),
          ),
          Positioned(
            child: AppBar(
              title: Text("Transparent AppBar"),
              backgroundColor: Colors.transparent,
              elevation: 0,
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {},
                  tooltip: 'Share',
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

【讨论】：

【解决方案3】：

尝试将 AppBar 和您的 Body 部分包装在堆栈中，并使 AppBar 透明，以便您获得所需的输出

class _HomePageState extends State<HomePage> {
  int index = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          show(index),
          Wrap(
            children: <Widget>[
              AppBar(
                backgroundColor: Colors.transparent,
                actions: <Widget>[
                  IconButton(
                    icon: Icon(Icons.settings),
                    onPressed: () {},
                  )
                ],
              ),
            ],
          ),
        ],
      ),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Colors.grey[900],
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: index,
          showUnselectedLabels: true,
          unselectedItemColor: Colors.white54,
          selectedItemColor: Colors.white,
          onTap: ((int x) {
            setState(() {
              index = x;
            });
          }),
          items: [
            new BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text("Home")),
            new BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text("Search")),
            new BottomNavigationBarItem(
                icon: Icon(Icons.library_music), title: Text("Library")),
          ],
        ),
      ),
    );
  }
}

【讨论】：

我认为您还应该将 AppBar 的高度设置为零
是否将其设置为零由您决定