Date Picker In Flutter

Date Picker In Flutter :

This flutter tutorial post is select date using datepicker.

DatePicker

• selectedDate: Starting date display that is set date in date picker.
• onChanged: Select date display.
• Date format default DateFormat.yMMMMEEEEd().format(selectedDate). You can change the date format.

DatePicker(
selectedDate: _date,
onChanged: ((DateTime date) {
setState(() {
_date = date;
});
}))

Screenshot 1 :

Screenshot 2 :

datepicker.dart

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

class DatePicker extends StatelessWidget {
  static const _YEAR = 365;
  const DatePicker({Key key, this.selectedDate, this.onChanged})
      : super(key: key);
  final DateTime selectedDate;
  final ValueChanged<DateTime> onChanged;

  Future<Null> _selectDate(BuildContext context) async {
    FocusScope.of(context).requestFocus(FocusNode());
    await Future.delayed(Duration(milliseconds: 100));
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime.now().subtract(Duration(days: _YEAR * 10)),
      lastDate: DateTime.now().add(Duration(days: _YEAR * 10)),
    );
    if (picked != null && picked != selectedDate) {
      onChanged(picked);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(crossAxisAlignment: CrossAxisAlignment.end, children: <Widget>[
      Expanded(
          child: InkWell(
              onTap: () => _selectDate(context),
              child: InputDecorator(
                  decoration: InputDecoration(
                    border: InputBorder.none,
                  ),
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Padding(
                            padding: const EdgeInsets.only(left: 16.0),
                            child: Text(
                              DateFormat.yMMMMEEEEd().format(selectedDate),
                              style: Theme.of(context).textTheme.body1,
                            )),
                        Padding(
                          padding:
                              const EdgeInsets.only(left: 12.0, right: 12.0),
                          child: Icon(Icons.today),
                        )
                      ]))))
    ]);
  }
}

main.dart

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

import 'datepicker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ClearNumberInputPage(title: 'Flutter Tutorial'),
    );
  }
}

class ClearNumberInputPage extends StatefulWidget {
  ClearNumberInputPage({Key key, this.title}) : super(key: key);

  final String title;

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

class _ClearNumberInputState extends State<ClearNumberInputPage> {
  DateTime _date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: DatePicker(
                selectedDate: _date,
                onChanged: ((DateTime date) {
                  setState(() {
                    _date = 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