4
votes

Flutter Format Heure du jour à partir du sélecteur d'heure

J'essaie de formater l'heure sélectionnée à partir du sélecteur de temps dans mon application Flutter. Je ne sais pas pourquoi mais cela s'avère plus difficile qu'il ne devrait l'être. Le résultat final que j'essaye d'obtenir est l'heure: menuets ou 17h00. Cela s'affichera dans un conteneur de boîte après que l'utilisateur ait choisi l'heure à partir du widget de sélection de temps. J'ai une méthode appelée 'timeFormater ()' qui formatera l'heure sélectionnée mais j'obtiens l'erreur 'flutter: type' TimeOfDay 'n'est pas un sous-type de type' Widget ' lorsque j'exécute mon code. Existe-t-il un moyen / une méthode plus simple de flutter pour formater TimeOfDay ()?

Mon code:

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building DateTimePicker(dirty, dependencies: [_InheritedTheme,
flutter: _LocalizationsScope-[GlobalKey#6c45d]], state: _DateTimePickerState#7eeb8):
flutter: type 'TimeOfDay' is not a subtype of type 'Widget'
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter:   https://github.com/flutter/flutter/issues/new?template=BUG.md
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      _DateTimePickerState.timeFormater (package:rallie_app/utils/custom_date_timer.dart:176:13)
flutter: #1      _DateTimePickerState.timeContainer (package:rallie_app/utils/custom_date_timer.dart:163:20)
flutter: #2      _DateTimePickerState.build (package:rallie_app/utils/custom_date_timer.dart:37:15)
flutter: #3      StatefulElement.build (package:flutter/src/widgets/framework.dart:3830:27)
flutter: #4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3741:15)
flutter: #5      Element.rebuild (package:flutter/src/widgets/framework.dart:3564:5)
flutter: #6      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2277:33)
flutter: #7      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
flutter: #8      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:275:5)
flutter: #9      _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
flutter: #10     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
flutter: #11     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
flutter: #15     _invoke (dart:ui/hooks.dart:209:10)
flutter: #16     _drawFrame (dart:ui/hooks.dart:168:3)
flutter: (elided 3 frames from package dart:async)

Message d'erreur:

      import 'package:flutter/material.dart';
    import 'package:flutter/cupertino.dart';
    import 'package:intl/intl.dart';
    import 'package:auto_size_text/auto_size_text.dart';
    import 'dart:io' show Platform;

    class DateTimePicker extends StatefulWidget {
      @override
      _DateTimePickerState createState() => _DateTimePickerState();
    }

    class _DateTimePickerState extends State<DateTimePicker> {
      DateTime _date = new DateTime.now();
      TimeOfDay _time = new TimeOfDay.now();
      Duration initialtimer = new Duration();
      DateTime _datePicked;
      TimeOfDay _timePicked;


      @override
      void initState() {
       // timeController.addListener(_time);

      }

      @override
      Widget build(BuildContext context) {
        return Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                // mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  dateContainer(),
                  timeContainer()
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  customDatePicker(context),
                  customTimePicker(context)
                ],
              ),
            ],
          ),
        );
      }
 Widget customTimePicker(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 12.0),
      child: FlatButton(
          child: Text('Time', style: TextStyle(
              color: Colors.white
          ),),
          color: Colors.deepOrange,
          onPressed: () => _selectedTime(context)
      ),
    );
  }
 Future<Null> _selectedTime(BuildContext context) async {
    _timePicked = await showTimePicker(
        context: context,
        initialTime: _time);

    if (_timePicked != null) {
      setState(() {
        _time = _timePicked;
      });
    }
  }
 Widget timeContainer() {
    return Container(
      width: 100,
      height: 100,
      child: Padding(
          padding: const EdgeInsets.only(left: 16.0, top: 16.0,bottom: 16.0),
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                width: .5,
                color: Colors.black
              )
            ),
            child: timeFormater(),
          )
      ),
    );
  }

  Widget timeFormater() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 20.0,
        ),
        _timePicked != null
            ? TimeOfDay(hour: _timePicked.hour, minute: _timePicked.minute)
            : SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ],
    );
  }
}


