flutter_date_pickers 0.1.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

flutter_date_pickers #

Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

A set of date pickers:

  • DayPicker for one day
  • WeekPicker for whole week
  • RangePicker for random range
  • MonthPicker for month

How to style date picker #

Every date picker constructor take a style object as a parameter (if no styles passed - defaults will be used).

For single value pickers (DayPicker, MonthPicker) it is DatePickerStyles object;

For range pickers (WeekPicker, RangePickers) it is DatePickerRangeStyles object;

Customizable styles: for all date pickers

PropertyDescription
TextStyle displayedPeriodTitletitle of the date picker
TextStyle currentDateStylestyle for current date
TextStyle disabledDateStylestyle for disabled dates (before first and after last date user can pick)
TextStyle selectedDateStylestyle for selected date
BoxDecoration selectedSingleDateDecorationdecoration for selected date in case single value is selected
TextStyle defaultDateTextStylestyle for date which is neither current nor disabled nor selected

only for range date pickers (WeekPicker, RangePicker)

PropertyDescription
BoxDecoration selectedPeriodStartDecorationdecoration for the first date of the selected range
BoxDecoration selectedPeriodLastDecorationdecoration for the first date of the selected range
BoxDecoration selectedPeriodMiddleDecorationDecoration for the date of the selected range which is not first date and not end date of this range

How to make some dates not selectable date picker #

By default only dates before firstDate and after lastDate are not selectable. But you can set custom disabled days. DayPicker, WeekPicker and RangePicker take a SelectableDayPredicate selectableDayPredicate where you can specify function which returns if some date is disabled or not.

If some date is disabled for selection it gets disabledDateStyle.

If selected range or week pretends to include such disabled date UnselectablePeriodException occurs. To handle it - pass onSelectionError callback to date picker.

How to make special decorations for some dates #

By default cells are decorated with datePickerStyles slyles (or default if no styles was passed to date picker). If you need special decoration for some days use eventDecorationBuilder. Currently only for DayPicker, WeekPicker and RangePicker.

  • If date is not selected basic styles will be merged with styles from eventDecorationBuilder.
  • If date is current date styles from eventDecorationBuilder win (if there are).
  • Otherwise basic styles (datePickerStyles) win.

What time I will get after selection? #

If one day selected: you will get start of the day (00:00:00) by default. If selected firstDate - you will get time of it.

If range/week selected: for start you will get start of the day (00:00:00) by default. If selected firstDate - you will get time of it. for end you will get end of the day (23:59:59.999) by default. If selected lastDate - you will get time of it.

If month selected: you will get start (00:00:00) of the 1 day of month by default. If selected month same as month of the firstDate - you will get firstDate.

Usage #

// Create week date picker with passed parameters
Widget buildWeekDatePicker (DateTime selectedDate, DateTime firstAllowedDate, DateTime lastAllowedDate, ValueChanged<DatePeriod> onNewSelected) {

 // add some colors to default settings
    DatePickerRangeStyles styles = DatePickerRangeStyles(
      selectedPeriodLastDecoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10.0),
              bottomRight: Radius.circular(10.0))),
      selectedPeriodStartDecoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
      ),
      selectedPeriodMiddleDecoration: BoxDecoration(
          color: Colors.yellow, shape: BoxShape.rectangle),
    );
    
  return WeekPicker(
      selectedDate: selectedDate,
      onChanged: onNewSelected,
      firstDate: firstAllowedDate,
      lastDate: lastAllowedDate,
      datePickerStyles: styles
  );
}

Example app #

Please checkout example.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[0.0.6] - 21 November 2019 #

Added support for custom day decoration. Added support for custom disabled days.

[0.1.0] - 31 May 2020 #

Fixed i18n issue for MonthPicker in case no locale was set. Fixed selection periods with unselectable dates issue in RangePicker. Minor changes and fixes.

[0.1.1] - 20 June 2020 #

Added scrollPhysics property to DatePickerLayoutSettings.

[0.1.3] - 23 June 2020 #

Added day headers style customization. Added prev/next icon customization. Added selected period text styles customization.

[0.1.4] - 2 July 2020 #

Added firstDayOfWeekIndex customization.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_date_picker/event.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'DatePickersWidgets/month_picker_page.dart';
import 'DatePickersWidgets/day_picker_page.dart';
import 'DatePickersWidgets/range_picker_page.dart';
import 'DatePickersWidgets/week_picker_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
         supportedLocales: [
           const Locale('en', 'US'), // American English
           const Locale('ru', 'RU'), // Russian
           const Locale("pt") // Portuguese
      ],
      debugShowCheckedModeBanner: false,
      title: 'Date pickers demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: MyHomePage(
        title: 'flutter_date_pickers Demo',
      ),
