RangeError（RangeError（索引）：无效值：有效值范围为空：0）从警报对话框的列表中删除项目时出错

Question

我对 flutter 还很陌生，正在学习一门课程，但遇到了这个错误：

RangeError (RangeError (index): Invalid value: Valid value range is empty: 0)

背景

我正在编写的用于学习 flutter 的简单应用程序是一个任务管理应用程序，我们有一个任务列表，您可以单击按钮将新任务添加到列表中。

查看任务的主列表时，您可以单击“查看”，然后弹出一个警报对话框，在警报对话框中显示任务“标题”和任务“描述”。

在警报对话框中，我有一个“保存”和“删除”按钮。保存工作正常，我在删除按钮方面遇到问题。

代码

class Rivers extends StatelessWidget {
  const Rivers({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Wave a Task'),
      ),
      body: Column(
        children: const [
          CircleAvatar(
            radius: 40,
            backgroundImage: AssetImage('images/wave.png'),
          ),
          RiverBody(),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => TaskPage(),
            ),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

class RiverBody extends StatelessWidget {
  const RiverBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView(
        padding: const EdgeInsets.only(top: 10.0),
        children: List.generate(
          Provider.of<Tasks>(context).tasks.length,
          (index) => ListTileCustom(
            index: index,
          ),
        ),
      ),
    );
  }
}

class ListTileCustom extends StatelessWidget {
  const ListTileCustom({Key? key, required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    Task currentTask = Provider.of<Tasks>(context).tasks[index];
    return CheckboxListTile(
      subtitle: Align(
        alignment: Alignment.centerLeft,
        child: TextButton(
          onPressed: () {
            showDialog(
                context: context,
                builder: (context) {
                  String title = Provider.of<Tasks>(context).tasks[index].title;
                  String description =
                      Provider.of<Tasks>(context).tasks[index].description;
                  TextEditingController titleController =
                      TextEditingController(text: title);
                  TextEditingController descriptionController =
                      TextEditingController(text: description);
                  return AlertDialog(
                    title: TextField(
                      controller: titleController,
                    ),
                    content: TextField(
                      controller: descriptionController,
                    ),
                    actions: [
                      TextButton(
                        style: TextButton.styleFrom(
                          primary: Colors.white,
                          backgroundColor: Colors.red,
                        ),
                        onPressed: () {
                          Provider.of<Tasks>(context, listen: false)
                              .deleteTask(index: index);
                          Navigator.of(context).pop();
                        },
                        child: const Text('Delete'),
                      ),
                      TextButton(
                        onPressed: () {
                          Provider.of<Tasks>(context, listen: false).save(
                              index: index,
                              newTitle: titleController.text,
                              newDescription: descriptionController.text);
                          Navigator.of(context).pop();
                        },
                        child: const Text('Save'),
                      ),
                    ],
                  );
                });
          },
          child: const Text('View'),
        ),
      ),
      onChanged: (newbool) {
        Provider.of<Tasks>(context, listen: false)
            .changeDone(index: index, isDone: newbool!);
      },
      value: currentTask.done,
      title: Text(currentTask.title),
    );
  }
}

当我单击删除按钮时，错误发生在第 74 行：

String title = Provider.of<Tasks>(context).tasks[index].title;

我认为发生的情况是，当我单击“删除”按钮并且它在按下的函数上运行时：

                onPressed: () {
                  Provider.of<Tasks>(context, listen: false)
                      .deleteTask(index: index);
                  Navigator.of(context).pop();
                },
                child: const Text('Delete'),
              ),

我认为正在破坏的代码因为警报对话框中的“标题”来自我刚刚删除的索引...所以在运行弹出窗口之前，警报对话框有一瞬间没有任何内容可显示...

我尝试移动 Navigator.of (context).pop(); 在前面删除电话，但这也不起作用。如果我继续执行代码，任务确实会被删除，所以它可以工作，但不确定如何修复弹出的错误。

删除任务函数是：

  void deleteTask({required int index}) {
    tasks.removeAt(index);
    notifyListeners();
  }

Answer 1

如果这是你的情况，对话框正在使用你正在删除的任务，你可以在两者之间添加一个微小的延迟 - 你甚至可以弹出另一个小对话框，上面写着“删除任务”，就像一个很好的用户体验。

我会做类似的事情：

void deleteTask({ required int index }) {
  Future.delayed(const Duration(milliseconds: 500) {
    tasks.removeAt(index);
    notifyListeners();
  }
}

作为一个很好的东西（以下内容是可选的）：

在显示旋转的圆形进度指示器和 后，我会立即显示一个小对话框文本小部件只是说“删除任务”或类似的内容。

我将按照上面的方式重构它，但现在我传递一个回调，如下所示：

void deleteTask({ required int index }, Function callback) {
  Future.delayed(const Duration(seconds: 1) {
    tasks.removeAt(index);
    notifyListeners();
    callback();
  }
}

在 onPressed 中，我将执行相同的操作，但在弹出主警报后，我将启动“删除任务”，在延迟完成并且回调执行它时，再次弹出导航器以将其关闭：

onPressed: () {
   Provider.of<Tasks>(context, listen: false)
     .deleteTask(index: index, () {
         // pop the Navigator again since the task is done
         Navigator.of(context).pop();
     });
     
     // yes, pop the Alert here
     Navigator.of(context).pop();

     // launch the other one
     showDialog();
  }, 

这是 Gist 详细介绍了该方法（在 DartPad.dev 上运行并查看）。您应该看到以下输出：