How to make a Widget clickable?-CodePudding

So I have this code that displays a card expanded with a gif and a tittle and so I want to make this ‪clickable for me to when I click it takes me to the specify thing page.

Expanded(
            child: VerticalCardPager(
          titles: [for (var hero in heros) hero.title],
          images: [
            for (var hero in heros)
              Hero(
                tag: hero.title,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Image.asset(
                    hero.image,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
          ],
          textStyle:
              const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          initialPage: 2,
          align: ALIGN.CENTER,
        ))

CodePudding user response：

Wrap your widget with Inkwell and use onTap callback.

InkWell(
  onTap: () {
    // TODO: add your function callback here
  },
  child: Expanded(
    child: VerticalCardPager(
      textStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
      initialPage: 2,
      align: ALIGN.CENTER,
      titles: [for (var hero in heros) hero.title],
      images: [
        for (var hero in heros)
          Hero(
            tag: hero.title,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.asset(
                hero.image,
                fit: BoxFit.cover,
              ),
            ),
          ),
      ],
    ),
  ),
)

CodePudding user response：

wrap widget with GestureDetector write code click in onTap

GestureDetector(onTap: (){},child:Expanded(
            child: VerticalCardPager(
          titles: [for (var hero in heros) hero.title],
          images: [
            for (var hero in heros)
              Hero(
                tag: hero.title,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Image.asset(
                    hero.image,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
          ],
          textStyle:
              const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          initialPage: 2,
          align: ALIGN.CENTER,
        ))),