DatePicker Horizontal In Flutter

DatePicker Horizontal In Flutter :

This flutter tutorial post is DatePicker Horizontal In Flutter. You can select date.

Screenshot :

Project Structure Screenshot :

Extra Package

color.dart

import 'package:flutter/material.dart';

class AppColors {
  AppColors._();

  static const Color defaultDateColor = Colors.black;
  static const Color defaultDayColor = Colors.black54;
  static const Color defaultMonthColor = Colors.black45;
}

dimen.dart

class Dimen {
  Dimen._();

  static const double dateTextSize = 24;
  static const double dayTextSize = 11;
  static const double monthTextSize = 11;
}

Gestures Package

tap.dart

typedef DateSelectionCallback = void Function(DateTime selectedDate);
typedef DateChangeListener = void Function(DateTime selectedDate);

date_picker_timeline.dart

library date_picker_timeline;
import 'package:flutter/material.dart';
import 'date_widget.dart';
import 'extra/color.dart';
import 'extra/dimen.dart';
import 'gestures/tap.dart';

class DatePickerTimeline extends StatefulWidget {
  final double dateSize, daySize, monthSize;
  final Color dateColor, monthColor, dayColor;
  DateTime currentDate;
  final DateChangeListener onDateChange;

  DatePickerTimeline(
    this.currentDate, {
    Key key,
    this.dateSize = Dimen.dateTextSize,
    this.daySize = Dimen.dayTextSize,
    this.monthSize = Dimen.monthTextSize,
    this.dateColor = AppColors.defaultDateColor,
    this.monthColor = AppColors.defaultMonthColor,
    this.dayColor = AppColors.defaultDayColor,
    this.onDateChange,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => new _DatePickerState();
}

class _DatePickerState extends State<DatePickerTimeline> {
  @override
  void initState() {
    DateTime _date = DateTime.now();
    widget.currentDate = new DateTime(_date.year, _date.month, _date.day);
    ;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 80,
        child: ListView.builder(
            itemCount: 50000,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              DateTime _date = DateTime.now().add(Duration(days: index));
              DateTime date = new DateTime(_date.year, _date.month, _date.day);
              bool isSelected = compareDate(date, widget.currentDate);

              return DateWidget(
                  date: date,
                  dateColor: widget.dateColor,
                  dateSize: widget.dateSize,
                  dayColor: widget.dayColor,
                  daySize: widget.daySize,
                  monthColor: widget.monthColor,
                  monthSize: widget.monthSize,
                  selectionColor: isSelected
                      ? Colors.blue.withOpacity(0.1)
                      : Colors.transparent,
                  onDateSelected: (selectedDate) {
                    // A date is selected
                    if (widget.onDateChange != null) {
                      widget.onDateChange(selectedDate);
                    }
                    setState(() {
                      widget.currentDate = selectedDate;
                    });
                  });
            }));
  }

  bool compareDate(DateTime date1, DateTime date2) {
    return date1.day == date2.day &&
        date1.month == date2.month &&
        date1.year == date2.year;
  }
}

date_widget.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'gestures/tap.dart';

class DateWidget extends StatelessWidget {
  final DateTime date;
  final double dateSize, daySize, monthSize;
  final Color dateColor, monthColor, dayColor;
  final Color selectionColor;
  final DateSelectionCallback onDateSelected;

  DateWidget(
      {@required this.date,
      @required this.dateSize,
      @required this.daySize,
      @required this.monthSize,
      @required this.dateColor,
      @required this.monthColor,
      @required this.dayColor,
      @required this.selectionColor,
      this.onDateSelected});

  @override
  Widget build(BuildContext context) {
    return InkWell(
        child: Container(
            margin: EdgeInsets.all(3.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: selectionColor,
            ),
            child: Padding(
                padding: const EdgeInsets.only(
                    top: 8.0, bottom: 8.0, left: 15, right: 15),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                          new DateFormat("MMM")
                              .format(date)
                              .toUpperCase(), // Month
                          style: TextStyle(
                            color: monthColor,
                            fontSize: monthSize,
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w500,
                          )),
                      Text(date.day.toString(), // Date
                          style: TextStyle(
                            color: dateColor,
                            fontSize: dateSize,
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w700,
                          )),
                      Text(
                          new DateFormat("E")
                              .format(date)
                              .toUpperCase(), // WeekDay
                          style: TextStyle(
                            color: dayColor,
                            fontSize: daySize,
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w500,
                          ))
                    ]))),
        onTap: () {
          // Check if onDateSelected is not null
          if (onDateSelected != null) {
            // Call the onDateSelected Function
            onDateSelected(this.date);
          }
        });
  }
}

main.dart

import 'package:flutter/material.dart';
import 'datepicker/date_picker_timeline.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Date Picker Horizontal'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _selectedValue = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            padding: EdgeInsets.all(20.0),
            color: Colors.blueGrey[100],
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("Selected Date"),
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  Text(_selectedValue.toString()),
                  Padding(
                    padding: EdgeInsets.all(20),
                  ),
                  DatePickerTimeline(_selectedValue, onDateChange: (date) {
                    setState(() {
                      _selectedValue = date;
                    });
                  })
                ])));
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in