Git Product home page Git Product logo

custom_date_range_picker's Introduction

custom_date_range_picker

custom_date_range_picker

Usage

...
  floatingActionButton: FloatingActionButton(
        onPressed: () {
          showCustomDateRangePicker(
            context,
            dismissible: true,
            minimumDate: DateTime.now().subtract(const Duration(days: 30)),
            maximumDate: DateTime.now().add(const Duration(days: 30)),
            endDate: endDate,
            startDate: startDate,
            backgroundColor: Colors.white,
            primaryColor: Colors.green,
            onApplyClick: (start, end) {
              setState(() {
                endDate = end;
                startDate = start;
              });
            },
            onCancelClick: () {
              setState(() {
                endDate = null;
                startDate = null;
              });
            },
          );
        },
        tooltip: 'choose date Range',
        child: const Icon(Icons.calendar_today_outlined, color: Colors.white),
      ),

Function: showCustomDateRangePicker

This function displays a custom date range picker dialog box.

Parameters

  • context (required): The context in which to show the dialog.
  • dismissible (required): A boolean value indicating whether the dialog can be dismissed by tapping outside of it.
  • minimumDate (required): A DateTime object representing the minimum allowable date that can be selected in the date range picker.
  • maximumDate (required): A DateTime object representing the maximum allowable date that can be selected in the date range picker.
  • startDate (optional): A nullable DateTime object representing the initial start date of the date range selection.
  • endDate (optional): A nullable DateTime object representing the initial end date of the date range selection.
  • onApplyClick (required): A function that takes two DateTime parameters representing the selected start and end dates, respectively, and is called when the user taps the "Apply" button.
  • onCancelClick (required): A function that is called when the user taps the "Cancel" button.
  • backgroundColor (required): The background color of the dialog.
  • primaryColor (required): The primary color of the dialog.
  • fontFamily (optional): The font family to use for the text in the dialog.

Usage

Inside the function, a FocusNode is requested to take focus away from any input field that might be in focus. A showDialog function is then called to show the CustomDateRangePicker dialog box. The CustomDateRangePicker widget is built with the parameters passed to showCustomDateRangePicker, and then passed as the builder parameter of the showDialog function.

When the user interacts with the CustomDateRangePicker dialog box, the onApplyClick and onCancelClick functions are called accordingly.

Many Thanks to the creator of this Repo https://github.com/mitesh77/Best-Flutter-UI-Templates

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

custom_date_range_picker's People

Contributors

el-mazouzi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

custom_date_range_picker's Issues

WidgetStateProperty Issue.

`../../.pub-cache/hosted/pub.dev/custom_date_range_picker-1.1.0/lib/custom_date_range_picker.dart:227:43: Error: The getter 'WidgetStateProperty' isn't defined for the class 'CustomDateRangePickerState'.

  • 'CustomDateRangePickerState' is from 'package:custom_date_range_picker/custom_date_range_picker.dart' ('../../.pub-cache/hosted/pub.dev/custom_date_range_picker-1.1.0/lib/custom_date_range_picker.dart').
    Try correcting the name to the name of an existing getter, or defining a getter or field named 'WidgetStateProperty'.
    side: WidgetStateProperty.all(`
Screenshot 2024-06-02 at 3 15 01 AM

My Flutter Doctor Reports in Intl version is both compatible.
Cleared Cache, Repair IDE also through dart pub repair cache

Dinamyc size on landscape

I need to adjust size of dialog or content wrapper.
I try to call this function in landscape mode and I got an error "bottom overflowed by 457 pixels".
please fix this issue. thank's

color issue

background color and primary color are useless. make sure you are using it in the widget not just asking for it.

missed connection line between 2 dates after showCustomDateRangePicker was fired

package version - 1.0.10
Flutter SDK 3.3.10
Dart SDK 2.18.6

Screenshot_1

  void onChangeDateRange(BuildContext context) {
    showCustomDateRangePicker(
      context,
      dismissible: true,
      fontFamily: 'SF-Pro-Text',
      minimumDate: DateTime(DateTime.now().year - 1),
      maximumDate: DateTime.now(),
      endDate: dateStart.value,
      startDate: dateFinal.value,
      backgroundColor: Colors.white,
      primaryColor: AppColors.accentPrimary,
      onApplyClick: (DateTime start, DateTime end) {
        dateStart.value = start;
        dateFinal.value = end;
      },
      onCancelClick: () {},
    );

Year Range

Question 1 : How to change year? currently if click navigation go to the month
Question 2 : if I choose endDate, and I cancel endDate.. only startDate. I got the endDate. Please remove that
Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.