IOS Date picker in Flutter

6.4k views Asked by At

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

enter image description here

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,
            ),
          ),

1

There are 1 answers

0
Asquare17 On
  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,
                  ),
                ),
              ]),