如何实现示例样式的Floating Action Button？当前效果不符

1. 增强阴影效果 #

Flutter 的 FloatingActionButton 原生支持通过属性调整阴影，你可以通过提高阴影高度、自定义阴影颜色来强化立体感：

修改后的代码：

floatingActionButton: _videoController?.value.isInitialized != null
    ? FloatingActionButton(
        backgroundColor: Colors.lightBlue[400],
        // 提高阴影高度，数值越大阴影越明显
        elevation: 10,
        // 自定义阴影颜色，可调整透明度适配主题
        shadowColor: Colors.black.withOpacity(0.3),
        onPressed: () {
          setState(() {
            _videoController!.value.isPlaying
                ? _videoController!.pause()
                : _videoController!.play();
          });
        },
        child: Icon(
          _videoController!.value.isPlaying ? Icons.pause : Icons.play_arrow,
          color: Colors.black,
        ),
      )
    : Container(),
);

2. 实现按钮偏移效果 #

如果需要让按钮脱离默认的右下角位置，有两种简单方式：

方式一：用原生位置属性调整

// 保留上面的 FloatingActionButton 代码，添加位置配置
floatingActionButtonLocation: FloatingActionButtonLocation(
  Offset(20, 20), // 相对于右下角，往左、往上各偏移20像素
),

方式二：用 Stack 实现自由定位

适合需要更灵活位置的场景：

floatingActionButton: _videoController?.value.isInitialized != null
    ? Stack(
        alignment: Alignment.bottomRight,
        children: [
          SizedBox(width: double.infinity, height: double.infinity),
          Positioned(
            right: 30,
            bottom: 30,
            child: FloatingActionButton(
              backgroundColor: Colors.lightBlue[400],
              elevation: 10,
              shadowColor: Colors.black.withOpacity(0.3),
              onPressed: () {
                setState(() {
                  _videoController!.value.isPlaying
                      ? _videoController!.pause()
                      : _videoController!.play();
                });
              },
              child: Icon(
                _videoController!.value.isPlaying ? Icons.pause : Icons.play_arrow,
                color: Colors.black,
              ),
            ),
          ),
        ],
      )
    : Container(),
);

3. 进阶：自定义形状+双层阴影 #

如果需要独特的按钮样式（比如非标准圆角），可以用外层 Material 包裹实现更复杂的阴影效果：

floatingActionButton: _videoController?.value.isInitialized != null
    ? Material(
        elevation: 12,
        borderRadius: BorderRadius.circular(30),
        shadowColor: Colors.blueGrey.withOpacity(0.4),
        child: FloatingActionButton(
          backgroundColor: Colors.lightBlue[400],
          elevation: 0, // 关闭按钮原生阴影，使用外层 Material 的阴影
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
          onPressed: () {
            setState(() {
              _videoController!.value.isPlaying
                  ? _videoController!.pause()
                  : _videoController!.play();
            });
          },
          child: Icon(
            _videoController!.value.isPlaying ? Icons.pause : Icons.play_arrow,
            color: Colors.black,
          ),
        ),
      )
    : Container(),
);

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