Flutter 中容器底部的 3D 效果答案

【问题标题】：3D effect at bottom of container in FlutterFlutter 中容器底部的 3D 效果
【发布时间】：2021-08-09 19:27:25
【问题描述】：

我想在我的容器中创建类似 3D 的效果。我不知道该怎么做。任何帮助表示赞赏。

Image

提前致谢。

【问题讨论】：

标签： flutter user-interface containers

【解决方案1】：

这不是 3D 的东西。它可以通过使用Container 小部件的decoration 的boxShadow 属性轻松实现。

然后，您可以使用color、blurRadius 之类的东西来获得所需的效果。

示例代码：

class Shadow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Shadow')),
      body: Container(
        color: Colors.black,
        child: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(40),
              boxShadow: [
                BoxShadow(
                  color: Colors.blue.withOpacity(0.5),
                  offset: Offset(0, 25),
                  blurRadius: 3,
                  spreadRadius: -10)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

输出

【讨论】：

非常感谢。它就像魅力一样。抱歉，我无法投票，因为我的声誉低于 15。我已将其标记为已解决。
哦，没关系。很高兴能帮上忙 :) 我赞成你的更早的问题来增加它。
酷，Flutter 之旅一切顺利。