如何使用flutter table_calendar构建具有不同颜色的多个标记？答案

【问题标题】：how to build multiple marker with different colours by using flutter table_calendar?如何使用flutter table_calendar构建具有不同颜色的多个标记？
【发布时间】：2020-06-12 18:59:19
【问题描述】：

我是 Flutter 的新手，从 table_calendar 示例代码中学习，我正在尝试修改“Widget _buildTableCalendarWithBuilders”，以便它可以打印多个不同颜色的标记，有人可以告诉我正确的方法吗？

我需要的结果是当在字符串中找到“Apple”时，打印一个红点。当在字符串中找到'Orange'时，打印一个黑点，如果两者都存在，日期框应该有红点和黑点。

下面是我的代码

        markersBuilder: (context, date, events, holidays) {
          final children = <Widget>[];

          String checkString = events.toString();
          if (checkString.contains('Apple')) {
            children.add(
              Positioned(
                right: 1,
                bottom: 1,
                child: _buildEventsMarker2(date, events, Colors.red),
              ),
            );
          }

          if (checkString.contains('Orange')) {
            children.add(
              Positioned(
                right: 1,
                bottom: 1,
                child: _buildEventsMarker2(date, events, Colors.black),
              ),
            );
          }

          if (holidays.isNotEmpty) {
            children.add(
              Positioned(
                right: -2,
                top: -2,
                child: _buildHolidaysMarker(),
              ),
            );
          }

          return children;
        }

我的新小部件

  Widget _buildEventsMarker2(DateTime date, List events, markerColors) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: markerColors,
      ),
      width: 10.0,
      height: 10.0,
    );
  }

【问题讨论】：

你好，有什么新鲜事吗？
你找到办法了吗？

标签： flutter dart

【解决方案1】：

我找到了两种改变标记颜色的方法。

fabianogadenz 在这里回答了第一个问题：github link

第二种方式，我想在选择有事件的日子时切换标记颜色。所以我将 selectedDay 存储在一个变量中：

DateTime? selectedDay;
    
TableCalendar(
  onDaySelected: (a, b) {
    setState(() {
      selectedDay = a;
    });
  },
)

然后我只是使用 calendarBuilder(singleMarkerBuilder) 将它与事件地图日期进行了比较：

final map = <DateTime, List<String>>{
  DateTime.utc(2021, 9, 2): [
    'Event A',
    'Event B',
  ],
  DateTime.utc(2021, 9, 3): [
    "Event C",
  ],
};

TableCalendar(
  calendarBuilders: CalendarBuilders(
    singleMarkerBuilder: (context, date, _) {
      return Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: date == selectedDay ? Colors.white : Colors.black), //Change color
          width: 5.0,
          height: 5.0,
          margin: const EdgeInsets.symmetric(horizontal: 1.5),
      );
    },
  ),
)

Result here

【讨论】：

【解决方案2】：

你可以在 CalendarStyle 中添加这个：

markerDecoration: 常量 BoxDecoration( 颜色：颜色.黑色，形状：BoxShape.circle， ),

如果您需要修改事件标记，我们有更多选择：

this.markersAlignment = Alignment.bottomCenter,
this.markersMaxCount = 4,
this.markersOffset = const PositionedOffset(),
this.markerDecoration = const BoxDecoration(
  color: const Color(0xFF263238),
  shape: BoxShape.circle,
),

【讨论】：

【解决方案3】：

您可以通过以下代码制作多标记。它可以是垂直或水平列表生成器：

calendarBuilders: CalendarBuilders(
                            markerBuilder: (BuildContext context, date, events) {
                              if (events.isEmpty) return SizedBox();
                              return ListView.builder(
                                  shrinkWrap: true,
                                  scrollDirection: Axis.horizontal,
                                  itemCount: events.length,
                                  itemBuilder: (context, index) {
                                    return Container(
                                      margin: const EdgeInsets.only(top: 20),
                                      padding: const EdgeInsets.all(1),
                                      child: Container(
                                        // height: 7,
                                        width: 5,
                                        decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: Colors.primaries[
                                                Random().nextInt(Colors.primaries.length)]),
                                      ),
                                    );
                                  });
                            },
                          ),

【讨论】：