How do I add a splash effect on a card using GestureDetector

user_9118406 0
Viewed 733

I wan't to add splash effect over the card when tapped on it. I referred some of the answers on stackoverflow but, nothing caught up in my brai. HELP!!

My Code - 

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

I also tried to wrap onTap: function with InkWell with an ancestor as Material, But it won't let me to do so. Actually, I am confused now and stucked. Any help will be apperiated!!

flutter-layout dart flutter
2 Answers

Try this and let me know if that works!

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

Try this:

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

enter image description here

user_66186220
Related