flutter_rounded_date_picker 1.0.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

Flutter Rounded Date Picker #

The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.

Screenshot Screenshot Screenshot Screenshot

Installing #

Add dependencies in pubspec.yaml file. Add 2 things in it including flutter_localizations

dependencies:
  flutter_localizations:
    sdk: flutter
  flutter_rounded_date_picker: 1.0.4

Importing #

import packages into your dart.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_rounded_date_picker/rounded_picker.dart';

Initialize localizations #

Add localization delegates in MaterialApp Widget and add languages that your app supports.

MaterialApp(
    localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [
          const Locale('en', 'US'), // English
          const Locale('th', 'TH'), // Thai
    ],
    ...
)

Show Date Picker #

Show date picker which you can specify a date that allows users to choose.

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(DateTime.now().year - 1),
  lastDate: DateTime(DateTime.now().year + 1),
  borderRadius: 16,
),

Screenshot Screenshot

Show Year Picker #

Show year picker which you can specify a year start and end that allows users to choose.

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  initialDatePickerMode: DatePickerMode.year,
  theme: ThemeData(primarySwatch: Colors.green),
);

Screenshot

Theme #

You can assign themes to the date picker by using ThemeData class and PrimarySwatch.

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData(primarySwatch: Colors.pink),
);

Screenshot

Dark theme

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData.dark(),
);

Screenshot

Custom Theme with ThemeData

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  background: Colors.white,
  theme: ThemeData(
    primaryColor: Colors.red[400],
    accentColor: Colors.green[800],
    dialogBackgroundColor: Colors.purple[50],
    textTheme: TextTheme(
      body1: TextStyle(color: Colors.red),
      caption: TextStyle(color: Colors.blue),
    ),
    disabledColor: Colors.orange,
    accentTextTheme: TextTheme(
      body2 : TextStyle(color: Colors.green[200]),
    ),
  ),
);

Screenshot

Customize Date Picker #

You can use styleDatePicker field for date picker style such as font size, weight, text color each part in the date picker.

