Added DatePickerController, updated Readme.

Author: iamvivekkaushik

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.2.0] - 31/03/2020
+
+* This version is breaking backward compatibility
+* Added option to show past dates
+* Added option to change the selected date text color separately
+* Added a controller to the control the DatePicker widget
+* Added option to change the width of the Date Widget Item
+
 ## [1.1.3] - 30/09/2019
 
 * Fixed issue with Locale not being initialized

README.md

@@ -18,17 +18,24 @@ import 'package:date_picker_timeline/date_picker_timeline.dart';
 
 ## Usage
 
-Use the `DatePickerTimeline` Widget
+This version is breaking backwards compatibility
+
+Use the `DatePicker` Widget
 
 ```dart
 Column(
     mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
-      DatePickerTimeline(
+      DatePicker(
         DateTime.now(),
+        initialSelectedDate: DateTime.now(),
+        selectionColor: Colors.black,
+        selectedTextColor: Colors.white,
         onDateChange: (date) {
           // New date selected
-          print(date.day.toString());
+          setState(() {
+            _selectedValue = date;
+          });
         },
       ),
     ],
@@ -38,18 +45,21 @@ Column(
 ##### Constructor:
 
 ```dart
-DatePickerTimeline(
-  this.currentDate, {
-  Key key,
-  this.width,
-  this.height = 80,
-  this.monthTextStyle = defaultMonthTextStyle,
-  this.dayTextStyle = defaultDayTextStyle,
-  this.dateTextStyle = defaultDateTextStyle,
-  this.selectionColor = AppColors.defaultSelectionColor,
-  this.daysCount = 50000,
-  this.onDateChange,
-  this.locale,
+DatePicker(
+    this.startDate, {
+    Key key,
+    this.width = 60,
+    this.height = 80,
+    this.controller,
+    this.monthTextStyle = defaultMonthTextStyle,
+    this.dayTextStyle = defaultDayTextStyle,
+    this.dateTextStyle = defaultDateTextStyle,
+    this.selectedTextColor = Colors.white,
+    this.selectionColor = AppColors.defaultSelectionColor,
+    this.initialSelectedDate,
+    this.daysCount = 500,
+    this.onDateChange,
+    this.locale = "en_US",
 }) : super(key: key);
 ```
 

example/android/gradle.properties

@@ -1,2 +1,3 @@
 org.gradle.jvmargs=-Xmx1536M
 
+android.enableR8=true

example/lib/main.dart

@@ -25,11 +25,25 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
+  DatePickerController _controller = DatePickerController();
+
   DateTime _selectedValue = DateTime.now();
 
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      floatingActionButton: FloatingActionButton(
+        child: Icon(Icons.replay),
+        onPressed: () {
+          _controller.animateToSelection();
+        },
+      ),
         appBar: AppBar(
           title: Text(widget.title),
         ),
@@ -49,10 +63,11 @@ class _MyHomePageState extends State<MyHomePage> {
               ),
               Container(
                 child: DatePicker(
-                  DateTime.now(),
+                  DateTime.now().add(Duration(days: -3)),
                   width: 60,
                   height: 80,
-                  startDate: DateTime.now().add(Duration(days: -30)),
+                  controller: _controller,
+                  initialSelectedDate: DateTime.now(),
                   selectionColor: Colors.black,
                   selectedTextColor: Colors.white,
                   onDateChange: (date) {

example/pubspec.lock

@@ -70,7 +70,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "1.1.3"
+    version: "1.2.0"
   flutter:
     dependency: "direct main"
     description: flutter

fonts/RobotoBold.ttf

@@ -6,12 +6,19 @@ import 'package:flutter/material.dart';
 import 'package:intl/date_symbol_data_local.dart';
 
 class DatePicker extends StatefulWidget {
+  /// Start Date in case user wants to show past dates
+  /// If not provided calendar will start from the initialSelectedDate
+  final DateTime startDate;
+
   /// Width of the selector
   final double width;
 
   /// Height of the selector
   final double height;
 
+  /// DatePicker Controller
+  final DatePickerController controller;
+
   /// Text color for the selected Date
   final Color selectedTextColor;
 
@@ -33,28 +40,26 @@ class DatePicker extends StatefulWidget {
   /// Callback function for when a different date is selected
   final DateChangeListener onDateChange;
 
-  /// Start Date in case user wants to show past dates
-  /// If not provided calendar will start from the initialSelectedDate
-  final DateTime startDate;
-
-  /// Max limit up to which the dates are shown
+  /// Max limit up to which the dates are shown.
+  /// Days are counted from the startDate
   final int daysCount;
 
   /// Locale for the calendar default: en_us
   final String locale;
 
   DatePicker(
-    this.initialSelectedDate, {
+    this.startDate, {
     Key key,
-    this.width,
+    this.width = 60,
     this.height = 80,
+    this.controller,
     this.monthTextStyle = defaultMonthTextStyle,
     this.dayTextStyle = defaultDayTextStyle,
     this.dateTextStyle = defaultDateTextStyle,
     this.selectedTextColor = Colors.white,
     this.selectionColor = AppColors.defaultSelectionColor,
-    this.startDate,
-    this.daysCount = 50000,
+    this.initialSelectedDate,
+    this.daysCount = 500,
     this.onDateChange,
     this.locale = "en_US",
   }) : super(key: key);
@@ -66,6 +71,8 @@ class DatePicker extends StatefulWidget {
 class _DatePickerState extends State<DatePicker> {
   DateTime _currentDate;
 
+  ScrollController _controller = ScrollController();
+
   TextStyle selectedDateStyle;
   TextStyle selectedMonthStyle;
   TextStyle selectedDayStyle;
@@ -74,9 +81,13 @@ class _DatePickerState extends State<DatePicker> {
   void initState() {
     // Init the calendar locale
     initializeDateFormatting(widget.locale, null);
-    
     // Set initial Values
     _currentDate = widget.initialSelectedDate;
+
+    if (widget.controller != null) {
+      widget.controller.setDatePickerState(this);
+    }
+
     this.selectedDateStyle = createTextStyle(widget.dateTextStyle);
     this.selectedMonthStyle = createTextStyle(widget.monthTextStyle);
     this.selectedDayStyle = createTextStyle(widget.dayTextStyle);
@@ -107,26 +118,24 @@ class _DatePickerState extends State<DatePicker> {
       child: ListView.builder(
         itemCount: widget.daysCount,
         scrollDirection: Axis.horizontal,
+        controller: _controller,
         itemBuilder: (context, index) {
           // get the date object based on the index position
           // if widget.startDate is null then use the initialDateValue
           DateTime date;
-          if (widget.startDate != null) {
-            DateTime _date = widget.startDate.add(Duration(days: index));
-            date = new DateTime(_date.year, _date.month, _date.day);
-          } else {
-            DateTime _date = widget.initialSelectedDate.add(Duration(days: index));
-            date = new DateTime(_date.year, _date.month, _date.day);
-          }
+          DateTime _date = widget.startDate.add(Duration(days: index));
+          date = new DateTime(_date.year, _date.month, _date.day);
 
           // Check if this date is the one that is currently selected
-          bool isSelected = compareDate(date, _currentDate);
+          bool isSelected = _compareDate(date, _currentDate);
 
           // Return the Date Widget
           return DateWidget(
             date: date,
-            monthTextStyle: isSelected ? selectedMonthStyle : widget.monthTextStyle,
-            dateTextStyle: isSelected ? selectedDateStyle : widget.dateTextStyle,
+            monthTextStyle:
+                isSelected ? selectedMonthStyle : widget.monthTextStyle,
+            dateTextStyle:
+                isSelected ? selectedDateStyle : widget.dateTextStyle,
             dayTextStyle: isSelected ? selectedDayStyle : widget.dayTextStyle,
             width: widget.width,
             locale: widget.locale,
@@ -147,9 +156,59 @@ class _DatePickerState extends State<DatePicker> {
     );
   }
 
-  bool compareDate(DateTime date1, DateTime date2) {
+  /// Helper function to compare two dates
+  /// Returns True if both dates are the same
+  bool _compareDate(DateTime date1, DateTime date2) {
     return date1.day == date2.day &&
         date1.month == date2.month &&
         date1.year == date2.year;
   }
 }
+
+class DatePickerController {
+  _DatePickerState _datePickerState;
+
+  void setDatePickerState(_DatePickerState state) {
+    _datePickerState = state;
+  }
+
+  void jumpToSelection() {
+    assert(_datePickerState != null,
+        'DatePickerController is not attached to any DatePicker View.');
+
+    // jump to the current Date
+    _datePickerState._controller
+        .jumpTo(_calculateDateOffset(_datePickerState._currentDate));
+  }
+
+  /// This function will animate the Timeline to the currently selected Date
+  void animateToSelection(
+      {duration = const Duration(milliseconds: 500), curve = Curves.linear}) {
+    assert(_datePickerState != null,
+        'DatePickerController is not attached to any DatePicker View.');
+
+    // animate to the current date
+    _datePickerState._controller.animateTo(
+        _calculateDateOffset(_datePickerState._currentDate),
+        duration: duration,
+        curve: curve);
+  }
+
+  /// This function will animate to any date that is passed as a parameter
+  /// In case a date is out of range nothing will happen
+  void animateToDate(DateTime date,
+      {duration = const Duration(milliseconds: 500), curve = Curves.linear}) {
+    assert(_datePickerState != null,
+        'DatePickerController is not attached to any DatePicker View.');
+
+    _datePickerState._controller.animateTo(_calculateDateOffset(date),
+        duration: duration, curve: curve);
+  }
+
+  /// Calculate the number of pixels that needs to be scrolled to go to the
+  /// date provided in the argument
+  double _calculateDateOffset(DateTime date) {
+    int offset = date.difference(_datePickerState.widget.startDate).inDays + 1;
+    return (offset * _datePickerState.widget.width) + (offset * 6);
+  }
+}

fonts/RobotoRegular.ttf

@@ -5,20 +5,17 @@ import 'package:date_picker_timeline/extra/dimen.dart';
 const TextStyle defaultMonthTextStyle = TextStyle(
   color: AppColors.defaultMonthColor,
   fontSize: Dimen.monthTextSize,
-  fontFamily: 'Roboto',
   fontWeight: FontWeight.w500,
 );
 
 const TextStyle defaultDateTextStyle = TextStyle(
   color: AppColors.defaultDateColor,
   fontSize: Dimen.dateTextSize,
-  fontFamily: 'Roboto',
   fontWeight: FontWeight.w500,
 );
 
 const TextStyle defaultDayTextStyle = TextStyle(
   color: AppColors.defaultDayColor,
   fontSize: Dimen.dayTextSize,
-  fontFamily: 'Roboto',
   fontWeight: FontWeight.w500,
 );