CODEWITHSUNDEEP
flutterdartwidget
aditya kumar
aditya kumar

Reputation: 3023

How to format time in flutter in timePicker

I am trying to implement a time picker in my flutter which display time like this see picture below.

formated time

although I am able to format time like this but problem is it does not display the current time when the widget is initialized. I tried using this. here see my code.

TimeOfDay _currentTime = new TimeOfDay.now();

String timeText = 'Set A Time';
Future<Null> selectTime(BuildContext context) async {
      TimeOfDay selectedTime = await showTimePicker(
        context: context,
        initialTime: _currentTime,
      );

      MaterialLocalizations localizations = MaterialLocalizations.of(context);
      String formattedTime = localizations.formatTimeOfDay(selectedTime,
          alwaysUse24HourFormat: false);

      if (formattedTime != null) {
        setState(() {
          timeText = formattedTime;
        });
      }
    };

Widget Date picker 

class DatePicker extends StatelessWidget {
  DatePicker({
    this.formatedDate,
    this.selectedDate,
  });

  final String formatedDate;
  final Function selectedDate;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      padding: EdgeInsets.only(top: 30.0, bottom: 10.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Icon(
            Icons.calendar_today,
            color: Color(kBorderTileColor),
          ),
          SizedBox(
            width: 50.0,
          ),
          Text(
            '$formatedDate',
            style: kInputTextStyle,
          ),
          SizedBox(
            width: 50.0,
          ),
          Text(
            'All Day',
            style: TextStyle(color: Color(kBorderTileColor)),
          ),
        ],
      ),
      onPressed: () {
        selectedDate(context);
      },
    );
  }
}

Upvotes: 5

Views: 6283

Answers (1)

Ahmad Aghazadeh
Ahmad Aghazadeh

Reputation: 17131

Try this source code.

  TimeOfDay _currentTime = new TimeOfDay.now();
  String timeText = 'Set A Time';


  Future<Null> selectTime(BuildContext context) async {
    TimeOfDay selectedTime = await showTimePicker(
      context: context,
      initialTime: _currentTime,
    );

    MaterialLocalizations localizations = MaterialLocalizations.of(context);
    if (selectedTime != null) {
      String formattedTime = localizations.formatTimeOfDay(selectedTime,
          alwaysUse24HourFormat: false);
      if (formattedTime != null) {
        setState(() {
          timeText = formattedTime;
        });
      }
    }
  }

 void setCurrentTime(){
    TimeOfDay selectedTime=new TimeOfDay.now();
      MaterialLocalizations localizations = MaterialLocalizations.of(context);
      String formattedTime = localizations.formatTimeOfDay(selectedTime,
          alwaysUse24HourFormat: false);
      if (formattedTime != null) {
        setState(() {
          timeText = formattedTime;
        });
      }
  }

Call this function in build(BuildContext context) 

 Widget build(BuildContext context) {
    setCurrentTime();
    ...
  }

Upvotes: 6

Related Questions