A Cool Datepicker Built With Flutter

Related tags

Data cool_datepicker
Overview

Cool datepicker

Features

  • It's the best datepicker ui ever. (at least for me ๐Ÿ˜… )
  • It's possible to set all colors of datepicker
  • Support selected date list at the bottom. User can move selected date to selected year and month.
  • "COOL"

Samples

Installing

command:

 $ flutter pub add cool_datepicker

pubspec.yaml:

dependencies:
  cool_datepicker: ^(latest)

Usage

import 'package:cool_datepicker/cool_datepicker.dart';


    CoolDatepicker(onSelected: (_) {})

Important options

option Type Default Description
onSelected Function required when user selects dates and then click the ok button, it's triggered. You must put one parameter in the Function. (ex. onChange: (a) {}).Then, you will get return List / Map
defaultValue List / Map null Default selected dates. It will automatically detects single/range depends on which type you use
disabledList List null disabled dates list. You must pass List
disabledRangeList List > null disabled dates range map. You must use 'start' and 'end' key on the Map
isRange bool false datepicker for single/range
    CoolDatepicker(
        defaultValue: [DateTime(2020, 8, 24)], // single select
        onSelected: (_) {},
        disabledList: [DateTime(2021, 10, 22), DateTime(2021, 10, 12)],
        disabledRangeList: [
            {
            'start': DateTime(2021, 11, 1),
            'end': DateTime(2021, 11, 13)
            },
        ],
    )
    CoolDatepicker(
        defaultValue: { // range select
        'start': DateTime(2020, 9, 25),
        'end': DateTime(2021, 11, 24)
        },
        onSelected: (_) {},
    )

Result options

option Type Default Description
iconSize double 20 Datepicker icon size
resultWidth double 220
resultHeight double 50
resultBD BoxDecoration below code BoxDecoration of the result
resultTS TextStyle below code TextStyle of the result
resultPadding EdgeInsets below code Padding of the result
isResultIconLabelReverse bool false Reverse order of the result by row
labelIconGap double 10 Gap between the label and icon
isResultLabel bool true Show/hide the label of the result
placeholder String null
placeholderTS TextStyle below code
iconSize double 20 the size of the calendar icon in resultBox
resultBD = BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
            ),
          ],
        );
resultTS = TextStyle(
            fontSize: 20,
            color: Colors.black,
          );
resultPadding = const EdgeInsets.only(left: 10, right: 10);
placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

Datepicker options

option Type Default Description
calendarSize double 400 Datepicker size
minYear double DateTime.now().year - 100 Datepicker minimum year
maxYear double DateTime.now().year + 100 Datepicker maximum year
format string 'yyyy-mm-dd' Format to show as result and bottom selected dates
limitCount int 1 Set how many dates can be picked
weekLabelList List below code Set week words on the datepicker
monthLabelList List below code Set month dropdown label on the datepicker datepicker
isYearMonthDropdownReverse bool false Reverse order of dropdowns on the datepicker
headerColor Color Color(0XFF6771e4) Reverse order of dropdowns on the datepicker
arrowIconAreaColor Color Color(0XFF4752e0) Reverse order of dropdowns on the datepicker
selectedCircleColor Color Color(0XFF6771e4) Reverse order of dropdowns on the datepicker
selectedBetweenAreaColor Color Color(0XFFe2e4fa) Reverse order of dropdowns on the datepicker
cancelFontColor Color Color(0XFF4a54c5) Reverse order of dropdowns on the datepicker
okButtonColor LinearGradient below code Reverse order of dropdowns on the datepicker
bottomSelectedBorderColor Color Color(0XFF6771e4) Reverse order of dropdowns on the datepicker
isDark bool false dark mode
cancelBtnLabel String 'CANCEL' Cancel button label
okBtnLabel String 'OK' Ok button label
weekLabelList = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
monthLabelList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
okButtonColor = const LinearGradient(colors: [
    Color(0XFF4a54c5),
    Color(0XFF6771e4),
]);
You might also like...

Your best flutter coding friend. All in one; state management, navigation management(with dynamic routing), local storage, localization, dependency injection, cool extensions with best usages and with the support of best utilities!

okito Your best flutter coding friend. All in one; state management, navigation management(with dynamic routing), local storage, dependency injection,

Jul 10, 2022

A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects.

A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects.

Advanced Icon A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool an

Dec 24, 2021

Cool 3D Drawer Animated With flutter part 2 ๐Ÿ”ฅ ๐Ÿ”ฅ

 Cool 3D Drawer Animated With flutter part 2 ๐Ÿ”ฅ ๐Ÿ”ฅ

