Flutter中容器底部的3D效果

Question

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

图像

提前致谢。

Answer 1

那不是什么 3D 的东西。它可以通过使用小部件的boxShadow属性轻松实现。decorationContainer

然后您可以尝试使用诸如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)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

输出