flutter - Flutter: How would I create calendar plugin?

Question

Scenario Background

I want users to be able to reserve 1 hour time spots displayed as grid where the y-axis is the time and the x-axis is the date. both axis needs to be scrollable to change date and time. Kindly find below screenshot

I know I need to create custom plugin, however I need some hint on where about to look. I am not asking for a solution. If it happen anyone to suggest me a link to start my own calendar carousel, maybe if it worked out I'll publish this plugin back to community.

I appreciate your responses whatever they are! many thanks in advance.

标签： flutterflutter-layoutflutter-plugin

Answer 1

I ended up creating my own custom widget. Here is below a basic scaffold of the widget

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