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