CupertinoPicker textStyle flutter

Question

I'm new to flutter and I need help.

I'm creating an app where the user can select data through a CupertinoPicker.

The picker works fine, but I would like to change its style.

Currently the style is like that, but I want it to be like that.

Unfortunately I can't understand how to do it, I read this but I can't do it, I would like to change the color and size of the selected element, the color of the elements not selected and the color of the lines.

But I do not know how I can do it.

Can anyone help me understand please?

The code is this :

Container(

          ˙child: _showCupertinoPicker(
           context,
           book[currentPage].orari.map((orario) {
           return Center(
                     child: Text(orario,
                     style: TextStyle(color: CupertinoColors.activeBlue

                         )));
           }).toList())),
.
.
.
.

_showCupertinoPicker(BuildContext context, List<Widget> orariWidget) {
  return CupertinoPicker(
    backgroundColor: Colors.white,
    onSelectedItemChanged: (value) {},
    itemExtent: 40.0,
    children: orariWidget,
  );
}

kashlo · Accepted Answer · 2022-01-26T21:36:07.767

11

Its possible to style CupertinoPicker and CupertinoDatePicker using theme like this:

return MaterialApp(
  theme: ThemeData(
    cupertinoOverrideTheme: CupertinoThemeData(
      textTheme: CupertinoTextThemeData(
        dateTimePickerTextStyle: TextStyle(color: Colors.blue, fontSize: 16),
        pickerTextStyle: TextStyle(color: Colors.blue, fontSize: 12),
      )
    )
  )
)

edited Jan 26 '22 at 21:36

answered Dec 18 '19 at 22:35

kashlo

2,313
1
28
39

score 6 · Answer 2 · edited May 14 '20 at 14:56

6

Wrap the CupertinoPicker() with another widget known as CupertinoTheme() as

CupertinoTheme(
     data: CupertinoThemeData(
         textTheme: CupertinoTextThemeData(
             pickerTextStyle: TextStyle(//Your normal TextStyling)
         ),
     ),
     child:CupertinoPicker(//Your Cupertino Picker)
)

edited May 14 '20 at 14:56

Gligor Atanasovski

73
1
7

answered May 12 '20 at 17:12

Subhadeep Saha

85
1
7

Better example than the chosen answer. – Gligor Atanasovski May 14 '20 at 10:42
dateTimePickerTextStyle should be used instead of pickerTextStyle. Here is a scenario where pickerTextStyle doesn't work: https://stackoverflow.com/questions/67579890/changing-the-text-color-of-cupertino-date-picker – Son Nguyen Aug 12 '21 at 11:42

score 3 · Answer 3 · answered Sep 16 '19 at 13:22

I know this solution is verbose but it works:

final cupertinoTheme = CupertinoTheme.of(context);
// Do your customising here:
final pickerTextStyle =
    cupertinoTheme.textTheme.pickerTextStyle.copyWith(fontSize: 18.0, color: Colors.cyan);
final textTheme =
    cupertinoTheme.textTheme.copyWith(pickerTextStyle: pickerTextStyle);
return CupertinoTheme(
  data: cupertinoTheme.copyWith(textTheme: textTheme),
  child: yourPickerGoesHere,
);

CupertinoPicker takes text style from CupertinoTheme.of(context).textTheme.pickerTextStyle. All we do here is to update pickerTextStyle with our settings.

Not sure who downvoted this or why, this is the only answer that worked for me. The other answers give me a scrunched-in date picker where the month, year, and date overlap. I still had to wrap the date picker in a SizedBox with desired height and a width at least the size of the parent widget. Also, had to use dateTimePickerTextStyle instead of pickerTextStyle — kilkfoe, Sep 20 '21 at 10:23

CupertinoPicker textStyle flutter

3 Answers3