I am Trying to add date picker in dropdownbutton in flutter but when I press the button the date picker isn't opening

Question

i am trying to add a date picker function inside a alert dialogue in flutter , the date picker should open when i press the dropdown button but its not opening i've used date picker function inside on changed function do i have to also use drop down menu item I've also added the screenshot below please have a look

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

class AlertSnd extends StatefulWidget {
  const AlertSnd({Key key}) : super(key: key);

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

class _AlertSndState extends State<AlertSnd> {
  DateTime datel;
  String _chosenVal;
  @override
  Widget build(BuildContext context) {
    return new Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
      elevation: 0,
      backgroundColor: Colors.white,
      child: contentBox(context),
    );
  }

  contentBox(context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              boxShadow: [
                BoxShadow(
                    color: Colors.black, offset: Offset(0, 10), blurRadius: 10),
              ]),
          child: Padding(
            padding: const EdgeInsets.all(80.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Center(
                  child: DropdownButton<String>(
                      focusColor: Colors.white,
                      value: _chosenVal,
                      style: TextStyle(color: Colors.black),
                      items: <String>[
                        'android',
                        'IOS',
                        'Flutter',
                        'Node',
                        'Java',
                        'Python',
                        'PHP',
                      ].map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                      hint: Text(
                        'Choose A Subject',
                        style: TextStyle(
                            color: Colors.black,
                            fontSize: 16,
                            fontWeight: FontWeight.w600),
                      ),
                      onChanged: (String value) {
                        setState(() {
                          _chosenVal = value;
                        });
                      }),
                ),
                SizedBox(
                  height: 50,
                ),
                DropdownButton<DateTime>(
                    hint: Text('Choose A Date'),
                    onChanged: (DateTime value) {
                      showDatePicker(
                              context: context,
                              initialDate: DateTime.now(),
                              firstDate: DateTime(2001),
                              lastDate: DateTime(2099))
                          .then((date) {
                        setState(() {
                          datel = date;
                        });
                      });
                    }),
                TextButton(
                    onPressed: () {
                      Navigator.pushNamed(context, AttendenceScr.id);
                    },
                    child: Text('Submit')),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1

In this case, you need to add items to activate the Dropdown onChanged, just like this:

DropdownButton<DateTime>(
                    hint: Text('Choose A Date'),
                    items: [
                      'Choose A Date'
                    ].map((e) => DropdownMenuItem<DateTime>(child: Text(e))).toList(),
                    onChanged: (DateTime value) {
                      setState(() {
                        showDatePicker(
                            context: context,
                            initialDate: DateTime.now(),
                            firstDate: DateTime(2001),
                            lastDate: DateTime(2099))
                            .then((date) {
                          setState(() {
                            datel = date;
                          });
                        });
                      });
                    })