Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

The dismissible animation can be applied to a GridView in Flutter by wrapping each grid item in a Dismissible widget. Here's an example:

GridView.builder(
  itemCount: myList.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 0.7,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Dismissible(
      key: UniqueKey(),
      direction: DismissDirection.horizontal,
      onDismissed: (direction) {
        setState(() {
          myList.removeAt(index);
        });
      },
      child: GridTile(
        child: Image.asset(
          myList[index].image,
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black45,
          title: Text(
            myList[index].name,
            style: TextStyle(fontSize: 16.0),
          ),
        ),
      ),
    );
  },
);

In this example, we're using a GridView.builder to build our grid dynamically. Each grid item is wrapped in a Dismissible widget with a UniqueKey for reusability. We've also specified the direction of the dismiss action as horizontal with the onDismissed method updating the list and rebuilding the grid view. This method removes the dismissed item from the list and updates the UI.