Flutter Week View is Highly Inspired by Android Week View

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)),
    ),
  ],
  style: const DayViewStyle.fromDate(
    date: now,
    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.
style Allows you to style your widget. A lot of different styles are available so don't hesitate to try them out !
hoursColumnStyle Same, it allows you to style the hours column on the left.
controller Controllers allow you to manually change the zoom settings.
inScrollableWidget Whether to put the widget in a scrollable widget (disable if you want to manage the scroll by yourself).
minimumTime The minimum hour and minute to display in a day.
maximumTime The maximum hour and minute to display in a day.
initialTime The initial hour and minute to put the widget on.
userZoomable Whether the user is able to (un)zoom the widget.
currentTimeIndicatorBuilder Allows you to change the default current time indicator (rule and circle).
onHoursColumnTappedDown Provides a tapped down callback for the hours column. Pretty useful if you want your users to add your own events at a specific time.
onDayBarTappedDown Provides a tapped down callback for the day bar.

Flutter day view

Here are the specific options of FlutterDayView :

date The widget date.
dayBarStyle The day bar style.

Flutter week view

Here are the specific options of FlutterWeekView :

dates The widget dates.
dayViewStyleBuilder The function that allows to build a Day View style according to the provided date.
dayBarStyleBuilder The function that allows to build a Day Bar style according to the provided date.

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 not scroll to the current date).

Contributions

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

Fork it on Github.
Submit a feature request or a bug report.
Donate to the developer.
Watch a little ad on Clipeee.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_week_view

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  flutter_week_view: ^1.2.0

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

Import it

Now in your Dart code, you can use:

import 'package:flutter_week_view/flutter_week_view.dart';

example/lib/main.dart

import 'dart:math';

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

/// 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.headline4,
                textAlign: TextAlign.center,
              ),
            ),
            ElevatedButton(
              child: const Text('Demo day view'),
              onPressed: () => Navigator.pushNamed(context, '/day-view'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              child: const Text('Demo week view'),
              onPressed: () => Navigator.pushNamed(context, '/week-view'),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              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(
      initialTime: const HourMinute(hour: 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)),
        ),
      ],
      style: DayViewStyle.fromDate(
        date: date,
        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(
      initialTime: const HourMinute(hour: 7).atDate(DateTime.now()),
      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: const Icon(
              Icons.add,
              color: Colors.white,
            ),
          ),
        ],
      ),
      body: DayView(
        date: now,
        events: events,
      ),
    );
  }
}

#flutter #dart #mobile-apps #mobile