CODEWITHSUNDEEP
flutterflutter-layoutflutter-cupertinocupertinopicker
Simone
Simone

Reputation: 85

CupertinoPicker textStyle flutter

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

Upvotes: 6

Views: 6806

Answers (3)

kashlo
kashlo

Reputation: 2627

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

Upvotes: 11

Subhadeep Saha
Subhadeep Saha

Reputation: 85

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

Upvotes: 6

Andrey Gordeev
Andrey Gordeev

Reputation: 32539

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.

Upvotes: 3

Related Questions