仅将顶部阴影颤动到容器

Question

Flutter 需要顶部阴影、左上和右上阴影线到容器的一半。我试过下面的代码。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 500.0,
              margin: const EdgeInsets.only(top: 6.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
                color: Colors.blue,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 5.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );

下图中需要输出

Answer 1

我刚刚在另一个容器中添加了一个容器，并在顶部容器中设置了渐变的开始和结束

    Container(
             width: 320,
              height: 620,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(20.0)),
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.center,
                      colors: [
                        Colors.green.shade800,
                        Colors.white,
                        Colors.white,
  
                      ])), child: Container(
              width: 310,
              height: 610,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10)),
                color: Colors.white,
              ),
              alignment: Alignment.center,
              child: const Text('text'),
            ) )

仅将顶部阴影颤动到容器

flutter only top shadow to the container

dart

flutter

flutter-layout