flutter_week_view 0.2.1+7

  • Readme
  • Changelog
  • Example
  • Installing
  • 91

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).
  • initialHour The initial hour to put the widget on.
  • initialMinute The initial minute to put the widget on.
  • 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+7] - 2020-03-18 #

  • Fixed a bug with custom event text builders.

[0.2.1+6] - 2020-03-12 #

  • Fixed a bug with initial scrolling.

[0.2.1+5] - 2020-03-10 #

  • Fixed a bug with events positioning.
  • Added the ability to change the initial hour / minute.
  • Fixed day bar positioning in DayView.

[0.2.1+4] - 2020-02-18 #

  • Fixed a bug with ZoomController in stateful context.

[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/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart' as launcher;
import 'package:flutter_week_view/flutter_week_view.dart';

/// First plugin test method.
void main() => runApp(_FlutterWeekViewDemoApp());

/// The demo material app.
class _FlutterWeekViewDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Week View Demo',
        initialRoute: '/',
        routes: {
          '/': (context) => inScaffold(body: _FlutterWeekViewDemoAppBody()),
          '/day-view': (context) => inScaffold(
                title: 'Demo day view',
                body: _DemoDayView(),
              ),
          '/week-view': (context) => inScaffold(
                title: 'Demo week view',
                body: _DemoWeekView(),
              ),
          '/dynamic-day-view': (context) => _DynamicDayView(),
        },
      );

  static Widget inScaffold({
    String title = 'Flutter Week View',
    @required Widget body,
  }) =>
      Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: body,
      );
}

/// The demo app body widget.
class _FlutterWeekViewDemoAppBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String github = 'https://github.com/Skyost/FlutterWeekView';
    return Padding(
      padding: const EdgeInsets.all(30),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 40),
              child: Text(
                'Flutter Week View demo',
                style: Theme.of(context).textTheme.display1,
                textAlign: TextAlign.center,
              ),
            ),
            RaisedButton(
              child: const Text('Demo day view'),
              onPressed: () => Navigator.pushNamed(context, '/day-view'),
            ),
            RaisedButton(
              child: const Text('Demo week view'),
              onPressed: () => Navigator.pushNamed(context, '/week-view'),
            ),
            RaisedButton(
              child: const Text('Demo dynamic day view'),
              onPressed: () => Navigator.pushNamed(context, '/dynamic-day-view'),
            ),
            const Expanded(
              child: SizedBox.expand(),
            ),
            GestureDetector(
              onTap: () async {
                if (await launcher.canLaunch(github)) {
                  await launcher.launch(github);
                }
              },
              child: Text(
                github,
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  color: Colors.blue[800],
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// The demo day view widget.
class _DemoDayView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    DateTime date = DateTime(now.year, now.month, now.day);
    return DayView(
      initialHour: 7,
      date: now,
      events: [
        FlutterWeekViewEvent(
          title: 'An event 1',
          description: 'A description 1',
          start: date.subtract(const Duration(hours: 1)),
          end: date.add(const Duration(hours: 18, minutes: 30)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 2',
          description: 'A description 2',
          start: date.add(const Duration(hours: 19)),
          end: date.add(const Duration(hours: 22)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 3',
          description: 'A description 3',
          start: date.add(const Duration(hours: 23, minutes: 30)),
          end: date.add(const Duration(hours: 25, minutes: 30)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 4',
          description: 'A description 4',
          start: date.add(const Duration(hours: 20)),
          end: date.add(const Duration(hours: 21)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 5',
          description: 'A description 5',
          start: date.add(const Duration(hours: 20)),
          end: date.add(const Duration(hours: 21)),
        ),
      ],
      currentTimeCircleColor: Colors.pink,
    );
  }
}

/// The demo week view widget.
class _DemoWeekView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    DateTime date = DateTime(now.year, now.month, now.day);
    return WeekView(
      initialHour: 7,
      dates: [date.subtract(const Duration(days: 1)), date, date.add(const Duration(days: 1))],
      events: [
        FlutterWeekViewEvent(
          title: 'An event 1',
          description: 'A description 1',
          start: date.subtract(const Duration(hours: 1)),
          end: date.add(const Duration(hours: 18, minutes: 30)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 2',
          description: 'A description 2',
          start: date.add(const Duration(hours: 19)),
          end: date.add(const Duration(hours: 22)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 3',
          description: 'A description 3',
          start: date.add(const Duration(hours: 23, minutes: 30)),
          end: date.add(const Duration(hours: 25, minutes: 30)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 4',
          description: 'A description 4',
          start: date.add(const Duration(hours: 20)),
          end: date.add(const Duration(hours: 21)),
        ),
        FlutterWeekViewEvent(
          title: 'An event 5',
          description: 'A description 5',
          start: date.add(const Duration(hours: 20)),
          end: date.add(const Duration(hours: 21)),
        ),
      ],
    );
  }
}

/// A day view that displays dynamically added events.
class _DynamicDayView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DynamicDayViewState();
}

/// The dynamic day view state.
class _DynamicDayViewState extends State<_DynamicDayView> {
  /// The added events.
  List<FlutterWeekViewEvent> events = [];

  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Demo dynamic day view'),
        actions: [
          IconButton(
            onPressed: () {
              setState(() {
                DateTime start = DateTime(now.year, now.month, now.day, Random().nextInt(24), Random().nextInt(60));
                events.add(FlutterWeekViewEvent(
                  title: 'Event ' + (events.length + 1).toString(),
                  start: start,
                  end: start.add(const Duration(hours: 1)),
                  description: 'A description.',
                ));
              });
            },
            icon: Icon(
              Icons.add,
              color: Colors.white,
            ),
          ),
        ],
      ),
      body: DayView(
        date: now,
        events: events,
      ),
    );
  }
}

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+7

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]
81
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]
91
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.7
  • Flutter: 1.12.13+hotfix.9

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