weekday_selector

A collection of Flutter widgets and classes to help you select weekdays in your apps. Perfect for recurring events, alarms.

smaho-engineering/weekday_selector

Build Status Code coverage

weekday_selector GitHub Stars Count

GIF Flutter plugin weekday_selector - Example app in action: Styles

Usage

Example app

We maintain a very detailed example app in our repository. You can find the best examples in the example folder on GitHub.

If you find any issues with the example app, please get in touch, we will figure out together how to make it better!

Basic usage

When calling the WeekdaySelector, pass a List<bool> as the values parameter. The values list may contain nulls, in that case the day will be disabled.

Implement the onChanged callback, if you want to handle user interaction. Your onChanged callback will receive int integers matching the DateTime.monday == 1, ..., DateTime.sunday == 7 values.

Typical usage with stateful widget:

class ExampleState extends State<ExampleWidget> {
  // We start with all days selected
  final values = List.filled(7, true);

  @override
  Widget build(BuildContext context) {
    return WeekdaySelector(
      onChanged: (v) {
        setState(() {
          values[v % 7] = !values[v % 7];
          // Use % 7 as Sunday's index in the array is 0
          // but DateTime.sunday == 7.
        });
      },
      values: values,
    );
  }
}

Customization

The WeekdaySelector class accepts many customization options: you can tweak the fill colors, text style, shape of the days, elevation, and more.

In case you don't provide any of these values, the library will do its best to figure out a style that matches your material app's theme.

If you want to control multiple selectors' appearance, take a look at the WeekdaySelectorTheme widget.

Internationalization

We aim to provide you with a widget that supports all languages. The WeekdaySelector accepts custom texts (shortWeekdays) and tooltips (weekdays), the first day of the week (firstDayOfWeek), and text direction RTL-LTR (textDirection).

In case these parameters are omitted, English ("en ISO") will be used.

We recommend you check out the intl package's DateSymbols class.

Please keep in mind that the intl package uses 0 value as FIRSTDAYOFWEEK value for locales that start with Monday, whereas DateTime.monday is equal to 1. We decided to use the Dart core library's convention, so if you use the intl library to decide which day should the week start with, add +1. See dart-lang #265

WeekdaySelector(
  // intl package uses 0 for Monday, but DateTime uses 1 for Monday,
  // so we need to make sure the values match
  firstDayOfWeek: dateSymbols.FIRSTDAYOFWEEK + 1,
),
GIF Flutter plugin weekday_selector - Example app in action: Internationalization

Coming soon

I'm currently working on a form widget wrapper around the weekday selector so it's easier to use within forms and validate.

Contribute

In case something does not work as expected, or you are not sure how to solve a problem, open an issue on GitHub. We are looking forward to your contributions: open an issue, clarify the documentation, clean up the code, or fix a bug! Thank you for your help!

Development

Here are a couple of useful commands that you should know if you want to work on the library itself (as opposed to just using it as a dependency).

  • flutter format . - Format code
  • flutter test - Run all tests
  • flutter analyze - Run the analyzer on the lib and test folders
  • bash coverage.sh - Run tests, collect coverage and generate HTML report

Libraries

weekday_selector