timeline_date_picker 0.1.3

A time line date picker to flutter

Timeline date picker

Customizable timeline date picker for flutter. Download at pub.dev

Simple Example

startDate, endDate and onChange are required

handleChange(DateTime date) {
    print(date);
}
  
@override
  Widget build(BuildContext context) {
    DateTime today = DateTime.now();
    DateTime startDate = new DateTime(today.year, today.month - 1, today.day);
    DateTime endDate = new DateTime(today.year, today.month + 1, today.day);

    return Scaffold(
      appBar: AppBar(
        title: Text('TimeLine Date Picker'),
      ),
      body: DatePicker(
        startDate: startDate,
        endDate: endDate,
        onChange: handleChange
      ),
    );
  }

Another Example

There are four render methods. All are optional if not provided, default renders will be used.

• dateRender
• selectedDateRender
• boxRender
• selectedDateRender

Here is an example. Here I'll show you how to use these render methods.

DatePicker(
    startDate: startDate,
    endDate: endDate,
    onChange: handleChange,
    size: 60,
    dateRender: (date) => Day(date),
    boxRender: BoxDecoration(
        border: Border(
            right: _normalBorderSide(),
            top: _normalBorderSide(),
            bottom: _normalBorderSide(),
        ),
    ),
    selectedBoxRender: BoxDecoration(
        color: Color(0xFF4186E4).withOpacity(0.12),
        border: Border(
            right: _normalBorderSide(),
            top: _normalBorderSide(),
            bottom: _selectedBorderSide(),
        ),
    ),
    selectedDateRender: (date) => Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
            Text(
                Jiffy(date).format('dd'),
                style: TextStyle(fontWeight: FontWeight.w700, color: Color(0xFF4186E4), fontSize: 20),
            ),
            Text(
                Jiffy(date).format('EEE'),
                style: TextStyle(fontWeight: FontWeight.w600, color: Color(0xFF4186E4), fontSize: 12),
            ),
        ],
    ),
)

BorderSide _normalBorderSide() {
    return BorderSide(color: Color(0xFFF0F2F8), width: 1);
}

BorderSide _selectedBorderSide() {
    return BorderSide(color: Color(0xFF4186E4), width: 3);
}

class Day extends StatelessWidget {
  final DateTime date;

  Day(this.date);

  @override
  Widget build(BuildContext context) {
    Jiffy day = Jiffy(date);

    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text(
          day.format('dd'),
          style: TextStyle(fontWeight: FontWeight.w700, color: Color(0xFF8C9AAF), fontSize: 20),
        ),
        Text(
          day.format('EEE'),
          style: TextStyle(fontWeight: FontWeight.w600, color: Color(0xFFB1BCD0), fontSize: 12),
        ),
      ],
    );
  }
}

Your imagination is the limit.