flutter_week_view 0.2.1+3

Flutter Week View #

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Flutter Week View is highly inspired by Android Week View.

Getting Started #

Getting started with Flutter Week View is very straight forward. You have the choice between two widgets : FlutterDayView and FlutterWeekView. Use the first one to display a single day and use the second one to display multiple days.

Example #

If you want a real project example, you can check this one on Github.

Day View #

Snippet :

// Let's get two dates :
DateTime now = DateTime.now();
DateTime date = DateTime(now.year, now.month, now.day);

// And here's our widget !
return DayView(
  date: now,
  events: [
    FlutterWeekViewEvent(
      title: 'An event 1',
      description: 'A description 1',
      start: date.subtract(Duration(hours: 1)),
      end: date.add(Duration(hours: 18, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 2',
      description: 'A description 2',
      start: date.add(Duration(hours: 19)),
      end: date.add(Duration(hours: 22)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 3',
      description: 'A description 3',
      start: date.add(Duration(hours: 23, minutes: 30)),
      end: date.add(Duration(hours: 25, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 4',
      description: 'A description 4',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 5',
      description: 'A description 5',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
  ],
  currentTimeCircleColor: Colors.pink,
);

Result :

Week view #

Snippet :

// Let's get two dates :
DateTime now = DateTime.now();
DateTime date = DateTime(now.year, now.month, now.day);

// And here's our widget !
return WeekView(
  dates: [date.subtract(Duration(days: 1)), date, date.add(Duration(days: 1))],
  events: [
    FlutterWeekViewEvent(
      title: 'An event 1',
      description: 'A description 1',
      start: date.subtract(Duration(hours: 1)),
      end: date.add(Duration(hours: 18, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 2',
      description: 'A description 2',
      start: date.add(Duration(hours: 19)),
      end: date.add(Duration(hours: 22)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 3',
      description: 'A description 3',
      start: date.add(Duration(hours: 23, minutes: 30)),
      end: date.add(Duration(hours: 25, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 4',
      description: 'A description 4',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 5',
      description: 'A description 5',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
  ],
);

Result :

Options #

Common options #

Here are the options that are available for both FlutterDayView and FlutterWeekView :

  • events Events to display.
  • dateFormatter The function that returns a formatted date as a String from a year, a month and a day.
  • hourFormatter The function that returns a formatted hour as a String from a hour and a minute.
  • dayBarTextStyle The day bar (top bar) text style.
  • dayBarHeight The day bar height (≤ 0 to disable).
  • dayBarBackgroundColor The day bar background color (null to remove).
  • hoursColumnTextStyle The hours column (left column) text style.
  • hoursColumnWidth The hours column width (≤ 0 to disable).
  • hoursColumnBackgroundColor The hours column background color (null to remove).
  • hourRowHeight A hour row height (with a zoom factor of 1.0).
  • inScrollableWidget Whether to put the widget in a scrollable widget (disable if you want to manage the scroll by yourself).
  • scrollToCurrentTime Whether the widget should automatically scroll to the current time (hour and minute with day if you are in a Week View).
  • userZoomable Whether the user is able to (un)zoom the widget.

Flutter day view #

Here are the specific options of FlutterDayView :

  • date The widget date.
  • eventsColumnBackgroundPainter The events column background painter.
  • currentTimeRuleColor The current time rule color (null to disable).
  • currentTimeCircleColor The current time circle color (null or blank to disable).

Flutter week view #

Here are the specific options of FlutterWeekView :

  • dates The widget dates.
  • dayViewBuilder The function that allows to build a Day View widget.
  • dayViewWidth A Day View width.

Please note that you can create a FlutterWeekView instance using a builder. All previous options are still available but you don't need to provide the dates list. However, you need to provide a DateCreator (and a date count if you can, if it's impossible for you to do it then scrollToCurrentTime will have no effect).

Contributions #

You have a lot of options to contribute to this project ! You can :

[0.2.1+3] - 2020-02-17

  • Fixed a bug that disallowed to put the widget in a stateful context.

[0.2.1+2] - 2020-02-17

  • Fixed a problem with the current time rule circle.

[0.2.1+1] - 2020-02-13

  • Fixed a problem with the current time rule.

[0.2.1] - 2020-02-02

  • Added the ability to create a WeekView widget with a builder.
  • Fixed a problem with controllers that were not usable.

[0.2.0+2] - 2020-01-27

  • A little bug fixed.

[0.2.0+1] - 2020-01-23

  • Performance improvement (see #8).

[0.2.0] - 2020-01-21

  • Added the ability to completely change the background.
  • Performance improvement (see #7).

[0.1.0+1] - 2020-01-15

  • Fixed a bug where events that weren't overlapping the current date were not displayed.

[0.1.0] - 2020-01-13

  • First public Beta.

example/README.md

Examples #

If you want a "real project" example, you can check this one on Github.

If you want a little snippet, go to the projet page.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_week_view: ^0.2.1+3

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_week_view/flutter_week_view.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
72
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Feb 17, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/src/controller.dart.

Run flutter format to format lib/src/controller.dart.

Format lib/src/day_view.dart.

Run flutter format to format lib/src/day_view.dart.

Format lib/src/event.dart.

Run flutter format to format lib/src/event.dart.

Fix additional 3 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/headers.dart (Run flutter format to format lib/src/headers.dart.)
  • lib/src/utils.dart (Run flutter format to format lib/src/utils.dart.)
  • lib/src/week_view.dart (Run flutter format to format lib/src/week_view.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
pedantic ^1.9.0