Items state changes when scrolling in listview

Question

I have list view, which contains ExpansionPanelList and each ExpansionPanel has a button .. checking/unchecking it will change a color. When I for example uncheck the first three on the list, then scroll down to the end of the list, then came up again I see the unchecked items being checked again.

Here's my code:

new Expanded(
                child: new ListView(
                    padding: EdgeInsets.only(
                        right: 20.0, left: 20.0 /*, bottom: 20.0*/),
                    children: interestsMap['interests']
                        .map<Widget>((i) => new InterestsItem.fromJson(i))
                        .toList()),
              ),

and the list is:

class _InterestsItemState extends State<InterestsItem> {
final String id;
final String name;
final String icon;
final String description;
bool isExpanded = false;
var color = Colors.white;
var toggle = false;
bool clicked = true;

_InterestsItemState(this.id, this.name, this.icon, this.description);

@override
Widget build(BuildContext context) {
return this.clicked
    ? new CustomExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {
          setState(() {
            this.isExpanded = !this.isExpanded;
          });
        },
        children: [
          new ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return new Container(
                child: new Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.createDoc[icon],
                      color: Colors.white,
                      size: 15.0,
                    ),
                    new Padding(
                      padding: EdgeInsets.only(left: 5.0, right: 7.0),
                      child: Text(
                        name,
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    new Spacer(),
                    new IconButton(
                        icon: new Icon(
                          CustomFont.tick_2,
                          color: this.color,
                        ),
                        onPressed: () {
                          setState(() {
                            interestsArray.remove(name);
                            this.setState(() => this.clicked =
                                !this.clicked /*color = Colors.black*/);
                          });
                        }),
                  ],
                ),
              );
            },
            isExpanded: this.isExpanded,
            body: new Center(
              child: new Padding(
                padding: EdgeInsets.all(10.0),
                child: Text(description),
              ),
            ),
          ),
        ],
      )
    : new UnclickedExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {
          setState(() {
            /*interestsList[index].isExpanded =
      !interestsList[index].isExpanded;*/
            this.isExpanded = !this.isExpanded;
          });
        },
        children: [
          new ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return new Container(
                child: new Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.createDoc[icon],
                      color: Color(0xff1A1824),
                      size: 15.0,

                    ),
                    new Padding(
                      padding: EdgeInsets.only(left: 5.0, right: 7.0),
                      child: Text(
                        name,
                        style: TextStyle(color: Color(0xff1A1824)),
                      ),
                    ),
                    new Spacer(),
                    new IconButton(
                        icon: new Image.asset(
                          'assets/Oval.png',
                          width: 22.0,
                          height: 22.0,
                        ),
                        onPressed: () {
                          setState(() {
                            interestsArray.add(name);
                            this.setState(() => this.clicked =
                                !this.clicked /*color = Colors.black*/);
                          });
                        }),
                  ],
                ),
              );
            },
            isExpanded: this.isExpanded,
            body: new Center(
              child: new Padding(
                padding: EdgeInsets.all(10.0),
                child: Text(description),
              ),
            ),
          ),
        ],
      );
 }
}

class InterestsItem extends StatefulWidget {
final String id;
final String name;
final String icon;
final String description;

InterestsItem(this.id, this.name, this.icon, this.description, {Key key})
  : super(key: key);

InterestsItem.fromJson(data)
  : this.id = data["id"],
    this.name = data["name"],
    this.icon = data["icon"],
    this.description = data["description"];

@override
_InterestsItemState createState() =>
  _InterestsItemState(this.id, this.name, this.icon, this.description);
}

why is this happening and how to solve it?

Answer 1

@lamatat Hi, ListView items are built on demand and the easiest way to save the state is to use AutomaticKeepAliveClientMixin

You will need to make following changes:

• Add AutomaticKeepAliveClientMixin to your subclass :

class _InterestsItemState extends State<InterestsItem> with AutomaticKeepAliveClientMixin<InterestsItem> {

• Implement wantKeepAlive in your subclass :

@override
bool get wantKeepAlive => true;

• Call super.build in your build widget :

@override
Widget build(BuildContext context) {
  super.build(context);
  return this.clicked....(

Good luck!