在颤动的应用栏顶部添加阴影答案

【问题标题】：adding a shadow to the top of an appbar in flutter在颤动的应用栏顶部添加阴影
【发布时间】：2021-12-29 19:52:22
【问题描述】：

我正在努力在 AppBar 的顶部添加阴影，我在底部添加了一个，但没有在顶部添加。这是我要匹配的设计：

我已经将 AppBarTheme 中的系统状态栏详细信息明确定义为白色：

    systemOverlayStyle: SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness: Brightness.dark,
      statusBarColor: Colors.white.withOpacity(0.0)),

我已将整个脚手架推入 SafeArea：

  Widget build(BuildContext context) => GestureDetector(
    onTap: () => FocusScope.of(context).unfocus(),
    child: SafeArea(
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(256),
          child: Container( // extra container for custom bottom shadows
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.5),
                  spreadRadius: 6,
                  blurRadius: 6,
                  offset: Offset(0, -4),
                ),
              ],
            ),
            child: AppBar(...),
          ),
        ),
        ...
      ),
    ),
  );
  }

另外，顺便说一下，我在顶部添加了一个圆边，这样我就可以看到发生了什么：

注意，阴影存在，但在状态栏下方。所以我想我正在努力实现的是将状态栏放在应用栏后面......或者至少让它看起来像这样（在状态栏顶部有一个镜像阴影之类的东西？）

您将如何解决这个问题？是否有类似 StatusBarTheme 之类的东西？

【问题讨论】：

标签： flutter appbar android-statusbar

【解决方案1】：

我不得不使用堆栈：

    SafeArea(
      child: Stack(children: [
        Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(8.0),
                    bottomLeft: Radius.circular(8.0)),
                color: const Color(0xffffffff),
                boxShadow: [
              BoxShadow(
                  color: const Color(0x33000000),
                  offset: Offset(0, 2),
                  blurRadius: 4),
            ])),
        AppBar(...
        ...

主题中没有任何 systemOverlayStyle 规范。

【讨论】：

【解决方案2】：

请参考以下代码。添加高程并检查。

Scaffold(
 backgroundColor: Colors.white,
 appBar: AppBar(
          elevation: 5.0,
          backgroundColor: Colors.white,
           actions: [],)
         ),

【讨论】：