Skip to content

Conversation

@tricasthu
Copy link
Contributor

Added a new optional parameter: localizedWeekDaysBuilder.

User case:

Currently, the weekDays widget at the top of the calendar works through two parameters: firstDayOfWeek and weekDaysBuilder. The abbreviations are hard-coded to work in English only, while the first day of the week is by default Sunday (as per US English), however, that can be changed through firstDayOfWeek.

This behavior above does not support localizations at all. That is, determining the first day of the week and showing day abbreviations based on the app's current locale. An example of this is Flutter's default showDateRangePicker and showDatePicker.

The proposed changes work as the following: when the new parameter is null, the current behavior is in effect, ie. backward compatible. When the builder function is not null, then the provided values (if any) of firstDayOfWeek and weekDaysBuilder are ignored. firstDayOfWeek will be initialized based on the app's current locale, while weekDaysBuilder is not used at all.

The logic to determine the first day of the week and the week abbreviations in _getLocalizedDaysOfWeek() in lib/src/month_item.dart is based on the default Flutter implementation in ..\flutter\packages\flutter\lib\src\material\date_picker.dart, List _getDayHeaders(TextStyle headerStyle, MaterialLocalizations localizations){...} function. I had to rewrite the code from a for loop to a while loop because of one of this library's linter rules (literal_only_boolean_expressions specifically).

While implementing this feature, I have also recognized that the weekday letters are not completely aligned with the date numbers below them. In English, this was not very noticeable, but in languages where the abbreviation consists of 2 letters (eg. Sz) it was quite obvious. For this to work properly, I have wrapped each weekday widget with a Container that has the same width as the day item widgets below them. In addition to this, borders also have an effect; the weekday widgets must have a border with the same width as the day items below, most likely with a transient color. I have updated the default DayItem and DefaultWeekdayWidget widgets to have the same border size.

I have also extended the example project to show how this builder function works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants