flutter_datetime_formfield 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 90

A date time picker form field

How to use #

class MyApp extends StatelessWidget {
  final String title;
  final DateTime initialDateTime;

  MyApp({Key key, this.title, this.initialDateTime}) : super();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DateTimeFormField Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: title ?? 'Home Page',
        initialDateTime: initialDateTime ?? DateTime.now(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, @required this.title, @required this.initialDateTime})
      : super(key: key);

  final String title;
  final DateTime initialDateTime;

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

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormState> _formKey;
  DateTime _dateTime;

  @override
  void initState() {
    _formKey = GlobalKey<FormState>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              DateTimeFormField(
                initialValue: widget.initialDateTime,
                label: "Date Time",
                validator: (DateTime dateTime) {
                  if (dateTime == null) {
                    return "Date Time Required";
                  }
                  return null;
                },
                onSaved: (DateTime dateTime) => _dateTime = dateTime,
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: RaisedButton(
                  child: Text("Submit"),
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      _formKey.currentState.save();
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            title: Text("Date Time"),
                            content: Text(_dateTime.toIso8601String()),
                          );
                        },
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Parameters #

initialValue - The intial date time, default value is 'DateTime.now()'
label - The label of form field, default value is 'Date Time'
onlyDate - Only show and edit date, default value is false
onlyTime - Only show and edit time, default value is false. onlyDate and onlyTime cannot be set to true at the same time.
formatter - The format of displaying date time in form field, default value is 'DateFormat("EE, MMM d, yyyy h:mma")' in date and time mode, 'DateFormat("EEE, MMM d, yyyy")' in date only mode, 'DateFormat("h:mm a") in time only mode
autovalidate - Whether validate every time, default value is false
validator - Validate function of form field
onSaved - Save value function of form field

Notice DateTimeFormField must has Material Widget ancestor such as MaterialApp

0.1.2 #

  • Support iOS style when running on iOS

0.1.1 #

  • Fix formatter is null issue
  • Add example code
  • Add comments to code
  • Update README.md

0.1.0 #

Date Time Form Field that supports material design.

0.0.1 #

Pre release

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_datetime_formfield/flutter_datetime_formfield.dart';

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

class MyApp extends StatelessWidget {
  final String title;
  final DateTime initialDateTime;

  MyApp({Key key, this.title, this.initialDateTime}) : super();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DateTimeFormField Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: title ?? 'Home Page',
        initialDateTime: initialDateTime ?? DateTime.now(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, @required this.title, @required this.initialDateTime})
      : super(key: key);

  final String title;
  final DateTime initialDateTime;

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

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormState> _formKey;
  DateTime _dateTime;

  @override
  void initState() {
    _formKey = GlobalKey<FormState>();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              DateTimeFormField(
                initialValue: widget.initialDateTime,
                label: "Date Time",
                validator: (DateTime dateTime) {
                  if (dateTime == null) {
                    return "Date Time Required";
                  }
                  return null;
                },
                onSaved: (DateTime dateTime) => _dateTime = dateTime,
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: RaisedButton(
                  child: Text("Submit"),
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      _formKey.currentState.save();
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            title: Text("Date Time"),
                            content: Text(_dateTime.toIso8601String()),
                          );
                        },
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_datetime_formfield: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_datetime_formfield/flutter_datetime_formfield.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Apr 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/flutter_datetime_formfield.dart.

Run flutter format to format lib/flutter_datetime_formfield.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
intl ^0.16.0 0.16.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test