4 commentaires

TimeOfDay n'est pas un Widget comme Text , Container , SizedBox etc. - vous devez renvoyer un Widget partir de votre méthode timeFormater()


Existe-t-il un moyen de formater le TimeOfDay pour afficher l'heure: minutes? Même si je l'ajoute à un widget de texte, cela ne résout toujours pas mon problème si je ne parviens pas à l'afficher correctement


si vous voulez formater TimeOfDay utilisez la méthode format()


Pouvez-vous ajouter plus de précisions, par exemple un exemple de code qui fonctionne. J'ai essayé d'utiliser la méthode TimeOfDayFormat.H_colon_mn mais cela ne formate pas l'heure qui a été sélectionnée à partir du sélecteur de temps


6 Réponses :


-1
votes

Cette question ne concerne pas TimeOfDay - vous essayez simplement d'utiliser la valeur comme un widget. Dans votre code changez ceci

_timePicked != null
        ? Text(TimeOfDay(hour: _timePicked.hour, minute: _timePicked.minute)
            .toString())

à

 _timePicked != null
        ? TimeOfDay(hour: _timePicked.hour, minute: _timePicked.minute)

et cela fonctionnera.


0 commentaires

10
votes

Cela formatera correctement TimeOfDay pour vous:

final localizations = MaterialLocalizations.of(context);
final formattedTimeOfDay = localizations.formatTimeOfDay(timeOfDay);


1 commentaires

Cela semble être la bonne façon d'obtenir la sortie de la chaîne. Cela devrait être une réponse acceptée.



0
votes

Vous pouvez utiliser DatePicker.showTimePicker
    DatePicker.showTimePicker(context,  
            showTitleActions: true,  
                onChanged: (date) {  
                 print('change $date');  
            }, onConfirm: (date) {  
                 print('confirm $date');  
            }, currentTime: DateTime.now(), locale: LocaleType.pt);


0 commentaires

1
votes

C'est ainsi que j'utilise Date Time et TimeOfDay pour séparer leurs valeurs en même temps sur la plate-forme Flutter.

static DateTime _eventdDate = DateTime.now();

static var now =
  TimeOfDay.fromDateTime(DateTime.parse(_eventdDate.toString()));



 String _eventTime = now.toString().substring(10, 15);



Future _pickTime() async {
TimeOfDay timepick = await showTimePicker(
    context: context, initialTime: new TimeOfDay.now());

if (timepick != null) {
  setState(() {
    _eventTime = timepick.toString().substring(10, 15);
  });
} }

Future _pickDate() async {

DateTime datepick = await showDatePicker(
    context: context,
    initialDate: new DateTime.now(),
    firstDate: new DateTime.now().add(Duration(days: -365)),
    lastDate: new DateTime.now().add(Duration(days: 365)));

if (datepick != null) {
  setState(() {
    _eventdDate = datepick;
  });
} }


0 commentaires

2
votes

String time = _timePicked.format (contexte);


2 commentaires

excellente solution .. + 1


Solution très simple! +1. Je me demande simplement comment spécifier le format d'affichage (12h AM / PM vs 24h) avec cette solution par rapport à celle de @bwhite.



0
votes
  String timeValue ='Select Time';
  TimeOfDay selectedTime =TimeOfDay.now();

  Future<Null> _selectTime(BuildContext context) async {
  final TimeOfDay picked_s = await showTimePicker(
    context: context,
    initialTime: selectedTime, builder: (BuildContext context, Widget 
  child) {
       return MediaQuery(
         data: 
       MediaQuery.of(context).copyWith(alwaysUse24HourFormat:false),
        child: child,
      );});

if (picked_s != null && picked_s != selectedTime )
  setState(() {
    selectedTime = picked_s;
    timeValue = picked_s.format(context);   //time convert into string formate
  });}

0 commentaires