A flutter horizontal date picker that always shift the selected date to center.

Overview

horizontal_center_date_picker

pub package

A flutter widget provides a horizontal date picker and always aligns selected date in center of the widget.

Usage

This shows Widget's full customizations:

HorizontalDatePickerWidget({
    required this.startDate,
    required this.endDate,
    required this.selectedDate,
    required this.widgetWidth,
    required this.datePickerController,
    this.dateItemComponentList = const <DateItem>[
      DateItem.Month,
      DateItem.Day,
      DateItem.WeekDay
    ],
    this.width = 60,
    this.height = 80,
    this.onValueSelected,
    this.normalColor = Colors.white,
    this.selectedColor = Colors.black,
    this.disabledColor = Colors.white,
    this.normalTextColor = Colors.black,
    this.selectedTextColor = Colors.white,
    this.disabledTextColor = const Color(0xFFBDBDBD),
    this.monthFontSize = 12,
    this.dayFontSize = 18,
    this.weekDayFontSize = 12,
  })
  1. startDate and endDate are required to control the valid date range.
  2. selectedDate is to indicate the default selected date.
  3. widgetWidth is the whole widget width
  4. width and height is the size of each date option item widget.
  5. dateItemComponentList is to indicate the date item label to show and the sequence of each label from top to bottom.
  6. onValueSelected is the callback function when user selected a new date.
  7. normalColor, selectedColor and disabledColor are the background color of each date option item widget background.
  8. normalTextColor, selectedTextColor and disabledTextColor are the background color of each date option item widget font color.
  9. monthFontSize, dayFontSize and weekDayFontSize are the fontsize of the date item label.

Example

import 'package:flutter/material.dart';
import 'package:horizontal_center_date_picker/datepicker_controller.dart';
import 'package:horizontal_center_date_picker/horizontal_date_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    var now = DateTime.now();
    DateTime startDate = now.subtract(Duration(days: 14));
    DateTime endDate = now.add(Duration(days: 7));
    print('startDate = $startDate ; endDate = $endDate');
    return Container(
      color: Colors.grey,
      alignment: Alignment.center,
      child: HorizontalDatePickerWidget(
        startDate: startDate,
        endDate: endDate,
        selectedDate: now,
        widgetWidth: MediaQuery.of(context).size.width,
        datePickerController: DatePickerController(),
        onValueSelected: (date) {
          print('selected = ${date.toIso8601String()}');
        },
      ),
    );
  }
}

License

MIT

You might also like...

Flutter picker plugin

Flutter picker plugin

flutter_picker Flutter plugin picker. Include NumberPicker, DateTimePicker, ArrayPicker, and default linkage Picker. Provide flexible parameters to me

Dec 23, 2022

A Flutter Country Picker Widget with support to country dialing codes

A Flutter Country Picker Widget with support to country dialing codes

flutter_country_picker A Flutter Country Picker Widget with support to country dialing codes Usage Add the CountryPicker widget in your layout and use

Apr 6, 2022

A beautiful circle color picker for flutter.

A beautiful circle color picker for flutter.

A beautiful circle color picker for flutter.

Dec 29, 2022

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Jul 4, 2022

Flutter Color Picker Wheel - an easy to use widget which can be heavily customized

Flutter Color Picker Wheel  - an easy to use widget which can be heavily customized

Flutter Color Picker Wheel Flutter Color Picker Wheel is an easy to use widget which can be heavily customized. You can use the WheelColorPicker direc

Oct 4, 2022

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

Jun 7, 2022

An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

Jan 8, 2023

A camera picker in WeChat style.

A camera picker in WeChat style.

A camera picker which is an extension for wechat_assets_picker. Based on camera for camera functions and photo_manager for asset implementation.

Dec 28, 2022

starlight_country_picker is a country picker.

Starlight Country Picker starlight_country_picker is a country picker. Features ☑️ Add New Country ☑️ Search Your Country ⭐ Our package was not used s

Nov 29, 2021
Comments
  • Update: locale setting

    Update: locale setting

    This PR updated:

    1. added locale setting for both month and week of day
    2. changed initialise of locale in init lib at initState instead of build
    3. updated example project for flutter 2.10.5
    4. fixed example project controller demo
    opened by MayLau-CbL 0
  • Setstate in onValueSelected cause all items to be disabled

    Setstate in onValueSelected cause all items to be disabled

    Thank you for this great widget!

    I have an issue with all the items are "disabled" (greyed) after onValueSelected() is called.

              onValueSelected: (date) {
                print('selected = ${date.toIso8601String()}');
                setState(() {
                  selectedDate = date;
                });
              },
    
    

    Descember 20 = First date in the "startdate". image

    Is this a know issue?

    opened by large 1
Owner
May Lau
Interested in frontend development, currently especially on flutter development.
May Lau
A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character

Liew Jun Tung 81 Sep 21, 2022
A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character.

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character. Quick scroll through list via dragging through alphabets.

Hussain Al Lawati 1 Apr 3, 2022
A widget to provides horizontal or vertical multiple split view for Flutter.

Multi split view A widget to provides horizontal or vertical multiple split view for Flutter. Horizontal or vertical Configurable weight or size for e

Carlos Eduardo Leite de Andrade 63 Dec 28, 2022
A Flutter Widget that create a horizontal table with fixed column on left hand side.

horizontal_data_table A Flutter Widget that create a horizontal table with fixed column on left hand side. Installation This package is starting to su

May Lau 204 Dec 27, 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
A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

toggle_bar A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android. Installation Depend on it. dependencies:

Prem Adithya 9 Jul 13, 2022
A light-weight Emoji 📦 for Dart & Flutter with all up-to-date emojis written in pure Dart 😄 . Made from 💯% ☕ with ❤️!

dart_emoji ?? A light-weight Emoji ?? for Dart & Flutter with all up-to-date emojis written in pure Dart ?? . Made from ?? % ☕ with ❤️ ! This is a for

Gatch 18 Mar 22, 2022
A Flutter widget to show a text form field to display a date or clock dialog

A Flutter widget to show a text form field to display a date or clock dialog. This widget extend TextField and has a similar behavior as TextFormField.

m3uzz Soluções em TI 82 Jan 6, 2023
A flutter package for displaying common picker dialogs.

Flutter Material Pickers A flutter package containing commonly used material design picker dialogs. Some are new, some wrap existing or built in picke

CodeGrue 89 Jan 2, 2023
A time picker widget for flutter

time_picker A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Ramon Alex 4 Dec 3, 2022