Flutter DateTimePicker by week

The flutter Date Time Picker has two options day or Year.

To display Date Picker as a week use the package week_day_picker

First add the package as dependency

dependencies:
  week_day_picker: last

Create new flutter project

flutter create week_picker

Paste the stater code.

We focus know to showWeekPicker function :

• Show the WeekDayPicker
• Change the value of selectedDate
• Refresh the HomeExample Widget to display the new date

Test the widget and select date.

By default the widget highlight today and display the day of the week as first day. You can change it by passing the new current date as argument

currentDate : DateTime.now().add(const Duration(days: 1)),

We can also send a default selected date

initialDate: DateTime.now().add(const Duration(days: 2)),

In same case we need to specify a condition to select a date.

We have two option :

1. SelectableDayInWeek :

We can send a list of int that represent the days of the week that can be selected :

1-Monday;

2-Tuesday;

3-Wednesday;

4-Thursday;

5-Friday;

6-Saturday;

7-Sunday

For example if the user must select only Monday or Friday add this code :

selectableDayInWeek:[1, 5],

2. SelectableDay :

Other option like in standard Date Time Picker we can provide a list of selectable date for example add this code to select only tomorrow and after tomorrow.

selectableDay: [
     DateTime.now().add(const Duration(days: 1)),  
     DateTime.now().add(const Duration(days: 2)),
],

3. Combine the two options

By default the two selectable mode must be satisfied.

The default value of combined option is :

selectableBitwiseOperator: BitwiseOperator.and,

You can change it to BitwiseOperator.or if unless one condition must be satisfied

Localization

The widget use the default application locale. To change the langue use :

locale: const Locale('fr', ''),

The WeekDayPicker use intl package to translate text.

Theming

By default the package use also the application theme and support dark and light mode.

You can change by override color property
colorHeader: Colors.blue[700],
colorOnHeader: Colors.blue[100],
colorIcon: Colors.blueAccent[200],
colorDisabled: Colors.blueGrey[100],
colorSelected: Colors.blue[800],
colorOnSelected: Colors.lightBlue[100],
backgroundColor: Colors.white,

For more info check the officiel example in github