Flutter: CheckboxListTile inside ListView jumps to top

Question

So I know there are some similar questions about this issue but none of them worked for me. I have a ListView with different CheckboxListTiles and when I scroll down and choose an item, the ListView automatically jumps to the top. Is there a way to prevent this from happening? Thank you very much, I've added a screenshot. so you can better understand: This is my code:

class CheckboxWidget extends StatefulWidget {
  const CheckboxWidget({
    Key key,
    this.item,
    this.type,
    this.state,
  }) : super(key: key);

  final Map<String, bool> item;
  final String type;
  final Map<String, dynamic> state;

  @override
  State<CheckboxWidget> createState() => _CheckboxWidgetState();
}

class _CheckboxWidgetState extends State<CheckboxWidget> {
  @override
  void initState() {
    super.initState();
    if (widget.state[widget.type].isEmpty) {
      widget.item.updateAll((key, value) => value = false);
    }
  }

  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    final FilterProvider filterProvider = Provider.of<FilterProvider>(context);

    return Expanded(
      child: ListView(
        key: UniqueKey(),
        children: widget.item.keys.map(
          (key) {
            return CheckboxListTile(
              contentPadding: EdgeInsets.only(left: 2, right: 2),
              title: Text(
                key,
                style: TextStyle(fontSize: 19, fontWeight: FontWeight.w400),
              ),

              value: widget.item[key],
              activeColor: Color(0xffF6BE03),
              checkColor: Color(0xff232323),
              shape: CircleBorder(),
              //contentPadding: EdgeInsets.all(0),
              onChanged: (value) {
                value
                    ? filterProvider.multifiltervalue = [widget.type, key]
                    : filterProvider.multifiltervalue = [
                        widget.type,
                        key,
                        false
                      ];
                setState(
                  () {
                    widget.item[key] = value;
                  },
                );
              },
            );
          },
        ).toList(),
      ),
    );
  }
}

Answer 1

CheckboxListTile is a stateless Widget... setState is redrawing the whole list.

You could wrap the CheckboxListTile into a Statefull Widget or into a StatefulBuilder ... if you call setState inside the StatefulBuilder only this part should be redrawed..

another way could be to save the scroll position... but i think redrawing only the part on screen you haved changed is smarter:-)

Answer 2

Probably because this line key: UniqueKey(), when you call setState the build function builds its widgets again, and the ListView will have a new UniqueKey so it will rebuild the list cause it thinks its a different widget

remove this line key: UniqueKey(), and it should work fine