Search code examples
androidiosflutterdartflutter-layout

How to get flutter datepicker value to the textfield?


How to get flutter date picker value to the textfield?when i click the text field it is pop up date picker after choosing date. i wanted to be that date in the textfield

also.

i want to customise the color of the date picker

     onTap: () {
       FocusScope.of(context).requestFocus(new FocusNode());
       showDatePicker(
       context: context,
       initialDate: DateTime.now(),
       firstDate: DateTime(2019, 1),
       lastDate: DateTime(2021,12),
        );
       },

Solution

  • I fix your code as below (you can select date from DatePicker and you can customise theme of DatePicker):

    import 'package:flutter/material.dart';
    import 'package:intl/intl.dart';
    
    class TestPickerWidget extends StatefulWidget {
      @override
      _TestPickerWidgetState createState() => _TestPickerWidgetState();
    }
    
    class _TestPickerWidgetState extends State<TestPickerWidget> {
      DateTime _selectedDate;
      TextEditingController _textEditingController = TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: TextField(
              focusNode: AlwaysDisabledFocusNode(),
              controller: _textEditingController,
              onTap: () {
                _selectDate(context);
              },
            ),
          ),
        );
      }
    
      _selectDate(BuildContext context) async {
        DateTime newSelectedDate = await showDatePicker(
            context: context,
            initialDate: _selectedDate != null ? _selectedDate : DateTime.now(),
            firstDate: DateTime(2000),
            lastDate: DateTime(2040),
            builder: (BuildContext context, Widget child) {
              return Theme(
                data: ThemeData.dark().copyWith(
                  colorScheme: ColorScheme.dark(
                    primary: Colors.deepPurple,
                    onPrimary: Colors.white,
                    surface: Colors.blueGrey,
                    onSurface: Colors.yellow,
                  ),
                  dialogBackgroundColor: Colors.blue[500],
                ),
                child: child,
              );
            });
    
        if (newSelectedDate != null) {
          _selectedDate = newSelectedDate;
          _textEditingController
            ..text = DateFormat.yMMMd().format(_selectedDate)
            ..selection = TextSelection.fromPosition(TextPosition(
                offset: _textEditingController.text.length,
                affinity: TextAffinity.upstream));
        }
      }
    }
    
    class AlwaysDisabledFocusNode extends FocusNode {
      @override
      bool get hasFocus => false;
    }
    

    and also you must add Intl dependency in your pubspec.yaml :

    dev_dependencies:
      flutter_test:
        sdk: flutter
      intl: ^0.16.1
    

    Finally call TestPickerWidget in your main for testing it.