Flutter 在我的动画列表中更改图标 onTap

Question

I'm trying to change my icon after I tap on my List Item. I already tried different things: I tried the onTap method but the icon just does not want to change. I'm very new to flutter and I would love to find some help for my problem:). Here is my code.

I already searched for solutions but I didn't got it working in my project

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'To-Do List',
      theme: ThemeData(
        primaryColor: Colors.white,
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('To-Do List'),
          backgroundColor: Colors.amber,
        ),
        body: BodyLayout(),
      ),
    );
  }
}

class BodyLayout extends StatefulWidget {
  @override
  BodyLayoutState createState() {
    return new BodyLayoutState();
  }
}

class BodyLayoutState extends State<BodyLayout> {

  // The GlobalKey keeps track of the visible state of the list items
  // while they are being animated.
  final GlobalKey<AnimatedListState> _listKey = GlobalKey();

  // backing data
  List<String> _data = [];
  final _isdone = Set<String>();
 // bool selected = false;
  List<bool> selected = new List<bool>();
  Icon notdone = Icon(Icons.check_box_outline_blank);
  Icon done = Icon(Icons.check_box);

  TextEditingController todoController = TextEditingController();



  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 445,
          child: AnimatedList(
            // Give the Animated list the global key
            key: _listKey,
            initialItemCount: _data.length,
            // Similar to ListView itemBuilder, but AnimatedList has
            // an additional animation parameter.
            itemBuilder: (context, index, animation) {
              // Breaking the row widget out as a method so that we can
              // share it with the _removeSingleItem() method.
              return _buildItem(_data[index], animation);
            },
          ),
        ),
        TextField(
          controller: todoController,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'To-Do'
          ),
        ),

        RaisedButton(
          child: Text('Insert item', style: TextStyle(fontSize: 20)),
          onPressed: () {
            _insertSingleItem();
          },
        ),
        RaisedButton(
          child: Text('Remove item', style: TextStyle(fontSize: 20)),
          onPressed: () {
            _removeSingleItem();
          },
        )
      ],
    );
  }

  // This is the animated row with the Card.
  Widget _buildItem(String item, Animation animation) {
    final isdone = _isdone.contains(item);
    selected.add(false);
    return SizeTransition(
      sizeFactor: animation,
      child: Card(
        child: ListTile(
          title: Text(
            item,
            style: TextStyle(fontSize: 20),
          ),
          trailing: Icon(
           isdone ? Icons.check_box: Icons.check_box_outline_blank
          ),
          onTap: (){
            setState(() {
             
            });
          },

        ),
      ),
    );
  }


  void _insertSingleItem() {
    int insertIndex = 0;
    setState(() {
      _data.insert(0, todoController.text);
    });
    // Add the item to the data list.
    // Add the item visually to the AnimatedList.
    _listKey.currentState.insertItem(insertIndex);
  }

  void _removeSingleItem() {
    int removeIndex = 0;
    // Remove item from data list but keep copy to give to the animation.
    String removedItem = _data.removeAt(removeIndex);
    // This builder is just for showing the row while it is still
    // animating away. The item is already gone from the data list.
    AnimatedListRemovedItemBuilder builder = (context, animation) {
      return _buildItem(removedItem, animation);
    };
    // Remove the item visually from the AnimatedList.
    _listKey.currentState.removeItem(removeIndex, builder);
  }
}```

Answer 1

You have already mentioned the icons above. You simply need to use them instead of declaring new ones again.

// This is the animated row with the Card.
Widget _buildItem(String item, Animation animation) {
  final isdone = _isdone.contains(item);
  selected.add(false);
  return SizeTransition(
    sizeFactor: animation,
    child: Card(
      child: ListTile(
        title: Text(
          item,
          style: TextStyle(fontSize: 20),
        ),
        trailing: isdone ? done: notdone, // use the icon variables you have already defined
        onTap: (){
          setState(() {
            // add the item to _isdone set if it is not added and remove it if it is added when tapped on the list item
            if(isdone) {
              _isdone.remove(item);
            } else {
              _isdone.add(item);
            }
          });
        },
      ),
    ),
  );
}

In this code, I have added the item and removed the item in setSate() in the onTap() , so that whenever you tap the list item, _isdone Set gets updated and the build() is reloaded. Which makes your layout and data update itself every time you tap on the list item.