Cool 3D Drawer Animated With flutter part 2 ๐Ÿ”ฅ ๐Ÿ”ฅ

Nov 22, 2022

Flutter Cool Random User Generate ๐Ÿ”ฅ๐Ÿ”ฅ

Flutter Cool Random User Generate ๐Ÿ”ฅ๐Ÿ”ฅ

Flutter Cool Random User Generate ๐Ÿ”ฅ๐Ÿ”ฅ

Sep 10, 2022

๐Ÿ”ฅ Deezer Music App With Flutter & Animation Cool ๐Ÿš€

๐Ÿ”ฅ Deezer Music App With Flutter & Animation Cool  ๐Ÿš€

Flutter Deezer Clone Challenge ui Animated ๐Ÿ”ฅ ๐Ÿ”ฅ Gif Image : Home screen screen screen screen pls Add panel.dart file in root file (SlidingUpPanel) No

Sep 30, 2022

โ˜€๏ธ A Flutter package for some material design app intro screens with some cool animations.

โ˜€๏ธ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Dec 30, 2022

This is flutter package for creating a gender selection widget which allows users to choose a gender with cool animations

This is flutter package for creating a gender selection widget which allows users to choose a gender with cool animations

gender_selection A Flutter package for gender selection. It is an aweome gender selection widget with cool gradients and animation effects Demo Instal

Apr 8, 2022

Cool linter This is a custom linter package for dart/flutter code.

 Cool linter  This is a custom linter package for dart/flutter code.

Cool linter This is a custom linter package for dart/flutter code. It can set linter for exclude some of words. This words you can set in analysis_opt

Mar 4, 2022

A complete music player in flutter with cool UI and design.

A complete music player in flutter with cool UI and design.

Flutter Music Player A complete and open source music player designed in flutter. It is first complete music player designed in flutter. This app expl

Dec 30, 2022

A flutter package which contains a collection of some cool and beautiful effects; support android and ios

A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

Jan 3, 2023

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

 This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Nov 25, 2020

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Jan 1, 2023

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Jun 7, 2022

Doing cool stuff with Git VCS in dart programming language.

Git Assistant Assists you to use git and .git in easy and simple way with robust API Features Generates git commands in simple form Supports commands,

Mar 4, 2022

Social media for super cool developers ๐Ÿง‘๐Ÿพโ€๐Ÿ’ป๐Ÿ‘‹๐Ÿฝ

Social media for super cool developers ๐Ÿง‘๐Ÿพโ€๐Ÿ’ป๐Ÿ‘‹๐Ÿฝ

Develove ๐Ÿง‘๐Ÿพโ€๐Ÿ’ป Demo link: Develove App release: Develove.apk Develove is a super cool social media forum that aims to bring in the best features of

Dec 9, 2022

A growing collection of cool, elegant, efficient and performance-optimized animation widgets.

im_animations About A growing collection of cool, elegant, efficient and performance-optimized animation widgets. Feedback For any feedback please fil

Nov 13, 2022

A simple, powerful widget to build cool transitions

A simple, powerful widget to build cool transitions

motion_widget A simple, powerful widget to build cool transitions Features Fine-grained control with Interval Lightweight & fully customizable No boil

Jul 29, 2021

A simple project with cool animations and fluid UI

A simple project with cool animations and fluid UI

Pokedex This task was quite an interesting one. As with all my projects, I started with understanding the scope and state of this app. I decided to us

Dec 31, 2022

An android application built using Flutter that computes the Body Mass Index of person and suggestion to carry ,by taking Inputs (Weight, Height, and Age), Built using Flutter

An android application built using Flutter that computes the Body Mass Index of person and suggestion to carry ,by taking Inputs (Weight, Height, and Age), Built using Flutter

BMI Calculator ๐Ÿ’ช Our Goal The objective of this tutorial is to look at how we can customise Flutter Widgets to achieve our own beautiful user interfa

