customizable_date_picker 0.0.3

Flutter Android iOS web

A Customizable_date_picker

customizable_date_picker #

A Customizable_date_picker

Features #

  • Fully Customizable with Custom Builders.
  • Can Attach dynamic Data to each day.
  • Default Version, Ready to Use.

Getting started #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  customizable_date_picker: "^0.0.3"

In your library add the following import:

import 'package:customizable_date_picker/customizable_date_picker.dart';

For help getting started with Flutter, view the online documentation.

Attributes #

CustomDatePicker #

attributetypedescription
controllerCustomDatePickerControllerWidget controller
activeDayTextStyleTextStylenormal day color
hiddenDayTextStyleTextStylehidden day color
headerTextStyleTextStyleTextStyle of days abbreviations
selectedDaysColorColorcolor of selected day
headerBackgroundColorColorColor of the Header
daysOfWeekListDays abbreviations
backgroundWidgetBackground widget,could be anything, Image,Animations,Colors...
dayItemBuilderWidget Function(CustomDay day, int index)day item builder
monthTitleBuilderWidget Function(DateTime date)month Title Item Builder

Warning:

One you chose to use a builder, most other styling attributes will be ignored.

CustomDatePickerController #

attributetypedescription
startDateTimefirst month in the calendar
endDateTimelast month in the calendar
generateCustomDayCustomDay Function(DateTime firstDate, DateTime lastDate)generate dynamic for each Day

Simple Use #

CustomDatePickerController _controller = new CustomDatePickerController();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Card(
          child: CustomDatePicker(
            _controller
          ),
        ),
      ),
    );
  }

You can find the complete example in the Example project.

Using Custom Builder #

You can specify how every part of the Widget should be built:

 Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Card(
          child: CustomDatePicker(
              _controller,
            dayItemBuilder: dayItemBuilder,
            monthTitleBuilder: monthTitleBuilder,
            headerBackgroundColor: Colors.red,
            headerTextStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.w700),
          ),
        ),
      ),
    );
  }

You can find the complete example in the Example project.

 void _showPopUp() {
     showDialog(
       context: context,
       builder: (BuildContext context) {
         // return object of type Dialog
         return AlertDialog(
           title: new Text("Date Picker"),
           content: Card(
             child: CustomDatePicker(
               _controller,
               dayItemBuilder: dayItemBuilder,
               monthTitleBuilder: monthTitleBuilder,
               headerBackgroundColor: Colors.black,
               headerTextStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.w700),
             ),
           ),
           actions: <Widget>[
             // usually buttons at the bottom of the dialog
             new FlatButton(
               child: new Text("Close"),
               onPressed: () {
                 Navigator.of(context).pop();
               },
             ),
             new FlatButton(
               child: new Text("Okay"),
               onPressed: () {
                 Navigator.of(context).pop();
               },
             ),
           ],
         );
       },
     );
 
   }

You can find the complete example in the Example project.

Using dynamic Data #

You can use generateCustomDay to initialize CustomDay Objects with dynamic data.

CustomDatePickerController _controller = new CustomDatePickerController(
    start: DateTime.now().add(Duration(days: -300)),
    end: DateTime.now().add(Duration(days: 300)),
    generateCustomDay: generateDay
  );

  static CustomDay  generateDay(DateTime dateTime){
     Random random = new Random();
     int randomNumber = random.nextInt(200)+70;
     int state = random.nextInt(3)*random.nextInt(2)*random.nextInt(2); 
     return CustomDay(dateTime, {"cost":randomNumber,"state":state});
   }

You can also set Data using

controler.setDayData(DateTime date, dynamic data)

You can find the complete example in the Example project.

Changelog #

Please see the Changelog page to know what's recently changed.

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.