Flutter中如何实现悬浮式AppBar？

你当前的代码无法实现悬浮效果，原因是AppBar本身会填充父容器空间，自带的背景和阴影会覆盖外层Container的样式，导致margin无法呈现出悬浮的视觉效果。

方案一：自定义悬浮样式（推荐） #

直接用Container构建AppBar的外观，配合阴影实现悬浮感，代码如下：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(60.0),
  child: Container(
    margin: EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8.0),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.3),
          blurRadius: 4,
          offset: Offset(0, 2),
        ),
      ],
    ),
    child: Center(
      child: Text(
        'Login',
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
),

方案二：基于原生AppBar改造 #

如果要保留原生AppBar的功能，需要去掉它自带的阴影和背景，让外层容器提供悬浮样式：

appBar: PreferredSize(
  preferredSize: Size.fromHeight(60.0),
  child: Container(
    margin: EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8.0),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.3),
          blurRadius: 4,
          offset: Offset(0, 2),
        ),
      ],
    ),
    child: AppBar(
      title: Text('Login'),
      backgroundColor: Colors.white,
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者Obscure021