Nov 2, 2022
Comments
  • 1.0.4 first weekday customization

    1.0.4 first weekday customization

    Hi!,

    I was using this really cool date picker, and I had the need to change the first week day (now Sunday is shown as the first week day, and I wanted to use Monday as the first)

    To do so, I've added a new optional parameter firstWeekDay, with de default value of Sunday.

    I'm also thinking about adding a localisation support, but this is not really urgent, since you already support customisations on weekday names and date formats.

    Just let me know if I can help with anything else, and congratulations for this great plugin, I really appreciate it.

    opened by rfm4j 3
  • cool_date_picker's file size

    cool_date_picker's file size

    Hi.

    There are 4 gif files in the screenshot's folder. When I want to extract an .apk file, the application size is too large. I think these 4 gif files are the reason why the application size is too large. Is it possible to delete that files.

    Thank you

    opened by ihsanturk2023 1
  • How to disable Animation effect for calendar?

    How to disable Animation effect for calendar?

    This package is really cool.

    I want to disable animation for calendar when clicks on calendar button and after clicks on ok button. How can i achieve this functionality?

    opened by MaheshPeri19 0
  • DefaultValue not working

    DefaultValue not working

    Hey, I really love your date picker but the default value is not working. There is no date selected even if I specified a default value. This is my code: CoolDatepicker( onSelected: widget.onSelected, maxYear: 2222, minYear: 2019, calendarSize: 350, firstWeekDay: 1, format: 'dd.mm.yyyy', defaultValue: [DateTime.now()], monthLabelList: const [ 'Januar', 'Februar', 'Mรคrz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember', ], isYearMonthDropdownReverse: true, isResultLabel: true, resultWidth: 300, resultBD: BoxDecoration( color: Theme.of(context).colorScheme.background, border: Border( bottom: BorderSide( color: Theme.of(context).colorScheme.secondary, ), ), ), resultTS: TextStyle( fontSize: 20, color: Theme.of(context).colorScheme.onSecondary, ), placeholder: s.lblDate, headerColor: Theme.of(context).colorScheme.secondary, arrowIconAreaColor: Theme.of(context).colorScheme.secondary, selectedCircleColor: Theme.of(context).colorScheme.secondary, selectedBetweenAreaColor: Theme.of(context).colorScheme.secondary, cancelFontColor: Theme.of(context).colorScheme.secondary, cancelBtnLabel: 'Abbrechen', okButtonColor: LinearGradient(colors: [ Theme.of(context).colorScheme.secondary, Theme.of(context).colorScheme.secondary, ]), bottomSelectedBorderColor: Theme.of(context).colorScheme.secondary, isDark: true, ) Did I do something wrong?

    opened by Azzen-V 1
Owner
null
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.

GraphQL Flutter ?? Bulletin See the v3 -> v4 Migration Guide if you're still on v3. Maintenance status: Low. Follow #762 for updates on the planned ar

Zino App B.V. 3.1k Jan 5, 2023
Persist data with Flutter's Sqflite Database locally on your Android or iOS device by using Raw SQL statements.

Flutter Tutorial - Database Storage Using Sqlite & Sqflite Persist data with Flutter's Sqflite Database locally on your Android or iOS device by using

Johannes Milke 170 Dec 30, 2022
Create a DataTable with Flutter to display data in columns, rows, and cells and also learn how to sort the data within the table.

Flutter Tutorial - Sortable DataTable Create a DataTable with Flutter to display data in columns, rows, and cells and also learn how to sort the data

Johannes Milke 22 Oct 9, 2022
Moor is an easy to use, reactive, typesafe persistence library for Dart & Flutter

Moor is an easy to use, reactive, typesafe persistence library for Dart & Flutter

Simon Binder 1.8k Dec 30, 2022
Expenses tracker built with Flutter and Dart making use of Provider, Intl, Syncfusion Flutter Datepicker and more

expense_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Atuoha Anthony 2 Dec 10, 2022
A Flutter package of datepicker like Holo Theme in Android

flutter_holo_date_picker A Flutter package of Datepicker inspired by the Holo Theme in Android. Getting Started This plugins displays a Datepicker ins

Kfir Matityahu 48 Nov 28, 2022
A persian ( farsi ) datepicker for flutter.

Persian DatePicker & DateTime Manipulation A persian ( farsi ) datepicker for flutter. to see an example of date conversion and manipulation, refer to

null 66 Feb 23, 2022
Collection of cool Layouts built with Flutter to Inspire Other UI developers and explore the possibilities of Flutter.

Awesome_Flutter_Layouts Would you like to Contribute your Designs? Please refer the Contribution guidelines before you dive In Need help? or Looks Som

Mahesh Jamdade 103 Nov 22, 2022
Simple but pretty cool birthday countdown app built using flutter

Simple but pretty cool birthday countdown app "For You" ?? Don't forget to star โญ the repo if you like what you I have created ?? . ?? GIF of a sample

Ruslan Hasanov 6 Aug 13, 2022
๐Ÿ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023