//      locale: Locale('en', 'US'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  DateTime startOfPeriod;
  DateTime endOfPeriod;
  DateTime firstDate;
  DateTime lastDate;

  int _selectedTab;

  final List<Widget> datePickers = <Widget>[
    DayPickerPage(events: events,),
    WeekPickerPage(events: events,),
    RangePickerPage(events: events,),
    MonthPickerPage()
  ];

  @override
  void initState() {
    super.initState();

    _selectedTab = 0;

    DateTime now = DateTime.now();

    firstDate = now.subtract(Duration(days: 10));
    lastDate = now.add(Duration(minutes: 10));

    startOfPeriod = firstDate;
    endOfPeriod = lastDate;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: TextStyle(letterSpacing: 1.15),
        ),
      ),
      body: datePickers[_selectedTab],
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
            canvasColor: Colors.blueGrey,
            textTheme: Theme.of(context).textTheme.copyWith(
                caption: TextStyle(color: Colors.white.withOpacity(0.5)))),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.date_range), title: Text("Day")),
            BottomNavigationBarItem(
                icon: Icon(Icons.date_range), title: Text("Week")),
            BottomNavigationBarItem(
                icon: Icon(Icons.date_range), title: Text("Range")),
            BottomNavigationBarItem(
                icon: Icon(Icons.date_range), title: Text("Month")),
          ],
          fixedColor: Colors.yellow,
          currentIndex: _selectedTab,
          onTap: (newIndex) {
            setState(() {
              _selectedTab = newIndex;
            });
          },
        ),
      ),
    );
  }
}

final List<Event> events = [
  Event(DateTime.now(), "Today event"),
  Event(DateTime.now().subtract(Duration(days: 3)), "Ev1"),
  Event(DateTime.now().subtract(Duration(days: 13)), "Ev2"),
  Event(DateTime.now().subtract(Duration(days: 30)), "Ev3"),
  Event(DateTime.now().add(Duration(days: 3)), "Ev4"),
  Event(DateTime.now().add(Duration(days: 13)), "Ev5"),
  Event(DateTime.now().add(Duration(days: 30)), "Ev6"),
];

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_date_pickers: ^0.1.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_date_pickers/flutter_date_pickers.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
91
Health:
Code health derived from static analysis. [more]
100
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 Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [flutter_date_pickers] that is in a package requiring null.

Health suggestions

Format lib/flutter_date_pickers.dart.

Run flutter format to format lib/flutter_date_pickers.dart.

Format lib/src/basic_day_based_widget.dart.

Run flutter format to format lib/src/basic_day_based_widget.dart.

Format lib/src/date_picker_mixin.dart.

Run flutter format to format lib/src/date_picker_mixin.dart.

Fix additional 13 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/date_picker_styles.dart (Run flutter format to format lib/src/date_picker_styles.dart.)
  • lib/src/day_based_changable_picker.dart (Run flutter format to format lib/src/day_based_changable_picker.dart.)
  • lib/src/day_picker.dart (Run flutter format to format lib/src/day_picker.dart.)
  • lib/src/day_type.dart (Run flutter format to format lib/src/day_type.dart.)
  • lib/src/event_decoration.dart (Run flutter format to format lib/src/event_decoration.dart.)
  • lib/src/i_selectable_picker.dart (Run flutter format to format lib/src/i_selectable_picker.dart.)
  • lib/src/layout_settings.dart (Run flutter format to format lib/src/layout_settings.dart.)
  • lib/src/month_navigation_row.dart (Run flutter format to format lib/src/month_navigation_row.dart.)
  • lib/src/month_picker.dart (Run flutter format to format lib/src/month_picker.dart.)
  • lib/src/range_picker.dart (Run flutter format to format lib/src/range_picker.dart.)
  • lib/src/unselectable_period_error.dart (Run flutter format to format lib/src/unselectable_period_error.dart.)
  • lib/src/utils.dart (Run flutter format to format lib/src/utils.dart.)
  • lib/src/week_picker.dart (Run flutter format to format lib/src/week_picker.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
intl >=0.15.2 <0.17.0 0.16.1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
path 1.7.0
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test