add option for edge fading

example/lib/main.dart

@@ -56,6 +56,23 @@ class _MyHomePageState extends State<MyHomePage> {
                   });
                 },
               ),
+              Padding(
+                padding: EdgeInsets.all(50),
+              ),
+              Text("With edge fadding"),
+              Padding(
+                padding: EdgeInsets.all(10),
+              ),
+              DatePickerTimeline(
+                _selectedValue,
+                isEdgeFadding: true,
+                onDateChange: (date) {
+                  // New date selected
+                  setState(() {
+                    _selectedValue = date;
+                  });
+                },
+              ),
             ],
           ),
         ));

example/pubspec.lock

@@ -43,6 +43,13 @@ packages:
       relative: true
     source: path
     version: "1.1.3"
+  fading_edge_scrollview:
+    dependency: transitive
+    description:
+      name: fading_edge_scrollview
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   flutter:
     dependency: "direct main"
     description: flutter

lib/date_picker_timeline.dart

@@ -4,6 +4,7 @@ import 'package:date_picker_timeline/date_widget.dart';
 import 'package:date_picker_timeline/extra/color.dart';
 import 'package:date_picker_timeline/extra/style.dart';
 import 'package:date_picker_timeline/gestures/tap.dart';
+import 'package:fading_edge_scrollview/fading_edge_scrollview.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/date_symbol_data_local.dart';
 
@@ -17,6 +18,7 @@ class DatePickerTimeline extends StatefulWidget {
   DateChangeListener onDateChange;
   int daysCount;
   String locale;
+  bool isEdgeFadding;
 
   // Creates the DatePickerTimeline Widget
   DatePickerTimeline(
@@ -31,15 +33,16 @@ class DatePickerTimeline extends StatefulWidget {
     this.daysCount = 50000,
     this.onDateChange,
     this.locale = "en_US",
+    this.isEdgeFadding = false,
   }) : super(key: key);
 
   @override
   State<StatefulWidget> createState() => new _DatePickerState();
 }
 
 class _DatePickerState extends State<DatePickerTimeline> {
-
-  @override void initState() {
+  @override
+  void initState() {
     super.initState();
 
     initializeDateFormatting(widget.locale, null);
@@ -48,37 +51,43 @@ class _DatePickerState extends State<DatePickerTimeline> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      width: widget.width,
-      height: widget.height,
-      child: ListView.builder(
-        itemCount: widget.daysCount,
-        scrollDirection: Axis.horizontal,
-        itemBuilder: (context, index) {
-          // Return the Date Widget
-          DateTime _date = DateTime.now().add(Duration(days: index));
-          DateTime date = new DateTime(_date.year, _date.month, _date.day);
-          bool isSelected = compareDate(date, widget.currentDate);
+        width: widget.width,
+        height: widget.height,
+        child: widget.isEdgeFadding
+            ? (FadingEdgeScrollView.fromScrollView(child: buildList(context)))
+            : buildList(context));
+  }
+
+  Widget buildList(BuildContext context) {
+    return ListView.builder(
+      itemCount: widget.daysCount,
+      scrollDirection: Axis.horizontal,
+      controller: new ScrollController(),
+      itemBuilder: (context, index) {
+        // Return the Date Widget
+        DateTime _date = DateTime.now().add(Duration(days: index));
+        DateTime date = new DateTime(_date.year, _date.month, _date.day);
+        bool isSelected = compareDate(date, widget.currentDate);
 
-          return DateWidget(
-            date: date,
-            monthTextStyle: widget.monthTextStyle,
-            dateTextStyle: widget.dateTextStyle,
-            dayTextStyle: widget.dayTextStyle,
-            locale: widget.locale,
-            selectionColor:
-                isSelected ? widget.selectionColor : Colors.transparent,
-            onDateSelected: (selectedDate) {
-              // A date is selected
-              if (widget.onDateChange != null) {
-                widget.onDateChange(selectedDate);
-              }
-              setState(() {
-                widget.currentDate = selectedDate;
-              });
-            },
-          );
-        },
-      ),
+        return DateWidget(
+          date: date,
+          monthTextStyle: widget.monthTextStyle,
+          dateTextStyle: widget.dateTextStyle,
+          dayTextStyle: widget.dayTextStyle,
+          locale: widget.locale,
+          selectionColor:
+              isSelected ? widget.selectionColor : Colors.transparent,
+          onDateSelected: (selectedDate) {
+            // A date is selected
+            if (widget.onDateChange != null) {
+              widget.onDateChange(selectedDate);
+            }
+            setState(() {
+              widget.currentDate = selectedDate;
+            });
+          },
+        );
+      },
     );
   }
 

pubspec.lock

@@ -29,6 +29,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.14.11"
+  fading_edge_scrollview:
+    dependency: "direct main"
+    description:
+      name: fading_edge_scrollview
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   flutter:
     dependency: "direct main"
     description: flutter

pubspec.yaml

@@ -10,6 +10,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  fading_edge_scrollview: ^1.0.2
   intl: ^0.16.0
 
 dev_dependencies: