CODEWITHSUNDEEP
androidiosflutterdartflutter-layout
Jatin Pandey
Jatin Pandey

Reputation: 705

What is the correct way to add time picker in flutter app?

In my app, the user needs to select a time manually for a task, but I do not know what is the correct way to use time picker in flutter app and select the time(of a day) manually by the user.

Upvotes: 9

Views: 29070

Answers (5)

Jatin Pandey
Jatin Pandey

Reputation: 705

First declare this variable at the class level,

TimeOfDay selectedTime = TimeOfDay.now();

and then call this method:

Future<void> _selectTime(BuildContext context) async {
final TimeOfDay? pickedTime = await showTimePicker(
    context: context,
    initialTime: selectedTime, builder: (BuildContext context, Widget child) {
       return MediaQuery(
         data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child,
      );});

if (pickedTime != null && pickedTime != selectedTime )
  setState(() {
    selectedTime = pickedTime;
  });
}

Upvotes: 16

Abdelrahman Mohamed Elakliby
Abdelrahman Mohamed Elakliby

Reputation: 589

with null safety

TimeOfDay selectedTime = TimeOfDay.now();

the function

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? picked_s = await showTimePicker(
        context: context,
        initialTime: selectedTime, builder: (BuildContext context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child!,
      );});
    if (picked_s != null && picked_s != selectedTime )
      setState(() {
        selectedTime = picked_s;
      });
  }

call

 _selectTime(context);

Upvotes: 2

Zotov
Zotov

Reputation: 81

This code will show a dialog containing a material design time picker.

Note that a showTimePicker is Future. So, you need to use await to get a time.

TimeOfDay initialTime = TimeOfDay.now();
TimeOfDay pickedTime = await showTimePicker(
    context: context,
    initialTime: initialTime,
);

Material Design Time Picker Image

Also, you could customize your time picker using builder property inside the showTimePicker

TimeOfDay initialTime = TimeOfDay.now();
TimeOfDay pickedTime = await showTimePicker(
    context: context,
    initialTime: initialTime,
    builder: (BuildContext context, Widget child) {
      return Directionality(
        textDirection: TextDirection.rtl,
        child: child,
      );
    },
);

To learn more about it, see the official documentation.

Upvotes: 7

Benson Arafat
Benson Arafat

Reputation: 499

You can use this for timepicker in flutter

Future<void> _selectTime(BuildContext context) async {
 TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(), builder: (BuildContext context, Widget child) {
       return MediaQuery(
         data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child,
      );});

if (picked != null && picked != TimeOfDay.now() )

}

Upvotes: 0

hosein moradi
hosein moradi

Reputation: 492

you can use from flutter_datetime_picker plugin :

FlatButton(
onPressed: () {
    DatePicker.showDatePicker(context,
                          showTitleActions: true,
                          minTime: DateTime(2018, 3, 5),
                          maxTime: DateTime(2019, 6, 7), onChanged: (date) {
                        print('change $date');
                      }, onConfirm: (date) {
                        print('confirm $date');
                      }, currentTime: DateTime.now(), locale: LocaleType.zh);
},
child: Text(
    'show date time picker (Chinese)',
    style: TextStyle(color: Colors.blue),
));


 class CustomPicker extends CommonPickerModel {
   String digits(int value, int length) {
   return '$value'.padLeft(length, "0");
 }

   CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
     this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
   this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
   }

     @override
     String leftStringAtIndex(int index) {
       if (index >= 0 && index < 24) {
       return this.digits(index, 2);
      } else {
         return null;
       }
     }

    @override
    String middleStringAtIndex(int index) {
     if (index >= 0 && index < 60) {
       return this.digits(index, 2);
      } else {
       return null;
      }
    }

   @override
   String rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
     }
   }

    @override
   String leftDivider() {
     return "|";
   }

    @override
    String rightDivider() {
      return "|";
    }

    @override
     List<int> layoutProportions() {
       return [1, 2, 1];
     }

     @override
     DateTime finalTime() {
         return currentTime.isUtc
           ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
           this.currentLeftIndex(), this.currentMiddleIndex(), 
          this.currentRightIndex())
          : DateTime(currentTime.year, currentTime.month, currentTime.day, 
        this.currentLeftIndex(),
          this.currentMiddleIndex(), this.currentRightIndex());
             }
         }

Upvotes: 0

Related Questions