Как добавить эффект spla sh на карту с помощью GestureDetector

Question

Я не хочу добавлять эффект spla sh на карту при нажатии на нее. Я сослался на некоторые ответы на 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(
  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),
            ),
          ],
        ),
      ),
    ),
  ),
)

Answer 2

Попробуйте и дайте мне знать, если это работает!

 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),
                          ),
                        ],
                      ),
                    ),
                  ),
                )
              )
            )
          ),
        ],
      ),
    );