calendar_view_widget 0.0.2

  • Example
  • Installing
  • Versions
  • new48



A Flutter widget built to display a monthly calendar with a list of daily events shown below. The widget is intended to be used to fill a full scaffold body.

Status: Under Development

This package is under development and likely to change. The hope is not to break things, but new features may require updates to your code.

Usage Details


new CalendarView(
  events: eventList, // List<Map<String, String>>
  onEventTapped: onEventTappedHandler, // function(eventID)
  titleField: 'name', // String
  detailField: 'location', // String
  dateField: 'date', // String
  idField: 'id', // String
  separatorTitle: 'Events', // String
  theme: ThemeData.light(), // ThemeData

The calendar expects a list of Events, as described below, in addition to some other configuration values. This intent is to be adaptable to your app data.

The example above includes the default values for the String parameters (titleField, detailField, dateField, idField, and separatorTitle) as well as the default theme, ThemeData.light(). All of these may be overridden to suit your data structure and styling needs.

The onEventTapped handler should be a function that recieves an id value for an event. It can then be used to look up that event in your data and respond as needed in the rest of the app.


void onEventTapped(String id) {



  'name': 'Event Name',
  'location': 'Event Location',
  'date': '2018-01-23 04:56:00',
  'id': '1',

Events are simply Maps with String keys and String values (Map<String, String>).

Parameter Notes

The expectation is that there are at least 3 fields to use for the display: titleField, detailField, and dateField.

Date Field Note: Inside the package, the date field is read using DateTime.parse(), so the date field string should use one of the range of formats it can ready.

An additional field can be used to as the idField, which should reference unique identifier field that is returned when a user taps on an event in the event list. The default is 'id' but if one of the other three primary fields is unique, feel free to use that instead.


The calendar allows for a ThemeData object to be passed to it to enable theming to match the rest of your app.

Fields used in ThemeData:

textTheme: {
accentTextTheme: {


  • intl - provides the date formatting for display in the events list.

Special Thanks

This package could not have been built without the awesomeness of Dart and Flutter. Thank you to the teams of people who have built the tools and infrastructure that enables this new app development ecosystem to grow and thrive.


  • Initial Release


import 'package:flutter/material.dart';
import 'package:calendar_view_widget/calendar_view_widget.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
      home: new MyHomePage(title: 'Calendar Widget Example'),

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  _MyHomePageState createState() => new _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.

  Widget build(BuildContext context) {
    const eventList = [
        'name': 'Event Name',
        'location': 'Grand Ballroom',
        'date': '2018-09-27 13:27:00',
        'id': '1',
        'name': 'Event Name2',
        'location': 'Suite 501',
        'date': '2018-09-21 14:35:00',
        'id': '2',
        'name': 'Event Name3',
        'location': '1200 Park Avenue',
        'date': '2018-09-22 05:49:00',
        'id': '3',
        'name': 'Event Name',
        'location': 'Grand Ballroom',
        'date': '2018-08-27 13:27:00',
        'id': '4',
        'name': 'Event Name2',
        'location': 'Suite 501',
        'date': '2018-10-21 14:35:00',
        'id': '5',
        'name': 'Event Name3',
        'location': '1200 Park Avenue',
        'date': '2018-08-22 05:49:00',
        'id': '6',

    final theme = ThemeData.dark().copyWith(
      primaryColor: Colors.grey,
      accentColor: Colors.lightBlue,
      canvasColor: Colors.white,
      backgroundColor: Colors.lightBlue,
      dividerColor: Colors.blueGrey,
      textTheme: ThemeData.dark().textTheme.copyWith(
        display1: TextStyle(
          fontSize: 21.0
        subhead: TextStyle(
          fontSize: 14.0,
          color: Colors.blueGrey
        headline: TextStyle(
          fontSize: 18.0,
          color: Colors.blueGrey,
          fontWeight: FontWeight.bold,
        title: TextStyle(
          fontSize: 14.0,
          color: Colors.blueGrey,
          fontWeight: FontWeight.bold,
      accentTextTheme: ThemeData.dark().accentTextTheme.copyWith(
        body1: TextStyle(
          fontSize: 14.0,
        title: TextStyle(
          fontSize: 21.0,
          fontWeight: FontWeight.bold
        display1: TextStyle(
          fontSize: 21.0,
          fontWeight: FontWeight.bold,

    void onEventTapped(String id) {

    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the method, and use it to set our appbar title.
        title: new Text(widget.title),
      body: new Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: new Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          // Invoke "debug paint" (press "p" in the console where you ran
          // "flutter run", or select "Toggle Debug Paint" from the Flutter tool
          // window in IntelliJ) to see the wireframe for each widget.
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          children: <Widget>[
            // default String parameter values used below as example
            new CalendarView(
              events: eventList,
              onEventTapped: onEventTapped,
              titleField: 'name',
              detailField: 'location',
              dateField: 'date',
              idField: 'id',
              separatorTitle: 'Events',
              theme: theme,

Use this package as a library

1. Depend on it

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

  calendar_view_widget: ^0.0.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:

import 'package:calendar_view_widget/calendar_view_widget.dart';
Version Uploaded Documentation Archive
0.0.2 Sep 21, 2018 Go to the documentation of calendar_view_widget 0.0.2 Download calendar_view_widget 0.0.2 archive
0.0.1 Sep 12, 2018 Go to the documentation of calendar_view_widget 0.0.1 Download calendar_view_widget 0.0.1 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Sep 21, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.3
  • Flutter: 0.8.4


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Issues and suggestions

Fix lib/src/monthView.dart.

Analysis of lib/src/monthView.dart failed with 2 errors:

line 2 col 8: Target of URI doesn't exist: 'package:quiver/time.dart'.

line 76 col 28: The method 'daysInMonth' isn't defined for the class 'MonthView'.

The description is too short.

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Package is pre-v0.1 release.

While there is nothing inherently wrong with versions of 0.0.*, it usually means that the author is still experimenting with the general direction of the API.

Format lib/src/calendarView.dart.

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

Format lib/src/constants.dart.

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

Format lib/src/eventsView.dart.

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


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
intl ^0.15.7 0.15.7
Transitive dependencies
collection 1.14.11
meta 1.1.6
path 1.6.2
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies