Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: How to change color of showTimePicker widget

Tags:

flutter

I would like to change the color of the showTimePicker. Here is my code

                               GestureDetector(
                                  onTap: () {
                                    Future<TimeOfDay> selectedTime =
                                        showTimePicker(
                                      initialTime: TimeOfDay.now(),
                                      context: context,
                                      // ignore: missing_return
                                    ).then((value) {
                                      if (value != null) {
                                       // do something
                                  },
                                  child: Image.asset(
                                    pathToCollectionPhoto,
                                    fit: BoxFit.cover,
                                  ),
                                ),

How can I achieve it?

enter image description here

like image 893
M4trix Dev Avatar asked Nov 13 '19 11:11

M4trix Dev


People also ask

How do you change the color of the time picker in flutter?

Here's how you do it: Step 1: Inside the showDatePicker function, add the builder paramter. Step 2: Inside the builder parameter, return the Theme widget. Step 3: Inside the Theme widget, add the data property and define the new theme by specifying the colorScheme for the date picker dialog.

How do you customize time picker in flutter?

You can customise the TimePicker widget by overriding the TimePickerThemeData . This can be done one of two ways: By providing a custom TimePickerThemeData to the showTimePicker method. By providing a custom Theme to the showTimePicker method.

How do you get AM PM from TimePicker in flutter?

just use format() method to get AM,PM what you required.


Video Answer


1 Answers

You need to wrap your widget into a Theme and provide theme data as you want.

Example:

Theme(
      data: Theme.of(context).copyWith(
        primaryColor: Colors.cyan, //color you want at header
        buttonTheme: ButtonTheme.of(context).copyWith(
          colorScheme: ColorScheme.light(
            secondary: Colors
                .cyan, // Color you want for action buttons (CANCEL and OK)
          ),
        ),
      ),
      child: Builder(
        builder: (context) => GestureDetector(
          onTap: () async {
            final selectedTime = await showTimePicker(
              context: context,
              initialTime: TimeOfDay.now(),
            );

            if (selectedTime != null) {
              // Do further task
            }
          },
          child: Image.asset(
            pathToCollectionPhoto,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );

like image 180
Milind Mevada Avatar answered Oct 10 '22 14:10

Milind Mevada