CODEWITHSUNDEEP
flutterlistviewdart
Finno
Finno

Reputation: 147

Can you use onDismissed() and onTap() for the same list in flutter?

I have a list of items which I am displaying using ListView.builder() in flutter. I'd like to be able to use onTap() to navigate to another screen once an item has been tapped, but also swipe any item to delete it using onDismissed(). It seems I can only return to the builder either ListTile to use onTap() or Dismissable to use onDismissed(). Is there a way I can use both of these features on the same list?

Thanks.

Upvotes: 0

Views: 886

Answers (2)

Sergio Bernal
Sergio Bernal

Reputation: 2327

Use as top widget, a GestureDetector, then the Dismissible and finally your ListTile like this:

  return Scaffold(
  body: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) {
      return GestureDetector(
        onTap: () {
          print("Tap item index: $index");
        },
        child: Dismissible(
          onDismissed: (direction) {
            // remove item from list
          },
          background: Container(
            color: Colors.red,
          ),
          key: ObjectKey(index),
          child: ListTile(
            title: Text("Hello"),
          ),
        ),
      );
    },
  ),
);

Upvotes: 1

Jahidul Islam
Jahidul Islam

Reputation: 12575

you should try out this tecnique

return Container(
      child: movies.length > 0
          ? ListView.builder(
        itemCount: movies.length,
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => MovieDetails()),
              );
            },
            child: Dismissible(

              onDismissed: (DismissDirection direction) {
                setState(() {
                  movies.removeAt(index);
                });
              },
              secondaryBackground: Container(
                child: Center(
                  child: Text(
                    'Delete',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                color: Colors.red,
              ),
              background: Container(),
              child: MovieCard(movie: movies[index]),
              key: UniqueKey(),
              direction: DismissDirection.endToStart,
            ),
          );
        },
      )
          : Center(child: Text('No Items')),
    )

Upvotes: 0

Related Questions