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

Question

场景背景

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

我知道我需要创建自定义插件，但是我需要一些提示。我不是在寻求解决方案。如果发生任何人向我建议启动我自己的日历轮播的链接的情况，也许如果可行，我会将此插件发布回社区。

无论您是谁，我都很感谢您的回复！提前谢谢了。

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

Answer 2

此软件包https://github.com/ZedTheLed/calendar_views看起来像您所需要的。
github https://github.com/ZedTheLed/calendar_views

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