Flutter：我将如何创建日历插件？答案

【问题标题】：Flutter: How would I create calendar plugin?Flutter：我将如何创建日历插件？
【发布时间】：2019-12-30 08:10:28
【问题描述】：

场景背景

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

我知道我需要创建自定义插件，但是我需要一些提示来说明将要查找的位置。我不是在寻求解决方案。如果碰巧有人建议我一个链接来启动我自己的日历轮播，也许如果成功了，我会将此插件发布回社区。p>

无论您的回复是什么，我都非常感谢！提前谢谢了。

【问题讨论】：

标签： flutter flutter-layout flutter-plugin

【解决方案1】：

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

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'),
            );
          }
        },
      ),
    );
  }
}

【讨论】：

【解决方案2】：

这个包https://github.com/ZedTheLed/calendar_views 看起来像你需要的。

y 轴是时间，x 轴是日期。

【讨论】：