title: Updating List child color using setState is not working in flutter
body: <p>Hi I was trying to add a new child to List using a existing child itself in the list.
  I tried to achieve this by using setState function in the existing child, but it doesn't work.
  I don't know why it's not working.
  My assumption was that, if I change the task.completed and call the setState function, It will understand task.complete is dirty and refresh the objects related with.
  Here's my code</p>
  <pre><code>Widget build(BuildContext context) {
      return SingleChildScrollView(
        child: Column(
          children: &lt;Widget&gt;[
            SizedBox(
              height: 400,
              child: AnimatedList(
                key: _listKey,
                initialItemCount: _data.length,
                itemBuilder: (context, index, animation) {
                  return _buildItem(_data[index], animation);
                },
              ),
            )
          ],
        ),
      );
    }
  </code></pre>
  <p>I build AnimatedList calling _buildItem</p>
  <pre><code> Widget _buildItem(Widget item, Animation animation) {
      return SizeTransition(sizeFactor: animation, child: item);
    }
  </code></pre>
  <p>In the buildItem it gives animation to item</p>
  <pre><code>void initState() {
      super.initState();
      _data.add(GestureDetector(
        child: Text(
          &quot;Add&quot;,
          style: TextStyle(color: Colors.grey, fontSize: 20.0),
        ),
        onTap: () {
          setState(() {
            _onButtonPress();
          });
        },
      ));
    }
  </code></pre>
  <p>In the initState function I added an item on the list which will be &quot;existing item&quot;.</p>
  <pre><code>void _onButtonPress() {
      // replace this with method choice below
      _insertSingleItem();
    }
  </code></pre>
  <pre><code>void _insertSingleItem() {
      int insertIndex = _data.length - 1;
      Widget widget = Form(
        child: TextField(
          controller: textEditingController,
          autofocus: true,
          decoration: InputDecoration(
            isDense: true,
            contentPadding: EdgeInsets.all(0.0),
            border: InputBorder.none,
          ),
          onEditingComplete: () {
            Task task = Task(name: textEditingController.text, completed: false);
            print(identityHashCode(task));
            tasks.add(task);
            print(identityHashCode(tasks.last));
            Widget taskWidget = GestureDetector(
              child: Text(
                task.name,
                style: TextStyle(
                    color: task.completed ? Colors.grey : Colors.black87,
                    fontSize: 20.0),
              ),
              onTap: () {
                setState(() {
                  print(identityHashCode(task));
                  task.completed = !task.completed;
                  bool temp = task.completed;
                  print('$temp');
                }
                );
              },
            );
            setState(() {
              _data.removeAt(insertIndex);
              _data.insert(insertIndex, taskWidget);
              textEditingController.clear();
            });
          },
          showCursor: false,
        ),
      );
      _data.insert(insertIndex, widget);
      _listKey.currentState
          .insertItem(insertIndex, duration: Duration(seconds: 1));
    }
  </code></pre>
  <p>The problem occurs here. in the Gesturedetector, I want to change color itself by tapping it. I checked the value color changes by using print and it was changing from true to false when i tapping the child.
  I don't understand why setState cannot change the dirty children, It knows task.completed is changed and so it is dirty.
  please someone help me. I have been struggled with this problem on 3 days....</p>
  <p>-----------------edited-----------------
  I solved this problem by separating widget like this.</p>
  <pre><code>class Test extends StatefulWidget {
    Test({this.task});
    Task task;
    @override
    _TestState createState() =&gt; _TestState(task: task);
  }
  
  class _TestState extends State&lt;Test&gt; {
    Task task;
  
    _TestState({this.task});
    @override
    Widget build(BuildContext context) {
      print('build');
      return GestureDetector(
          onTap: () {
            setState(() {
              task.completed = !task.completed;
            });
          },
          child: Text(
            task.name,
            style: TextStyle(
                color: task.completed ? Colors.grey[400] : Colors.black87,
                fontSize: 20.0),
          )
      );
    }
  }
  </code></pre>
  <p>But still I don't understand why it works.</p>