Flutter 根据Flatter中即将发生的事件渲染视图

我正在调用一个具有不同定时事件的API（目前这是一个模拟API），因此根据主事件开始和结束之间有多少定时事件，我呈现/显示这些更改的最佳方式是什么？例如，我有一个事件在一个时间开始，在另一个时间结束，但中间有两个事件：

但如果中间还有两个事件，比如：

我应该如何显示/呈现这些更改？我是否应该为中间的事件插入另一个

ListView.builder

？以下是事件硬编码版本的代码：

ListView.builder(
                            shrinkWrap: true,
                            itemCount: 1,
                            itemBuilder: (context, index) {
                              return Column(
                                children: [
                                  Row(
                                    children: [
                                      Expanded(
                                        flex: 2,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "EVENT START",
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.id}AM',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 50.0,
                                      ),
                                      Expanded(
                                        flex: 6,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
// Should I implement a ListView.builder here and make the itemCount equal to the timed events so it renders that amount of events in between? How to best render the text
                                  Row(
                                    children: [
                                      Expanded(
                                        flex: 2,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "EVENT 1",
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.id}AM',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 50.0,
                                      ),
                                      Expanded(
                                        flex: 6,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        flex: 2,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "EVENT 2",
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.id}AM',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 50.0,
                                      ),
                                      Expanded(
                                        flex: 6,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        flex: 2,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "EVENT 3",
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.id}AM',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 50.0,
                                      ),
                                      Expanded(
                                        flex: 6,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        flex: 2,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "EVENT 4",
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.id}AM',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 50.0,
                                      ),
                                      Expanded(
                                        flex: 6,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                  Row(
                                    children: [
                                      Expanded(
                                        flex: 2,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "EVENT END",
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.id}AM',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                      SizedBox(
                                        height: 50.0,
                                      ),
                                      Expanded(
                                        flex: 6,
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                            Text(
                                              '${eventData.title}',
                                              style: kEventText,
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              );
                            })

我应该在这里实现一个ListView.builder，并使itemCount等于定时事件，这样它就可以像我在代码中的注释中所说的那样呈现中间的事件量了吗？如何根据事件计数“事件2”、“事件3”等最佳呈现文本。提前感谢您的帮助