Example custom font size and padding for displaying on a Tablet. (Pixel C, iPad 9.7")

DateTime newDateTime = await showRoundedDatePicker(
                        context: context,
                        theme: ThemeData(primarySwatch: Colors.deepPurple),
                        styleDatePicker: MaterialRoundedDatePickerStyle(
                          textStyleDayButton: TextStyle(fontSize: 36, color: Colors.white),
                          textStyleYearButton: TextStyle(
                            fontSize: 52,
                            color: Colors.white,
                          ),
                          textStyleDayHeader: TextStyle(
                            fontSize: 24,
                            color: Colors.white,
                          ),
                          textStyleCurrentDayOnCalendar:
                              TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
                          textStyleDayOnCalendar: TextStyle(fontSize: 28, color: Colors.white),
                          textStyleDayOnCalendarSelected:
                              TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
                          textStyleDayOnCalendarDisabled: TextStyle(fontSize: 28, color: Colors.white.withOpacity(0.1)),
                          textStyleMonthYearHeader:
                              TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
                          paddingDatePicker: EdgeInsets.all(0),
                          paddingMonthHeader: EdgeInsets.all(32),
                          paddingActionBar: EdgeInsets.all(16),
                          paddingDateYearHeader: EdgeInsets.all(32),
                          sizeArrow: 50,
                          colorArrowNext: Colors.white,
                          colorArrowPrevious: Colors.white,
                          marginLeftArrowPrevious: 16,
                          marginTopArrowPrevious: 16,
                          marginTopArrowNext: 16,
                          marginRightArrowNext: 32,
                          textStyleButtonAction: TextStyle(fontSize: 28, color: Colors.white),
                          textStyleButtonPositive:
                              TextStyle(fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
                          textStyleButtonNegative: TextStyle(fontSize: 28, color: Colors.white.withOpacity(0.5)),
                          decorationDateSelected: BoxDecoration(color: Colors.orange[600], shape: BoxShape.circle),
                          backgroundPicker: Colors.deepPurple[400],
                          backgroundActionBar: Colors.deepPurple[300],
                          backgroundHeaderMonth: Colors.deepPurple[300],
                        ),
                        styleYearPicker: MaterialRoundedYearPickerStyle(
                          textStyleYear: TextStyle(fontSize: 40, color: Colors.white),
                          textStyleYearSelected:
                              TextStyle(fontSize: 56, color: Colors.white, fontWeight: FontWeight.bold),
                          heightYearRow: 100,
                          backgroundPicker: Colors.deepPurple[400],
                        ));

Screenshot

Screenshot

Screenshot

Custom action button and text on button. #

Added the action button and the button's custom text.

DateTime newDateTime = await showRoundedDatePicker(
                        ...
                        textActionButton: "ACTION",
                        onTapActionButton: (){
                           //
                        },
                        textPositiveButton: "OK",
                        textNegativeButton: "CANCEL");

Screenshot

Custom weekday header text. #

Customize the header of the weekday.

DateTime newDateTime = await showRoundedDatePicker(
                        ...
                        customWeekDays: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]);

Screenshot

Custom disabled date. #

Add closed date cannot be selected.

DateTime newDateTime = await showRoundedDatePicker(
                        ...
                        listDateDisabled: [
                                                  DateTime.now().subtract(Duration(days: 2)),
                                                  DateTime.now().subtract(Duration(days: 4)),
                                                  DateTime.now().subtract(Duration(days: 6)),
                                                  DateTime.now().subtract(Duration(days: 8)),
                                                  DateTime.now().subtract(Duration(days: 10)),
                                                  DateTime.now().add(Duration(days: 2)),
                                                  DateTime.now().add(Duration(days: 4)),
                                                  DateTime.now().add(Duration(days: 6)),
                                                  DateTime.now().add(Duration(days: 8)),
                                                  DateTime.now().add(Duration(days: 10)),
                                                ]);

Screenshot

Custom callback on tap day. #

Add callback when tap on day.

DateTime newDateTime = await showRoundedDatePicker(
                        ...
                        onTapDay: (DateTime dateTime, bool available) {
                          if (!available) {
                            showDialog(
                                context: context,
                                builder: (c) => CupertinoAlertDialog(title: Text("This date cannot be selected."),actions: <Widget>[
                                  CupertinoDialogAction(child: Text("OK"),onPressed: (){
                                    Navigator.pop(context);
                                  },)
                                ],));
                          }
                          return available;
                        });

Screenshot

Custom builder day on date picker. #

Customize the display format of the day widget.

DateTime newDateTime = await showRoundedDatePicker(
                        ...
                        builderDay:
                            (DateTime dateTime, bool isCurrentDay, bool isSelected, TextStyle defaultTextStyle) {
                          if (isSelected) {
                            return Container(
                              decoration: BoxDecoration(color: Colors.orange[600], shape: BoxShape.circle),
                              child: Center(
                                child: Text(
                                  dateTime.day.toString(),
                                  style: defaultTextStyle,
                                ),
                              ),
                            );
                          }

                          if (dateTime.day == 10) {
                            return Container(
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.pink[300], width: 4), shape: BoxShape.circle),
                              child: Center(
                                child: Text(
                                  dateTime.day.toString(),
                                  style: defaultTextStyle,
                                ),
                              ),
                            );
                          }
                          if (dateTime.day == 12) {
                            return Container(
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.pink[300], width: 4), shape: BoxShape.circle),
                              child: Center(
                                child: Text(
                                  dateTime.day.toString(),
                                  style: defaultTextStyle,
                                ),
                              ),
                            );
                          }

                          return Container(
                            child: Center(
                              child: Text(
                                dateTime.day.toString(),
                                style: defaultTextStyle,
                              ),
                            ),
                          );
                        });

Screenshot

Image Background Header #

Use images as the header of the date picker and you can also add more details.

  • You need to specify the path of images in your asset (pubspec.yaml).
DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData(primarySwatch: Colors.blue),
  imageHeader: AssetImage("assets/images/calendar_header.jpg"),
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
);

Screenshot

Customize Font in Date Picker #

You can adjust the Font-family in the date picker.

  • You need to specify the path of font in your fonts (pubspec.yaml).
DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  fontFamily: "Mali"
);

Screenshot

Date Picker Locale #

You can set the date picker locale. By specifying the language code and country code. As of April 2019, this package supports about 52 languages.

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  locale: Locale("zh","CN"),
  theme: ThemeData(primarySwatch: Colors.pink),
);

Screenshot

Thai and Buddhist Year #

If you are using Thai language And use the Buddhist era (543 BCE). Plugins that support these capabilities.

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  locale: Locale("th", "TH"),
  era: EraMode.BUDDHIST_YEAR,
);

Screenshot

Show Time Picker #

Show time picker, all feature of date picker is available (except description)

final timePicked = await showRoundedTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

Screenshot

Cupertino Date Picker #

Show date and duration picker iOS style.

Installing #

Add Flutter Cupertino Localizations in dependencies pub.yaml.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: 1.0.1

Initialize localizations #

Add CupertinoLocalizations delegate to localizations delegate on your App. The cupertino date picker will use current app locale in picker.

MaterialApp(
  debugShowCheckedModeBanner: false,
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    DefaultCupertinoLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,  // Add global cupertino localiztions.
  ],
  locale: Locale('en', 'US'),  // Current locale
  supportedLocales: [
    const Locale('en', 'US'), // English
    const Locale('th', 'TH'), // Thai
  ],
)

Show Cupertino Date Picker #

Call the method for displaying date picker. The callback date time instance will be return with onDateTimeChange.

