dart - Flutter でのビルド中に StatefulWidget の状態を維持する

Question

ユーザーがリスト内のアイテムを追加、削除、および操作できるステートフル ウィジェットのリストがあります。リストからアイテムを削除すると、リスト内の後続のアイテムが、削除された行を埋めるために移動するときに再構築されます。これにより、これらのウィジェットの状態データが失われますが、画面上の位置以外は変更されないはずです。位置が変わっても、リスト内の残りのアイテムの状態を維持できるようにしたい。

以下は、主に StatefulWidgets のリストで構成される私のアプリの簡略版です。ユーザーは、フローティング アクション ボタンを使用してリスト (私のアプリでは「タスク」) に項目を追加したり、スワイプして項目を削除したりできます。リスト内の任意の項目をタップして強調表示すると、項目の背景色の状態が変わります。リストで複数のアイテムが強調表示され、アイテム (リストの最後のアイテム以外) が削除された場合、削除されたアイテムを置き換えるために移動したアイテムは、状態データを失います (つまり、背景色が透明にリセットされます)。これは、タスクが削除された後に setState() を呼び出して表示を更新したため、_taskList が再構築されたためだと思われます。タスクが _taskList から削除された後、残りのタスクの状態データを維持するクリーンな方法があるかどうかを知りたいです。

void main() => runApp(new TimeTrackApp());

class TimeTrackApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Time Tracker',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new TimeTrackHome(title: 'Task List'),
    );
  }
}

class TimeTrackHome extends StatefulWidget {
  TimeTrackHome({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _TimeTrackHomeState createState() => new _TimeTrackHomeState();
}

class _TimeTrackHomeState extends State<TimeTrackHome> {
  TextEditingController _textController;
  List<TaskItem> _taskList = new List<TaskItem>();

  void _addTaskDialog() async {
    _textController = TextEditingController();

    await showDialog(
        context: context,
        builder: (_) => new AlertDialog(
              title: new Text("Add A New Task"),
              content: new TextField(
                controller: _textController,
                decoration: InputDecoration(
                    border: InputBorder.none, hintText: 'Enter the task name'),
              ),
              actions: <Widget>[
                new FlatButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text("CANCEL")),
                new FlatButton(
                    onPressed: (() {
                      Navigator.pop(context);
                      _addTask(_textController.text);
                    }),
                    child: const Text("ADD"))
              ],
            ));
  }

  void _addTask(String title) {
    setState(() {
      // add the new task
      _taskList.add(TaskItem(
        name: title,
      ));
    });
  }

  @override
  void initState() {
    _taskList = List<TaskItem>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Align(
        alignment: Alignment.topCenter,
        child: ListView.builder(
            padding: EdgeInsets.all(0.0),
            itemExtent: 60.0,
            itemCount: _taskList.length,
            itemBuilder: (BuildContext context, int index) {
              if (index < _taskList.length) {
                return Dismissible(
                  key: ObjectKey(_taskList[index]),
                  onDismissed: (direction) {
                    if(this.mounted) {
                      setState(() {
                        _taskList.removeAt(index);
                      });
                    }
                  },
                  child: _taskList[index],
                );
              }
            }),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _addTaskDialog,
        tooltip: 'Click to add a new task',
        child: new Icon(Icons.add),
      ),
    );
  }
}

class TaskItem extends StatefulWidget {
  final String name;

  TaskItem({Key key, this.name}) : super(key: key);
  TaskItem.from(TaskItem other) : name = other.name;

  @override
  State<StatefulWidget> createState() => new _TaskState();
}

class _TaskState extends State<TaskItem> {
  static final _taskFont =
  const TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold);
  Color _color = Colors.transparent;

  void _highlightTask() {
    setState(() {
      if(_color == Colors.transparent) {
        _color = Colors.greenAccent;
      }
      else {
        _color = Colors.transparent;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Material(
        color: _color,
        child: ListTile(
          title: Text(
            widget.name,
            style: _taskFont,
            textAlign: TextAlign.center,
          ),
          onTap: () {
            _highlightTask();
          },
        ),
      ),
      Divider(
        height: 0.0,
      ),
    ]);
  }
}