IOS Date picker in Flutter

Question

I want to make only a date picker using Cupertino. something like below

but all I am able to do is this... can anyone help?

Container(
            height: MediaQuery.of(context).copyWith().size.height / 3,
            child: CupertinoDatePicker(
              initialDateTime: DateTime.now(),
              onDateTimeChanged: (DateTime newdate) {
                print(newdate);
                setState(() {
                  _currentdate = newdate;
                });
              },
              use24hFormat: true,
              maximumDate: new DateTime(2050, 12, 30),
              minimumYear: 2010,
              maximumYear: 2018,
              minuteInterval: 1,
              mode: CupertinoDatePickerMode.dateAndTime,
            ),
          ),

Solution

1. Add a row at the top of the cupertino date picker.
2. Format the selected date with the intl package.

           Column(
             children: [
                Container(
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(color: Colors.grey, width: 0.5))),
                  padding: EdgeInsets.symmetric(
                    horizontal: 20,
                    vertical: 10,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Due date',
                        style: TextStyle(
                            color: Colors.grey,
                            fontSize: 17),
                      ),
                      Text(
                        DateFormat('MMM, dd yyyy').format(_currentdate??DateTime.now(),
                        style: TextStyle(
                            color: Colors.blue,
                            fontSize: 17),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: MediaQuery.of(context).copyWith().size.height / 3,
                  child: CupertinoDatePicker(
                    initialDateTime: DateTime.now(),
                    onDateTimeChanged: (DateTime newdate) {
                      print(newdate);
                      setState(() {
                        _currentdate = newdate;
                      });
                    },
                    use24hFormat: true,
                    maximumDate: new DateTime(2050, 12, 30),
                    minimumYear: 2010,
                    maximumYear: 2018,
                    minuteInterval: 1,
                    mode: CupertinoDatePickerMode.dateAndTime,
                  ),
                ),
              ]),

Comments

[Keith DC]

This article by the Flutter Agency should provide what you're looking for. It's not my code, so I won't Answer for it, but it helped me make a nice Cupertino picker like you're asking about. I even added a center button to 'reset' the dates. And instead of a 'Save' button, you could just swap in your 'Due Date'.