CupertinoRoundedDatePicker.show(
  context,
  fontFamily: "Mali",
  textColor: Colors.white,
  background: Colors.red[300],
  borderRadius: 16,
  initialDatePickerMode: CupertinoDatePickerMode.date,
  onDateTimeChanged: (newDateTime) {
    //
  },
);

Screenshot

More Cupertino Date Picker Mode

CupertinoDatePickerMode.date
CupertinoDatePickerMode.dateAndTime
CupertinoDatePickerMode.time

Screenshot Screenshot

using Thai and Buddhist Year

/// Current locale is TH.
CupertinoRoundedDatePicker.show(
  context,
  fontFamily: "Mali",
  textColor: Colors.white,
  era: EraMode.BUDDHIST_YEAR,
  background: Colors.red[300],
  borderRadius: 16,
  initialDatePickerMode: CupertinoDatePickerMode.date,
  onDateTimeChanged: (newDateTime) {
    //
  },
);

Screenshot

Cupertino Duration Picker #

in iOS , Flutter cupertino support duration and timer picker.

CupertinoRoundedDurationPicker.show(
  context,
  initialTimerDuration: Duration(minute:10),
  initialDurationPickerMode: CupertinoTimerPickerMode.hms,
  fontFamily: "Mali",
  onDurationChanged: (newDuration) {
    //
  },
);

Screenshot

More Cupertino Duration Picker Mode

CupertinoTimerPickerMode.hms
CupertinoTimerPickerMode.hm
CupertinoTimerPickerMode.ms

Screenshot Screenshot

Changelog #

1.0.4 #

  • fix error when select date that before first date / last date.

1.0.3 #

  • Fix bug era.

1.0.2 #

  • Fix bug era.

1.0.1 #

  • Fix bug era.

1.0.0 #

  • Add custom style and builder for date picker on tablet.

0.3.0 #

  • Add possibility to have a custom button on left.
  • Add Android style time picker.
  • Some code improvements.

0.2.0 #

  • Support cupertino date time picker.
  • Support cupertino duration picker.

0.1.0 #

  • Support border radius date picker.
  • Support thai buddhist year.

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_rounded_date_picker_example/home.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: Locale('en', 'US'),
      supportedLocales: [
        const Locale('en', 'US'), // English
        const Locale('th', 'TH'), // Thai
      ],
      home: Home(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_rounded_date_picker: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_rounded_date_picker/rounded_picker.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
93
Health:
Code health derived from static analysis. [more]
97
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/src/flutter_rounded_date_picker_widget.dart. (-2.48 points)

Analysis of lib/src/flutter_rounded_date_picker_widget.dart reported 5 hints:

line 6 col 8: Unused import: 'dart:math'.

line 10 col 8: Unused import: 'package:flutter/services.dart'.

line 12 col 8: Unused import: 'package:flutter/gestures.dart'.

line 13 col 8: Unused import: 'package:flutter_rounded_date_picker/src/flutter_rounded_button_action.dart'.

line 18 col 8: Unused import: 'package:flutter_rounded_date_picker/src/thai_date_utils.dart'.

Fix lib/src/widgets/flutter_rounded_day_picker.dart. (-0.50 points)

Analysis of lib/src/widgets/flutter_rounded_day_picker.dart reported 1 hint:

line 30 col 14: The declaration '_kMaxDayPickerHeight' isn't referenced.

Fix lib/src/widgets/flutter_rounded_year_picker.dart. (-0.50 points)

Analysis of lib/src/widgets/flutter_rounded_year_picker.dart reported 1 hint:

line 4 col 8: Unused import: 'package:flutter_rounded_date_picker/src/material_rounded_date_picker_style.dart'.

Fix additional 8 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/rounded_picker.dart (Run flutter format to format lib/rounded_picker.dart.)
  • lib/src/dialogs/flutter_rounded_date_picker_dialog.dart (Run flutter format to format lib/src/dialogs/flutter_rounded_date_picker_dialog.dart.)
  • lib/src/flutter_cupertino_rounded_date_picker_widget.dart (Run flutter format to format lib/src/flutter_cupertino_rounded_date_picker_widget.dart.)
  • lib/src/flutter_rounded_button_action.dart (Run flutter format to format lib/src/flutter_rounded_button_action.dart.)
  • lib/src/flutter_rounded_time_picker_widget.dart (Run flutter format to format lib/src/flutter_rounded_time_picker_widget.dart.)
  • lib/src/material_rounded_year_picker_style.dart (Run flutter format to format lib/src/material_rounded_year_picker_style.dart.)
  • lib/src/widgets/flutter_rounded_date_picker_header.dart (Run flutter format to format lib/src/widgets/flutter_rounded_date_picker_header.dart.)
  • lib/src/widgets/flutter_rounded_month_picker.dart (Run flutter format to format lib/src/widgets/flutter_rounded_month_picker.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8