Why there is no ripple effect when I click on ListTile?

Question

I have a ListTile. If I just write an empty onTap function it will show the ripple effect when I tap on it. But if I add the navigation function to the onTap function, it doesn't show the ripple effect when I tap on it. Why?

Note that I'm using the go_router package for navigation.

My code:

SingleChildScrollView(
  …
  child: Column(
    children: [
      Container(
        …
        child: Card(
          …
          child: Padding(
            …
            child: Align(
              …
              child: Column(
                …
                children: [
                  …
                  ListTile(
                    onTap: () {
                      context.pushNamed(
                        AppRoute.editName.name,
                        pathParameters: {"userId": user.id},
                      );
                    },
                    title: const Text("Name"),
                    subtitle: Text(user.name),
                    trailing: const Icon(Icons.edit),
                  ),
                  …
                ],
              ),
            ),
          ),
        ),
      ),
    ],
  ),
),

I tried changing the position of onTap from ListTile to InkWell, but that didn't work:

InkWell(
  onTap: () {
    context.pushNamed(
      AppRoute.editName.name,
      pathParameters: {"userId": user.id},
    );
  },
  child: ListTile(
    title: const Text("Name"),
    subtitle: Text(user.name),
    trailing: const Icon(Icons.edit),
  ),
),

I also tried wrapping the ListTile with a Material, but it didn't work either:

Material(
  child: ListTile(
    onTap: () {
      context.pushNamed(
        AppRoute.editName.name,
        pathParameters: {"userId": user.id},
      );
    },
    title: const Text("Name"),
    subtitle: Text(user.name),
    trailing: const Icon(Icons.edit),
  ),
),

Is there any working solution?

can be wrap with Ink, bt can you include a sample full widget from scaffold body, — Md. Yeasin Sheikh, Jun 04 '23 at 10:39
Hi @YeasinSheikh I tried wrapping with Ink but it doesn't work. I also updated my question — My Car, Jun 04 '23 at 10:52
even though `ListTile` on the bottom but idk why it is not working from current context, can you provide full of data on sample widget. dartPad will be the best. — Md. Yeasin Sheikh, Jun 04 '23 at 11:09

score 0 · Answer 1 · answered Jun 04 '23 at 10:17

0

Use this way

GestureDetector(
      onTap: () {
        Navigator.pushNamed(
          context,
          AppRoute.editName.name,
          arguments: {"userId": userModel.id},
        );
      },
      child: ListTile(
        title: const Text("Name"),
        subtitle: Text(userModel.name),
        trailing: const Icon(Icons.edit),
      ),
    )

answered Jun 04 '23 at 10:17

Niaj Mahmud

399
3
10

Hi this doesn't work, it doesn't show the ripple effect when I click on it – My Car Jun 04 '23 at 10:40
@MyCar try `onTapCancel` – Md. Yeasin Sheikh Jun 05 '23 at 10:22

Why there is no ripple effect when I click on ListTile?

1 Answers1