Flutter/Dart how to pick a date and populate text field with selection

Question

I am trying to let users add dates to a list in my app and I have managed to create my text field as well as the date selector. I am struggling to set the value of the selected date to a variable and populate the text field when a user picks one. I have tried accessing the _date value from _selectDate but still nothing populates my TextField.

Here is my code:

class DatesToRemember extends StatefulWidget {
  @override
  _DatesToRememberState createState() => _DatesToRememberState();
}

class _DatesToRememberState extends State<DatesToRemember> {


  DateTime selectedDate = DateTime.now();
  TextEditingController _date = new TextEditingController();

  Future<Null> _selectDate(BuildContext context) async {
    DateFormat formatter =
    DateFormat('dd/MM/yyyy'); //specifies day/month/year format

    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(1901, 1),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.light().copyWith(
              colorScheme: ColorScheme.light(
                primary: kPrimaryColor,
                onPrimary: Colors.black,
              ),
              buttonTheme: ButtonThemeData(
                colorScheme: Theme.of(context)
                    .colorScheme
                    .copyWith(primary: Colors.black),
              ),
            ),
            child: child,
          );
        },
        lastDate: DateTime(2100));

    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
        _date.value = TextEditingValue(
            text: formatter.format(
                picked));//Use formatter to format selected date and assign to text field
      });
    return _date;
  }      
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: GestureDetector(
              onTap: () => Navigator.pop(context),
              child: Icon(Icons.arrow_back)),
          title: Text('Dates to Remember'),
        ),
        backgroundColor: Colors.white,
        body: Center(
          child: Column(children: [
            SizedBox(
              height: 10.0,
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.8,
              child: Text(
                "It can be difficult to ",
                style: TextStyle(fontFamily: FontNameDefault),
              ),
            ),
            SizedBox(
              height: 50.0,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Align(
                alignment: Alignment.centerRight,
                child: FloatingActionButton(
                    backgroundColor: kPrimaryColor,
                    child: Icon(Icons.add),
                    onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Add occasion'),
                          content: Container(
                            height: 150.0,
                            child: Column(
                              children: [
                                TextField(
                                  onChanged: (String value) {
                                    input = value;
                                  },
                                  decoration: InputDecoration(
                                    hintText: 'Occasion Title'
                                  ),
                                ),
                                TextField(
                                  decoration: InputDecoration(
                                      hintText: 'Pick Date'
                                  ),
                                  onTap: () => _selectDate(context),

                                ),
                                FlatButton(
                                  child: Text('Add'),
                                  onPressed: () {
                                    setState(() {
                                      occasions.add(input);
                                    });
                                    Navigator.of(context).pop();
                                  },
                                ),
                              ],
                            ),
                          ),
 
                        );
                      });
                }),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height * 0.6,
              width: MediaQuery.of(context).size.width * 0.9,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black26)
              ),
              child:
              occasions.isEmpty? Center(child: Text('Add an occasion', style: TextStyle(
                color: Colors.black
              ),)) : ListView.builder(
                  itemCount: occasions.length,
                  itemBuilder: (BuildContext context, int index) {
                    return
                      Dismissible(
                        direction: DismissDirection.endToStart,
                      onDismissed: (direction) {
                        occasions.removeAt(index);
                        Scaffold.of(context).showSnackBar(new SnackBar(
                          content: Text('Occasion Removed'),
                          duration: Duration(seconds: 5),
                        ));
                      },
                      key: UniqueKey(),
                      child: Card(
                        elevation: 8.0,
                        margin: EdgeInsets.all(8),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: ListTile(
                          title: Text(occasions[index]),
                          trailing: IconButton(
                            icon: Icon(
                              Icons.delete,
                              color: Colors.red,
                            ),
                            onPressed: ()  {
                              setState(() {
                                occasions.removeAt(index);
                                Scaffold.of(context).showSnackBar(new SnackBar(
                                  content: Text('Occasion Removed'),
                                  duration: Duration(seconds: 5),
                                ));
                              });
                            },
                          ),
                        ),
                      ),
                    );
                  }),
            )
          ]),
        ));
  }
}

Can someone help? Thanks

Answer 1

Try my code below:

DateTime valueDate = DateTime.now();


Row(
      children: <Widget>[
        Container(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 0),
            child: Text("${valueDate.toLocal()}".split(' ')[0]),
          ),
          decoration: BoxDecoration(
              border: Border(
            bottom: BorderSide(
              color: Theme.of(context).accentColor,
              width: 2.5,
            ),
          )),
          width: 270,
        ),
        RaisedButton(
          child: Icon(Icons.date_range),
          onPressed: () => _selectDate(context),
        )
      ],
    );

The function :

Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(context: context, initialDate: valueDate, firstDate: DateTime(2015, 8), lastDate: DateTime(2101));
    if (picked != null && picked != valueDate)
      setState(() {
        valueDate = picked;
      });
  }