Question

轻触卡时，我不会在卡上添加飞溅效果。我提到了关于stackoverflow的一些答案，但是，我的头脑中什么都没抓住。帮助！

我的代码-

body: Container(
        padding: EdgeInsets.all(10),
        child: ListView(
          children: <Widget>[
            Container(
              height: 100,
              child: GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, '/page1');
                },
                child: GradientCard(
                  gradient: LinearGradient(
                      colors: [Colors.yellow, Colors.lightGreenAccent]),
                  elevation: 10,
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
                    child: Center(
                      child: Row(
                        children: <Widget>[
                          SizedBox(width: 25),
                          Icon(
                            Icons.favorite,
                            color: Colors.redAccent,
                            size: 50,
                          ),
                          SizedBox(width: 40),
                          Text(
                            "MY CARD",
                            style: TextStyle(fontSize: 28),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

我还尝试将onTap:的函数InkWell与祖先的Material进行包装，但是我不能这样做。实际上，我现在很困惑并陷入困境。任何帮助将不胜感激！

Answer 1

尝试一下，让我知道是否可行！

 Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: <Widget>[
          Container(
            height: 100,
            child: GradientCard(
              gradient: LinearGradient(
                colors: [Colors.yellow, Colors.lightGreenAccent]
              ),
              elevation: 10,
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: () {
                    Navigator.pushNamed(context, '/page1'); 
                  },
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
                    child: Center(
                      child: Row(
                        children: <Widget>[
                          SizedBox(width: 25),
                          Icon(
                            Icons.favorite,
                            color: Colors.redAccent,
                            size: 50,
                          ),
                          SizedBox(width: 40),
                          Text(
                            "MY CARD",
                            style: TextStyle(fontSize: 28),
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              )
            )
          ),
        ],
      ),
    );

Answer 2

尝试一下：

Container(
  height: 100,
  child: Material(
    elevation: 10,
    color: Theme.of(context).cardColor,
    child: InkWell(
      onTap: () {
        Navigator.pushNamed(context, '/page1');
      },
      child: Center(
        child: Row(
          children: <Widget>[
            SizedBox(width: 25),
            Icon(
              Icons.favorite,
              color: Colors.redAccent,
              size: 50,
            ),
            SizedBox(width: 40),
            Text(
              "MY CARD",
              style: TextStyle(fontSize: 28),
            ),
          ],
        ),
      ),
    ),
  ),
)

如何使用GestureDetector在卡片上添加飞溅效果

2 个答案: