Here is the README for the Custom Scroll Date Range Picker GitHub repository with the necessary code:


Custom Scroll Date Range Picker

Custom Scroll Date Range Picker is a Flutter package that allows users to easily select a date range using a scrollable and interactive interface. This package simplifies date selection by offering a smooth, intuitive user experience with day, month, and year precision.

Custom Scroll Date Range Picker


Features

  • Scrollable Interface: Allows users to scroll through dates for quick and precise selection.
  • Date Range Selection: Users can choose both the start and end dates in an easy-to-use interface.
  • Customizable: Offers flexibility in design and layout to suit various project needs.
  • Day, Month, and Year Navigation: Provides smooth scrolling between days, months, and years, making it easy to pick date ranges for any time period.

Scrollable Date Picker User Interface Example


Video Demo

Screen_recording_20241006_101208-ezgif.com-video-to-gif-converter.webm



Installation

To use this package, add custom_scroll_date_range_picker to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  custom_scroll_date_range_picker: ^1.0.0

Then, run flutter pub get to install the package.


Usage

Example Code

To use the Custom Scroll Date Range Picker, simply include it in your Flutter app like this:

import 'package:custom_scroll_date_range_picker/custom_scroll_date_range_picker.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late DateTime initialStartDate = DateTime(DateTime.now().year - 1);
  late DateTime initialEndDate = DateTime(DateTime.now().year);
  late String fromDate = "";
  late String toDate = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("From Date: $fromDate End Date: $toDate"),
            ElevatedButton(
              onPressed: () async {
                await showDialog(
                  context: context,
                  builder: (context) {
                    return CustomSDRP(
                      initialStartDate: initialStartDate,
                      initialEndDate: initialEndDate,
                      initialEndYear: 2050,
                      initialStartYear: 2010,
                      primaryColor: Colors.blue,
                    );
                  },
                ).then((value) {
                  if (value != null) {
                    var arr = value.split("-");
                    fromDate = arr[0];
                    toDate = arr[1];
                    initialStartDate = DateFormat("dd/MM/yyyy").parse(fromDate);
                    initialEndDate = DateFormat("dd/MM/yyyy").parse(toDate);
                    setState(() {});
                  }
                });
              },
              child: const Text("Pick Date Range"),
            ),
          ],
        ),
      ),
    );
  }
}

Key Parameters:

  • initialStartDate: Starting date for the date range.
  • initialEndDate: Ending date for the date range.
  • initialStartYear: Minimum year available for selection.
  • initialEndYear: Maximum year available for selection.
  • primaryColor: The main color used for the picker UI.

License

This package is open-source and available under the MIT License.


For more information, visit the Custom Scroll Date Range Picker on Pub.dev.