Flutter 我如何创建日历插件？

场景背景

我希望用户能够保留显示为网格的1小时时间点，其中y轴是时间，x轴是日期。两个轴都需要可滚动以更改日期和时间。请找到下面的截图

我知道我需要创建自定义插件，但是我需要一些关于在哪里查找的提示。我不是在寻求解决办法。如果有人向我推荐一个链接来启动我自己的日历旋转木马，也许如果成功了，我会把这个插件发布回社区

无论你的回答是什么，我都很感激！非常感谢

此软件包看起来像您需要的

y轴是时间，x轴是日期

---

我最终创建了自己的自定义小部件。下面是小部件的基本框架

import 'package:flutter/material.dart';
import 'package:guruvise/widgets/textStyle.dart';
import 'package:date_utils/date_utils.dart';

class GridCalendar extends StatefulWidget {
  final DateTime startDate;
  final DateTime endDate;
  Map<int, DateTime> pagesMap = {};

  GridCalendar({@required this.startDate, @required this.endDate}) {
    DateTime endWeekDay = Utils.lastDayOfWeek(this.endDate);
    DateTime startWeekDay = Utils.firstDayOfWeek(this.startDate);

    int numberOfSheets =
        (endWeekDay.difference(startWeekDay).inDays / 7).toInt();

    for (int i = 0; i <= numberOfSheets; i++) {
      pagesMap[i] = startWeekDay.add(Duration(days: i * 7));
    }
  }

  @override
  _GridCalendarState createState() => _GridCalendarState();
}

class _GridCalendarState extends State<GridCalendar> {
  PageController _controller = PageController();
  List<Widget> pages = [];

  @override
  Widget build(BuildContext context) {
    widget.pagesMap.forEach((int index, DateTime start) {
      pages.add(_buildPage(start));
    });

    return PageView(
      controller: _controller,
      scrollDirection: Axis.horizontal,
      physics: ScrollPhysics(),
      children: pages,
    );
  }

  Widget _buildPage(DateTime start) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Container(
          height: 100,
          child: _buildHeader(start),
        ),
        Expanded(
          child: _buildGridDateTime(start),
        ),
      ],
    );
  }

  Widget _buildHeader(DateTime start) {
    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: List.generate(
        8,
        (int index) {
          if (index == 0) {
            return Container(
              width: 20,
            );
          }
          int weekDay = (index) % 7;
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                Utils.weekdays[weekDay],
                style: textStyle(fontSize: 16, isBold: true),
              ),
              Text(
                start.add(Duration(days: index)).day.toString(),
                style: textStyle(
                  fontSize: 11,
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  Widget _buildGridDateTime(DateTime start) {
    return GridView.count(
      crossAxisCount: 8,
      children: List.generate(
        8 * 18,
        (int index) {
          if (index % 8 == 0) {
            double temp = ((index - 8) / 8 + 7);
            String suffix = ' PM';
            if (temp < 12) {
              suffix = ' AM';
            }
            if (suffix == ' PM') {
              temp = temp % 12 == 0 ? 12.0 : temp % 12;
            }

            String time =
                temp.toInt().toString().padLeft(2, '0') + ':00' + suffix;

            return Text(
              time,
              style: textStyle(
                fontSize: 11,
              ),
            );
          } else {
            int weekDay = index % 8;
            int time = (((index - weekDay) / 8) + 6).toInt();
            return Container(
              padding: EdgeInsets.all(5),
              margin: EdgeInsets.all(1),
              color: Colors.blueGrey.shade50,
              child: Text('$time x $weekDay'),
            );
          }
        },
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:guruvise/widgets/textStyle.dart”；
导入“包：date_utils/date_utils.dart”；
类GridCalendar扩展了StatefulWidget{
最终日期时间开始日期；
最终日期时间结束日期；
Map pagesMap={}；
GridCalendar（{@required this.startDate，@required this.endDate}）{
DateTime endWeekDay=Utils.lastDayOfWeek（this.endDate）；
DateTime startWeekDay=Utils.firstDayOfWeek（this.startDate）；
整数张=
（endWeekDay.difference（startWeekDay.inDays/7.toInt（）；
对于（int i=0；i_GridCalendarState（）；
}
类\u GridCalendarState扩展状态{
PageController _controller=PageController（）；
列表页=[]；
@凌驾
小部件构建（构建上下文）{
widget.pagesMap.forEach（（int索引，DateTime开始）{
添加（_buildPage（start））；
});
返回页面视图(
控制器：_控制器，
滚动方向：轴水平，
物理：物理（），
儿童：页，
);
}
小部件构建页面（日期时间开始）{
返回列(
mainAxisSize:mainAxisSize.max，
儿童：[
容器(
身高：100，
子项：_buildHeader（开始），
),
扩大(
子项：_buildGridDateTime（开始），
),
],
);
}
Widget\u buildHeader（日期时间开始）{
返回行(
mainAxisSize:mainAxisSize.max，
mainAxisAlignment:mainAxisAlignment.space，
crossAxisAlignment:crossAxisAlignment.center，
子项：List.generate(
8.
（国际索引）{
如果（索引==0）{
返回容器(
宽度：20，
);
}
国际工作日=（指数）%7；
返回列(
mainAxisSize:mainAxisSize.min，
儿童：[
正文(
Utils.工作日[工作日]，
样式：textStyle（fontSize:16，isBold:true），
),
正文(
start.add（持续时间（天：索引））.day.toString（），
样式：textStyle(
尺寸：11，
),
),
],
);
},
),
);
}
Widget\u buildGridDateTime（DateTime开始）{
返回GridView.count(
交叉轴计数：8，
子项：List.generate(
8 * 18,
（国际索引）{
如果（索引%8==0）{
双温=（（指数-8）/8+7）；
字符串后缀='PM'；
如果（温度<12）{
后缀='AM'；
}
如果（后缀=='PM'）{
温度=温度%12==0？12.0:温度%12；
}
弦时=
temp.toInt（）.toString（）.padLeft（2，'0'）+'：00'+后缀；
返回文本(
时间
样式：textStyle(
尺寸：11，
),
);
}否则{
int weekDay=索引%8；
int time=（（索引-工作日）/8）+6.toInt（）；
返回容器(
填充：边缘设置。全部（5），
保证金：所有（1），
颜色：Colors.blueGrey.shade50，
子项：文本（“$time x$weekDay”），
);
}
},
),
);
}
}