timetable 0.2.0

📅 Customizable, animated calendar widget including day & week views

📅 Customizable, animated calendar widget including day & week views.

Event positioning demo	Zoomed in	Dark mode & custom range

• Getting started
  • 1. Initialize time_machine
  • 2. Define your Events
  • 3. Create an EventProvider
  • 4. Create a TimetableController
  • 5. Create your Timetable
• Features & Coming soon

Getting started

1. Initialize time_machine

This package uses time_machine for handling date and time, which you first have to initialize.

Add this to your pubspec.yaml:

flutter:
  assets:
    - packages/time_machine/data/cultures/cultures.bin
    - packages/time_machine/data/tzdb/tzdb.bin

Modify your main.dart's main():

import 'package:flutter/services.dart';
import 'package:time_machine/time_machine.dart';

void main() async {
  // Call these two functions before `runApp()`.
  WidgetsFlutterBinding.ensureInitialized();
  await TimeMachine.initialize({'rootBundle': rootBundle});

  runApp(MyApp());
}

^{Source: https://pub.dev/packages/time_machine#flutter-specific-notes}

2. Define your Events

Events are provided as instances of Event. To get you started, there's the subclass BasicEvent, which you can instantiate directly. If you want to be more specific, you can also implement your own class extending Event.

Note: Most classes of timetable accept a type-parameter E extends Event. Please set it to your chosen Event-subclass (e.g. BasicEvent) to avoid runtime exceptions.

In addition, you also need a Widget to display your events. When using BasicEvent, this can simply be BasicEventWidget.

3. Create an EventProvider

As the name suggests, you use EventProvider to provide Events to timetable. There are currently two EventProviders to choose from:

• EventProvider.list(List<E> events): Use this provider if you have a fixed list of events.
• EventProvider.stream({StreamedEventGetter<E> eventGetter}): Use this provider if your events can change or you have many events and only want to load the relevant subset.

final myEventProvider = EventProvider.list([
  BasicEvent(
    id: 0,
    title: 'My Event',
    color: Colors.blue,
    start: LocalDate.today().at(LocalTime(13, 0, 0)),
    end: LocalDate.today().at(LocalTime(15, 0, 0)),
  ),
]);

See the example for more EventProvider samples!

4. Create a TimetableController

Similar to a ScrollController or a TabController, a TimetableController is responsible for interacting with a Timetable and managing its state. You can instantiate it with your EventProvider:

final myController = TimetableController(
  eventProvider: myEventProvider,
  // Optional parameters with their default values:
  initialTimeRange: InitialTimeRange.range(
    startTime: LocalTime(8, 0, 0),
    endTime: LocalTime(20, 0, 0),
  ),
  initialDate: LocalDate.today(),
  visibleRange: VisibleRange.week(),
  firstDayOfWeek: DayOfWeek.monday,
);

Don't forget to dispose your controller, e.g. in State.dispose!

5. Create your Timetable

Using your TimetableController and EventBuilder, you can now create a Timetable widget:

Timetable<BasicEvent>(
  controller: myController,
  eventBuilder: (event) => BasicEventWidget(event),
)

And you're done 🎉

Features & Coming soon

• Smartly arrange overlapping events
• Zooming
• Selectable VisibleRanges
• Animate between different VisibleRanges
• Display all-day events at the top
• Month-view, Agenda-view
• Listener when tapping the background (e.g. for creating an event)
• Support for event resizing