2
votes

Flutter: Changer la couleur du texte CupertinoDatePicker en mode Dark Mode

J'ai CupertinoDatePicker dans mon application à la date et à l'heure sélectionnées avec ce code:

formatColumn(
widget: Consumer<MainCalendarProvider>(
 builder: (_, mcProvider, __) => SizedBox(
 height: sizes.height(context) / 3.5,
child: CupertinoDatePicker(
initialDateTime: result['dateRevision'],
 minimumDate: result['dateRevision'],
use24hFormat: true,
onDateTimeChanged: (dateChange) {
mcProvider.setSelectedDateFromCupertinoDatePicker(  dateChange, );},
                                      ),
                                    ),
                                  ),
                                  title: 'Date Activity'),

Tout fonctionne, jusqu'à ce que j'ajoute le mode sombre dans mon application. En mode sombre, la couleur du texte CupertinoDatePicker est toujours noire, je veux changer cela en blanc. Dans CupertinoDatePicker, ne disposez que de la propriété backgroundcolor. J'essaye déjà de changer en rouge, bleu, vert etc. mais le texte est toujours noir.

Comment puis-je changer cela ?

Merci.

flutter dart cupertinopicker

4 commentaires

Hé mec, comment as-tu réussi à atteindre le mode sombre? Merci!

@AngelTodorov, vous devez enregistrer la valeur du commutateur (vrai / faux) dans le stockage local (dans mon application en utilisant les préférences partagées). vous pouvez ensuite utiliser cette valeur pour basculer la propriété de luminosité dans MaterialApp en fonction de la valeur du commutateur modifiée.

Je n'ai aucun problème à changer la lumière en sombre et vice versa sur toute autre partie de l'application, à l'exception du sélecteur de Cupertino - ma question est donc de savoir comment avez-vous réussi à changer à la fois la couleur d'arrière-plan et la couleur du texte du sélecteur?

mon mauvais, si vous avez déjà changé la luminosité dans MaterialApp, en fonction de mon projet, il change automatiquement le sélecteur d'arrière-plan. Ensuite, pour textColor, vous pouvez suivre la réponse ci-dessous, enveloppez votre sélecteur avec CupertinoTheme

3 Réponses :

2
votes

Je ne sais pas s'il vous manque certains styles dans votre Theme , mais l' une de ces solutions pourrait faire l'affaire!

0 commentaires

0
votes

Le sélecteur de date de Cupertino a une propriété appelée pickerTheme qui accepte DateTimePickerTheme () et vous pouvez spécifier le backgroundColor à l'intérieur.

DatePicker.showDatePicker(
  context,
  initialDateTime: _timePicked,
  dateFormat: _timeFormat,
  pickerMode: DateTimePickerMode.time,
  // show TimePicker
  pickerTheme: DateTimePickerTheme(
    showTitle: true,
    confirm: Text('Confirm',
        style: TextStyle(color: Colors.red)),
    cancel: Text('Cancel',
        style: TextStyle(color: Colors.cyan)),
    backgroundColor:
    Theme.of(context).brightness == Brightness.light
        ? Colors.white
        : Colors.grey,
  ),
  onCancel: () {
    debugPrint('onCancel');
  },
  onChange: (dateTime, List<int> index) {
    setState(() {
      _timePicked = dateTime;
    });
  },
  onConfirm: (dateTime, List<int> index) {
    _timePickedValue = DateFormat.jm().format(dateTime);
    state.didChange(_timePickedValue);
    setState(() {
      print(
          'time is $_timePicked $_timePickedValue $_timePickedFormatted');
    });
  },
),

Voici l'exemple de code complet:

pickerTheme: DateTimePickerTheme(
                    showTitle: true,
                    confirm: Text('Confirm',
                        style: TextStyle(color: Colors.red)),
                    cancel: Text('Cancel',
                        style: TextStyle(color: Colors.cyan)),
                    backgroundColor:
                    Theme.of(context).brightness == Brightness.light
                        ? Colors.white
                        : Colors.grey,
                  ),

0 commentaires

1
votes

Je suppose que CupertinoTheme n'est pas remplacé par le Theme normal, voici comment appliquer le mode sombre pour CupertinoDatePicker :

CupertinoTheme(
    data: CupertinoThemeData(
        brightness: Brightness.dark,
     ),
     child: CupertinoDatePicker(
          ...

0 commentaires