A date_time_widget is a useful Date and Time Picker. Where user can select the future and pas date and can show with the widget. Time Picker using the widget will allow the time selection in 12 or 24 hours formate.

Key Features

• Auto animation on the selection.
• 12/24 Hours formate for the Time Picker
• Can support future and past Date

Getting Started

To use this package, add date_time_widget as a dependency in your pubspec.yaml file.

dependencies:
  ...
  date_time_widget: ^1.0.0

Now in your Dart code, you can use:

 import 'package:date_time_widget/Module/DatePicker/date_picker_view.dart';
 import 'package:date_time_widget/TimePicker/time_picker_view.dart';

Usage

 DatePicker(textColor: hexToColor('#F4A896'),
              widgetBackColor: hexToColor('#F4A896'),
              listBackColor: Color(0xffffcdd2),
              widgetHeight: 80,
              widgetWidth: 80,
              containerHeight: 100,
              containerWidth: 100,
              expandWidth: MediaQuery.of(context).size.width,
              dateCallBack: dateCallBack,
              timeCallBack: null,
              calendarType: typesofCalendar.days)

  TimePickerView(
              textColor: hexToColor('#F4A896'),
              widgetBackColor: hexToColor('#F4A896'),
              listBackColor: Colors.red,
              widgetHeight: 80,
              widgetWidth: 80,
              containerHeight: 100,
              containerWidth: 100,
              expandWidth: MediaQuery.of(context).size.width,
              dateCallBack: null,
              timeCallBack: hourCallBack,
              calendarType: typesofCalendar.hours)

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add date_time_widget

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  date_time_widget: ^0.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:date_time_widget/Module/DatePicker/date_card_view.dart';
import 'package:date_time_widget/Module/DatePicker/date_picker_view.dart';
import 'package:date_time_widget/TimePicker/time_picker_view.dart';
import 'package:date_time_widget/TimePicker/time_stream_listner.dart';
import 'package:date_time_widget/TimePicker/time_view_card.dart';
import 'package:date_time_widget/base_view.dart';
import 'package:date_time_widget/data_list.dart';
import 'package:date_time_widget/shared_class.dart';

example/lib/main.dart

import 'package:date_time_widget/Module/DatePicker/date_picker_view.dart';
import 'package:date_time_widget/TimePicker/time_picker_view.dart';
import 'package:flutter/material.dart';
import 'package:date_time_widget/shared_class.dart';
import 'package:intl/intl.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',
      home: Scaffold(
        body: HomePage(),

      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String stringDate = 'SELECT DATE';
  String stringTime = 'SELECT TIME';

  void dateCallBack(value) {
    DateTime selected = value;
    setState(() {
      String formattedDate = DateFormat('dd-MMM-yyyy').format(selected);
      stringDate = '$formattedDate';
    });  }

  void hourCallBack(value) {
    setState(() {
      stringTime = '$value';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: hexToColor('#358497'),
        padding: EdgeInsets.only(top: 20),
        child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                color: hexToColor('#358497'),
                padding: EdgeInsets.only(left:15),
                child: Text(
                  stringDate,
                  style:
                  TextStyle(fontSize: 18, color: hexToColor('#F4A896'),fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center,
                ),
                height: 30,
              ),
              DatePicker(
                  textColor: hexToColor('#F4A896'),
                  widgetBackColor: hexToColor('#F4A896'),
                  listBackColor: Color(0xffffcdd2),
                  widgetHeight: 80,
                  widgetWidth: 80,
                  containerHeight: 100,
                  containerWidth: 100,
                  expandWidth: MediaQuery.of(context).size.width,
                  dateCallBack: dateCallBack,
                  timeCallBack: null,
                  calendarType: typesofCalendar.days),
              Container(
                padding: EdgeInsets.only(left:15),
                color: hexToColor('#358497'),
                child: Text(stringTime,
                    style: TextStyle(
                        fontSize: 18, color: hexToColor('#F4A896'),fontWeight: FontWeight.bold),
                    textAlign: TextAlign.start),
                height: 30,
              ),
              TimePickerView(
                  textColor: hexToColor('#F4A896'),
                  widgetBackColor: hexToColor('#F4A896'),
                  listBackColor: Colors.red,
                  widgetHeight: 80,
                  widgetWidth: 80,
                  containerHeight: 100,
                  containerWidth: 100,
                  expandWidth: MediaQuery.of(context).size.width,
                  dateCallBack: null,
                  timeCallBack: hourCallBack,
                  calendarType: typesofCalendar.hours)
            ],
          ),
        ));
  }
}

Color hexToColor(String hexString, {String alphaChannel = 'FF'}) {
  return Color(int.parse(hexString.replaceFirst('#', '0x$alphaChannel')));
}

LICENSE!

date_time_widget is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.