A flutter calendar package to allow users to scroll through given dates either

scrolling_day_calendar

A flutter calendar package to allow users to scroll through given dates either by swiping left and right or pressing the arrows. The active date is displayed as a heading and the tasks for that date are displayed underneath. This package can be used on Android and IOS

How it works

• Pass in the widgets method
  You simply need to pass in a start date, an end date, the active date and widgets to display per day.
• SetState method
  You simply need to pass in a start date, an end date, the active date and a call-back function,
  the package will then allow the user to swipe between the dates using PageView,
  on each page change the call-back you have set will be called to allow you to update the page content for the given date.

Screenshots

Usage

To use the plugin:

• add the dependency to your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  scrolling_day_calendar: 2.0.1

YAML

• import the package

import 'package:scrolling_day_calendar/scrolling_day_calendar.dart';

Dart

How to use the Widget pass-in method - recommended for better experience

DateTime selectedDate = DateTime.now();
DateTime startDate = DateTime.now().subtract(Duration(days: 10));
DateTime endDate = DateTime.now().add(Duration(days: 10));
Map<String, Widget> widgets = Map();
String widgetKeyFormat = "yyyy-MM-dd";

body: ScrollingDayCalendar(
          startDate: startDate,
          endDate: endDate,
          selectedDate: selectedDate,
          dateStyle: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          displayDateFormat: "dd, MMM yyyy",
          dateBackgroundColor: Colors.grey,
          forwardIcon: Icons.arrow_forward,
          backwardIcon: Icons.arrow_back,
          pageChangeDuration: Duration(
            milliseconds: 700,
          ),
          widgets: widgets,
          widgetKeyFormat: widgetKeyFormat,
          noItemsWidget: Center(
            child: Text("No items have been added for this date"), // add buttons etc here to add new items for date
          ),
        ),

Dart

How to use the SetState method

// set the initial page value
Widget _pageItems = Text("Inital value");
DateTime selectedDate = DateTime.now();
DateTime startDate = DateTime.now().subtract(Duration(days: 10));
DateTime endDate = DateTime.now().add(Duration(days: 10));
String widgetKeyFormat = "yyyy-MM-dd";

// add to body of a Scaffold
body: ScrollingDayCalendar(
          startDate: startDate,
          endDate: endDate,
          selectedDate: selectedDate,
          onDateChange: (direction, DateTime selectedDate) {
            setState(() {
              pageItems = _widgetBuilder(selectedDate);
            });
          },
          dateStyle: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
          pageItems: pageItems,
          displayDateFormat: "dd/MM/yyyy",
          dateBackgroundColor: Colors.grey,
          forwardIcon: Icons.arrow_forward,
          backwardIcon: Icons.arrow_back,
          pageChangeDuration: Duration(
            milliseconds: 400,
          ),
          noItemsWidget: Center(
            child: Text("No items have been added for this date"), // add buttons etc here to add new items for date
          ),
        ),

Dart

GitHub

bmb-enterprises/scrolling-day-calendar

11

Flutter package to create a day date scroller — Read More

Latest commit to the master branch on 8-20-2019

Download as zip