A simple Flutter widget library that helps us to select days in a week.

Overview

Day Picker

A Flutter widget library which helps us to select days in a week.

Test, Build and deploy

Screenshot

Screenshot week day picker Screenshot week day picker

Usage

Add day_picker to your pubspec.yaml file.

    flutter:
      sdk: flutter
    day_picker: 2.0.0

import the package:

import 'package:day_picker/day_picker.dart';

Constructor for the day_picker is given below.

    SelectWeekDays({
    required this.onSelect,
    this.backgroundColor,
    this.daysFillColor,
    this.daysBorderColor,
    this.selectedDayTextColor,
    this.unSelectedDayTextColor,
    this.border = true,
    this.boxDecoration,
    this.padding = 8.0,
    required this.days,
    Key? key,
  }) : super(key: key);

Example here creates a day_picker with below style [with Gradient and no borders].

Screenshot week day picker

<== Callback to handle the selected days print(values); }, ), ), ), ); ">
    List<DayInWeek> _days = [
    DayInWeek(
      "Sun",
    ),
    DayInWeek(
      "Mon",
    ),
    DayInWeek(
      "Tue",
      isSelected: true
    ),
    DayInWeek(
      "Wed",
    ),
    DayInWeek(
      "Thu",
    ),
    DayInWeek(
      "Fri",
    ),
    DayInWeek(
      "Sat",
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Select days in week"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SelectWeekDays(
            days: _days
            border: false,
            boxDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30.0),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                colors: [const Color(0xFFE55CE4), const Color(0xFFBB75FB)],
                tileMode:
                    TileMode.repeated, // repeats the gradient over the canvas
              ),
            ),
            onSelect: (values) { // <== Callback to handle the selected days
                print(values);
            },
          ),
        ),
      ),
    );

Pass a callback to the onSelect property with parameter of type List .


Pass a list of days of type DayInWeek into days property

class DayInWeek {

  String dayName;
  bool isSelected = false;

  DayInWeek(this.dayName, {this.isSelected = false});
}

DayInWeek consist of two Properties [dayName] and [isSelected]. By default [isSelected] value will be false


Example:

void handleOnSelect(List<String> value){
    //TODO: Manipulate the List of days selected
    print(value);
}

Customization

Property Type Description
onSelect List Callback invoked when days are selected
days List List of days that need to be passed
padding double Padding between container and the buttons [by default it is 8.0]
boxdecoration BoxDecoration provides variety of ways to style the background container[gradient, color, border radius]
backgroundColor Color Property to change the color of the container
daysFillColor Color Property to change the color of rounded buttons when the days are selected
daysBorderColor Color Property to change the border color of rounded button
selectedDayTextColor Color property to change the text color of the selected days
unSelectedDayTextColor Color property to change the text color when the days are not selected
border bool Set this property to false if border is not needed around the rounded buttons[by default this property will be true]

Contributions

Contributions of any kind are more than welcome 😊 ! Feel free to fork and improve day_picker or open an issue.

You might also like...

Helps to turn some popular widgets into Neumorphism style

Helps to turn some popular widgets into Neumorphism style

Helps to turn some popular widgets into Neumorphism style. Features NeumorphicCard: a card with Neumorphism look and feel NeumorphicButton: implements

Jun 27, 2022

🔍 Code generation for selectors of class fields that helps reduce repetitive code

Code generation for selectors of class fields and enum cases that helps reduce repetitive code.

Oct 3, 2022

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Jan 6, 2023

A flutter carousel widget, support infinite scroll, and custom child widget.

A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Nov 25, 2021

A Flutter Widget to make interactive timeline widget.

A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Sep 22, 2022

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Jan 7, 2023

A widget lib that the widget in this lib can react to flutter ScrollController's offset

A widget lib that the widget in this lib can react to flutter ScrollController's  offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

Oct 16, 2022

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Dec 1, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Apr 15, 2022
Comments
  • RangeError (end): Invalid value: Not in inclusive range 0..2: 3

    RangeError (end): Invalid value: Not in inclusive range 0..2: 3

    I'm using the following list of DayInWeek but the widget does not allow these names.

        List<DayInWeek> _days = [
          DayInWeek("Zo", isSelected: schedule.day1!),
          DayInWeek("Ma", isSelected: schedule.day2!),
          DayInWeek("Di", isSelected: schedule.day3!),
          DayInWeek("Wo", isSelected: schedule.day4!),
          DayInWeek("Do", isSelected: schedule.day5!),
          DayInWeek("Vr", isSelected: schedule.day6!),
          DayInWeek("Za", isSelected: schedule.day7!),
        ];
    
    opened by fkranenburg 3
  • [BUG] Readme examples missing comma

    [BUG] Readme examples missing comma

    Describe the bug In the readme file the examples missing a , comma.

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://github.com/shan-shaji/day_picker/edit/master/README.md

    Screenshots

    First place:

    image

    Second place:

    image

    bug 
    opened by guyluz11 2
  • Add the dayKey key to the DayInWeek class to make it easier to use th…

    Add the dayKey key to the DayInWeek class to make it easier to use th…

    Add a field in the class DayInWeek

    To make it easier to handle days in the _getSelectedWeekDays function, I added the dayKey field to the DayInWeek class. This should facilitate the manipulation of days, especially in French for my part.

    A good practice would then be to use English for the dayKey fields indicating "monday", "tuesday"… And the user remains free to use any terms he wants for the dayName field (M, Mon, Monday, Mo...).

    opened by Ben8557 1
  • [BUG]

    [BUG]

    when using SelectWeekDays in a dialog, close the diolog and enter it again the selected days remain selected unless I leave the page and come back again, I need to somehow reset the selectedDays list

    bug 
    opened by AbnerRibeirodaSilva 0
Releases(v2.1.0)
Owner
Shan Shaji
Likes to build packages and tools.
Shan Shaji
A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

Carlos Eugenio Torres 73 Sep 7, 2022
Flutter widget form select a date in horizontal timeline with customizable styles.

Flutter widget form select a date in horizontal timeline with customizable styles. Getting Started You can use this package when you need to add a dat

Jose Manuel Márquez 158 Dec 2, 2022
Horizontal_calendar - Horizontal week view calendar pub for Flutter.

horizontal_calendar Easy to use, highly customizable horizontal calendar. Features Custom date range (First & Last Date) Single or up to x days select

SoluteLabs 74 Dec 19, 2022
Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Hugo Delaunay 196 Dec 2, 2022
A flutter package to select a country from a list of countries.

Country picker A flutter package to select a country from a list of countries. Getting Started Add the package to your pubspec.yaml: country_picker: ^

Daniel Ioannou 60 Dec 30, 2022
Cupertino buttons which are used as radio buttons in order to select one value

Flutter Cupertino Radio Choice Cupertino buttons which are used as radio buttons in order to select one value. Tutorial A complete tutorial how to use

Christoph Rothermel 4 Sep 18, 2022
A custom dropdown button lets the user select from a number of items

CircularDropDownMenu Description A custom dropdown button lets the user select from a number of items. The button shows the currently selected item as

Surya Dev Singh 2 Dec 5, 2020
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.

Irfan Vigma Taufik 332 Dec 20, 2022
Flutter package which helps you to implement Ticket Widget in your app.

✨ Ticket Widget Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and it is an updated null safe v

Mujahid 7 Dec 30, 2022
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022