Flutter 仅从顶部向颤振卡提供标高

我在一个动画容器中有一张卡片，如下所示。我希望卡片只有顶部有一个标高

我还希望将卡剪辑到动画容器中，以便动画容器和卡之间完全没有边界。简单地说，如果这个词更好的话，它们是粘在一起的

我怎样才能做到这一点

这是我的密码：

AnimatedContainer(
          width: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
          ),
          duration: const Duration(milliseconds: 500),
          child: Card( // I want this card to have an elevation only at the top
      clipBehavior: Clip.hardEdge,
      child: Center(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Welcome',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                top: 10.0,
                bottom: 15.0,
                left: 25,
                right: 25,
              ),
              child: Text(
                'Tap here to get started',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
            ),
          ],
        ),
      ),
    );

感谢您的投入

Shadow

首先将

卡的默认
标高
设置为
0
：

2.然后将一些自定义阴影设置到其框装饰中的

AnimatedContainer

：

decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                    boxShadow: [ // so here your custom shadow goes:
                      BoxShadow(
                        color: Colors.black.withAlpha(20), // the color of a shadow, you can adjust it
                        spreadRadius: 3, //also play with this two values to achieve your ideal result
                        blurRadius: 7,
                        offset: Offset(0, -7), // changes position of shadow, negative value on y-axis makes it appering only on the top of a container
                      ),
                    ],
                  ),

就这样

衬垫 因此，基本上要消除

卡

和

动画容器

之间的填充，您需要执行以下操作：

• 只需将卡的边距设置为零：

• 匹配卡片及其周围容器的边界半径，以避免角落处出现填充。但是，如果

  动画容器

  和

  卡

  的颜色相同，则可以跳过此步骤。（如示例中所示）但如果此填充可见，只需在

  卡中定义与
  动画容器中相同的边界半径即可

填充-另一种解决方案 此外，您还可以取消使用

卡

小部件，因为我认为它在您的示例中不起重要作用

AnimatedContainer

与

卡的属性非常相似。在我看来，
Card
在您的示例中引入了不必要的复杂性。除非你想得到我没有得到的东西


因此，只需从小部件树中删除
卡
，并将其框装饰中的
动画容器
的背景色设置为白色：
decoration: BoxDecoration(
                color: Colors.white,
//... rest of your code



示例的完整代码
完全编码一种替代方案解决方案，完全不使用
卡
当你在顶部写
elevation
时，你的意思是仅仅是容器顶部边缘后面的阴影吗？@SzymonKowaliński没错。这就是我想要实现的。你能尝试添加boxshadow吗？
margin: EdgeInsets.zero,

shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10),
                      ),
                    ),

decoration: BoxDecoration(
                color: Colors.white,
//... rest of your code

AnimatedContainer(
                  width: double.infinity,
                  height: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withAlpha(20),
                        spreadRadius: 3,
                        blurRadius: 7,
                        offset: Offset(0, -7), // changes position of shadow, negative value on y makes it appering on the top
                      ),
                    ],
                  ),
                  duration: const Duration(milliseconds: 500),
                  child: Card(
                    elevation: 0,
                    // I want this card to have an elevation only at the top
                    clipBehavior: Clip.hardEdge,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10),
                      ),
                    ),
                    margin: EdgeInsets.zero,
                    child: Center(
                      child: Column(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              'Welcome',
                              style: TextStyle(
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(
                              top: 10.0,
                              bottom: 15.0,
                              left: 25,
                              right: 25,
                            ),
                            child: Text(
                              'Tap here to get started',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 15,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

AnimatedContainer(
                  width: double.infinity,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withAlpha(
                            20), // the color of a shadow, you can adjust it
                        spreadRadius:
                            3, //also play with this two values to achieve your ideal result
                        blurRadius: 7,
                        offset: Offset(0,
                            -7), // changes position of shadow, negative value on y-axis makes it appering only on the top of a container
                      ),
                    ],
                  ),
                  duration: const Duration(milliseconds: 500),
                  child: Center(
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            'Welcome',
                            style: TextStyle(
                              fontSize: 22,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                            top: 10.0,
                            bottom: 15.0,
                            left: 25,
                            right: 25,
                          ),
                          child: Text(
                            'Tap here to get started',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 15,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),