EP.30 Date and Time Picker Using Flutter

January 31, 2022

Overview

Today we build a date and time picker using date_time_picker library and Flutter

Source Code

import 'package:flutter/material.dart';
import 'package:date_time_picker/date_time_picker.dart';

class DateTimePickerReel extends StatelessWidget {
  const DateTimePickerReel({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://images.unsplash.com/photo-1594560562525-c691e827ca01?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDB8fHRpbWV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60'))),
        alignment: Alignment.topCenter,
        padding: const EdgeInsets.symmetric(horizontal: 25),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          margin: const EdgeInsets.only(top: 120),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
          child: DateTimePicker(
            showCursor: false,
            type: DateTimePickerType.dateTimeSeparate,
            dateMask: 'd MMM, yyyy',
            initialValue: DateTime.now().toString(),
            firstDate: DateTime(2010),
            lastDate: DateTime(2050),
            icon: const Icon(Icons.event),
            dateLabelText: 'Date',
            timeLabelText: "Hour",
            onChanged: (value) => print(value),
            onSaved: (value) => print(value),
          ),
        ),
      ),
    );
  }
}