Georgios
Georgios

Reputation: 1057

Flutter Dismissible Event in LIstView

I have already implemented within the onDismissed: function a remove item method.

This method only works though for the last item of the list.

If I remove any other item I get the following error:

A dismissed Dismissible widget is still part of the tree.

The complication is that I use a Map to save and delete all the events that I need. Still when on the debugging mode the indexing seems fine.

The Error appears after this setState method:

setState(() {
              print('_controller.selectedDay = ${_controller.selectedDay}');
              customEvents[_controller.selectedDay].removeAt(index);
            });

Here is the Code part:

Widget myCalendarBuild(BuildContext context, List<dynamic> shiftList) {
    return ListView.separated(
      separatorBuilder: (BuildContext context, int index) =>
          Divider(color: Colors.black),
      itemCount: _listOfShiftsPerGivenDay.length,
      itemBuilder: (BuildContext context, int index) {
        return Dismissible(
          key: Key(customEvents[_controller.selectedDay][index].toString()),
          onDismissed: (direction){
//            removeShift(index);
            Shift deleteShift = getParametersFromWidgetInTheList(index: index);
            // remove from database
            DatabaseProvider.db.delete(deleteShift.id).then((_) =>
                BlocProvider.of<ShiftBloc>(context)
                    .add(DeleteShift(deleteShift.id)));
            setState(() {
              print('_controller.selectedDay = ${_controller.selectedDay}');
              customEvents[_controller.selectedDay].removeAt(index);
            });
            showSnackBar(context);
          },
          child: Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: customEvents[_controller.selectedDay][index],
                ),
                Expanded(
                  flex: 1,
                  //fixme: catch when the user clicks back instead of submit when editing/ ading a shift
                  child: GestureDetector(
                    onTap: () {
                      Shift shift =
                          getParametersFromWidgetInTheList(index: index);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (BuildContext context) => ShiftForm(
                            shift: shift,
                          ),
                        ),
                      );
                    },
                    child: Container(
                      child: Icon(FontAwesomeIcons.edit),
                      color: Colors.teal,
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  //fixme: catch when the user clicks back instead of submit when editing/ ading a shift
                  child: GestureDetector(
                    onTap: () {
                      Shift deleteShift =
                          getParametersFromWidgetInTheList(index: index);
                      // remove from database
                      DatabaseProvider.db.delete(deleteShift.id).then((_) =>
                          BlocProvider.of<ShiftBloc>(context)
                              .add(DeleteShift(deleteShift.id)));
                      // remove from customEvents Map
                      setState(() {
                        customEvents[_controller.selectedDay].removeAt(index);
                        showSnackBar(context);
                      });
                      // after deleting the item I have to refresh the list
//                    calendarBuild(context, shiftList);
                    },
                    child: Container(
                      child: Icon(FontAwesomeIcons.trash),
                      color: Colors.red,
                    ),
                  ),
                )
              ],
            ),
            //                  ),
          ),
        );
      },
    );
  }

Here you can see what happens at the moment that I swipe to the left to delete an event. Also marked as yellow:

enter image description here

Upvotes: 1

Views: 955

Answers (1)

Georgios
Georgios

Reputation: 1057

Found the problem!

It occurred on the following line:

key: Key(customEvents[_controller.selectedDay][index].toString()),

I only had to replace this with the following:

key: UniqueKey(),

The problem probably occurs within the Map.

Upvotes: 1

Related Questions