Change the selected color in the material library YearPicker in Flutter

99 views Asked by At

I want to change Selected color for Yearpicker

Without any changes.

I want to change selected color to green In simple Date picker there is Build method available for change in theme but For Yearpicker i could not find any way.

return AlertDialog(
      title: const Text("Select Year"),
      content: SizedBox(

        width: 300,
        height: 300,
        child: YearPicker(
          firstDate: DateTime(DateTime.now().year - 23, 1),
          lastDate: DateTime(DateTime.now().year),
          initialDate: DateTime.now(),
          selectedDate: selectedDate,
          onChanged: (DateTime dateTime) {
            Navigator.pop(context);
          },
        ),
      ),
    );
2

There are 2 answers

0
Ali AlYousef On BEST ANSWER

By wrapping it with a Theme Widget

             return AlertDialog(
            title: const Text("Select Year"),
            content: SizedBox(
              width: 300,
              height: 300,
              child: Theme(
                data: ThemeData.light().copyWith(
                  colorScheme: ColorScheme.light(
                    primary: Colors
                        .green, // This changes the color of the year picker
                  ),
                ),
                child: YearPicker(
                  firstDate: DateTime(DateTime.now().year - 23, 1),
                  lastDate: DateTime(DateTime.now().year),
                  initialDate: DateTime.now(),
                  selectedDate: selectedDate,
                  onChanged: (DateTime dateTime) {
                    Navigator.pop(context);
                  },
                ),
              ),
            ),
          )
1
MrShakila On

You can change the color like this

floatingActionButton: new Theme(
    data: Theme.of(context).copyWith(
          primaryColor: Colors.amber,
        ),
    child: new Builder(
      builder: (context) => new FloatingActionButton(
            child: new Icon(Icons.date_range),
            onPressed: () => showDatePicker(
                  context: context,
                  initialDate: new DateTime.now(),
                  firstDate:
                      new DateTime.now().subtract(new Duration(days: 30)),
                  lastDate: new DateTime.now().add(new Duration(days: 30)),
                ),
          ),
    ),
  ),