datetime_picker_formfield_new 2.1.0 datetime_picker_formfield_new: ^2.1.0 copied to clipboard
A TextFormField that emits DateTimes and helps show Material, Cupertino, and other style picker dialogs.
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
// For changing the language
import 'package:flutter_localizations/flutter_localizations.dart';
// import 'package:flutter_cupertino_localizations/flutter_cupertino_localizations.dart';
const appName = 'DateTimeField Example';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: appName,
home: MyHomePage(),
theme: ThemeData.light().copyWith(inputDecorationTheme: InputDecorationTheme(border: OutlineInputBorder())),
localizationsDelegates: [
// ... app-specific localization delegate[s] here
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en'), // English
const Locale('es'), // Spanish
const Locale('fr'), // French
const Locale('zh'), // Chinese
],
);
}
}
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(appName)),
body: SingleChildScrollView(
child: Center(child: Container(constraints: BoxConstraints(maxWidth: 600), child: DateTimeForm())),
));
}
}
class DateTimeForm extends StatefulWidget {
@override
_DateTimeFormState createState() => _DateTimeFormState();
}
class _DateTimeFormState extends State<DateTimeForm> {
final formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
BasicDateField(),
SizedBox(height: 24),
BasicTimeField(),
SizedBox(height: 24),
Clock24Example(),
SizedBox(height: 24),
LocaleExample(),
SizedBox(height: 24),
BasicDateTimeField(),
SizedBox(height: 24),
IosStylePickers(),
SizedBox(height: 24),
ComplexDateTimeField(),
SizedBox(height: 24),
ElevatedButton(
child: Text('Save'),
onPressed: () => formKey.currentState?.save(),
),
ElevatedButton(
child: Text('Reset'),
onPressed: () => formKey.currentState?.reset(),
),
ElevatedButton(
child: Text('Validate'),
onPressed: () => formKey.currentState?.validate(),
),
],
),
);
}
}
class BasicDateField extends StatelessWidget {
final format = DateFormat("yyyy-MM-dd");
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('Basic date field (${format.pattern})'),
DateTimeField(
format: format,
onShowPicker: (context, currentValue) {
return showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100));
},
),
]);
}
}
class BasicTimeField extends StatelessWidget {
final format = DateFormat("hh:mm a");
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('Basic time field (${format.pattern})'),
DateTimeField(
format: format,
onShowPicker: (context, currentValue) async {
final TimeOfDay? time = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
);
return time == null ? null : DateTimeField.convert(time);
},
),
]);
}
}
class BasicDateTimeField extends StatelessWidget {
final format = DateFormat("yyyy-MM-dd HH:mm");
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('Basic date & time field (${format.pattern})'),
DateTimeField(
format: format,
onShowPicker: (context, currentValue) async {
return await showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100),
).then((DateTime? date) async {
if (date != null) {
final time = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
);
return DateTimeField.combine(date, time);
} else {
return currentValue;
}
});
},
),
]);
}
}
class IosStylePickers extends StatefulWidget {
@override
_IosStylePickersState createState() => _IosStylePickersState();
}
class _IosStylePickersState extends State<IosStylePickers> {
final format = DateFormat("yyyy-MM-dd HH:mm");
DateTime? value;
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('iOS style pickers (${format.pattern})'),
DateTimeField(
initialValue: value,
format: format,
onShowPicker: (context, currentValue) async {
await showCupertinoModalPopup(
context: context,
builder: (context) {
return BottomSheet(
builder: (context) => Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
constraints: BoxConstraints(maxHeight: 200),
child: CupertinoDatePicker(
onDateTimeChanged: (DateTime date) {
value = date;
},
),
),
TextButton(onPressed: () => Navigator.pop(context), child: Text('Ok')),
],
),
onClosing: () {},
);
});
setState(() {});
return value;
},
),
]);
}
}
class ComplexDateTimeField extends StatefulWidget {
@override
_ComplexDateTimeFieldState createState() => _ComplexDateTimeFieldState();
}
class _ComplexDateTimeFieldState extends State<ComplexDateTimeField> {
final format = DateFormat("yyyy-MM-dd HH:mm");
final initialValue = DateTime.now();
AutovalidateMode autoValidateMode = AutovalidateMode.onUserInteraction;
bool? readOnly = true;
bool? showResetIcon = true;
DateTime? value = DateTime.now();
int changedCount = 0;
int savedCount = 0;
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('Complex date & time field (${format.pattern})'),
DateTimeField(
format: format,
onShowPicker: (context, currentValue) async {
return await showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100),
).then((DateTime? date) async {
if (date != null) {
final time = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
);
return DateTimeField.combine(date, time);
} else {
return currentValue;
}
});
},
autovalidateMode: autoValidateMode,
validator: (date) => date == null ? 'Invalid date' : null,
initialValue: initialValue,
onChanged: (date) => setState(() {
value = date;
changedCount++;
}),
onSaved: (date) => setState(() {
value = date;
savedCount++;
}),
resetIcon: showResetIcon! ? Icon(Icons.delete) : null,
readOnly: readOnly!,
decoration: InputDecoration(helperText: 'Changed: $changedCount, Saved: $savedCount, $value'),
),
CheckboxListTile(
title: Text('autoValidate'),
value: autoValidateMode != AutovalidateMode.disabled,
onChanged: (value) => setState(() => autoValidateMode = AutovalidateMode.always),
),
CheckboxListTile(
title: Text('readOnly'),
value: readOnly,
onChanged: (value) => setState(() => readOnly = value),
),
CheckboxListTile(
title: Text('showResetIcon'),
value: showResetIcon,
onChanged: (value) => setState(() => showResetIcon = value),
),
]);
}
}
class Clock24Example extends StatelessWidget {
final format = DateFormat("HH:mm");
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('24 hour clock'),
DateTimeField(
format: format,
onShowPicker: (context, currentValue) async {
final time = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
builder: (context, child) =>
MediaQuery(data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true), child: child!),
);
return DateTimeField.convert(time);
},
),
]);
}
}
class LocaleExample extends StatelessWidget {
final format = DateFormat("yyyy-MM-dd HH:mm");
@override
Widget build(BuildContext context) {
return Column(children: <Widget>[
Text('Changing the pickers\' language'),
DateTimeField(
format: format,
onShowPicker: (context, currentValue) async {
return await showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: DateTime.now(),
lastDate: DateTime(2100),
builder: (context, child) => Localizations.override(
context: context,
locale: Locale('zh'),
child: child,
),
).then((DateTime? date) async {
if (date != null) {
final time = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
builder: (context, child) => Localizations.override(
context: context,
locale: Locale('zh'),
child: child,
),
);
return DateTimeField.combine(date, time);
} else {
return currentValue;
}
});
},
),
]);
}
}