Question 76614 in Flutter Question posted in
The official Flutter documentation can be found here.

how to show time in date time picker in flutter..?

suppose you have a API and a key-value for this API is

"time": "22:05"

i want to show this time in a in a field and when i press the field the date time picker is pop up with time value and i change the time like 22:40 and the 22:05 will replace to 22:40

I have try this..

time = TimeOfDay.now();


final String hour = time.hour.toString().padLeft(2, '0');
final String minute = time.minute.toString().padLeft(2, '0');

 GestureDetector(
          onTap: () async {
            TimeOfDay? pickTime = await showTimePicker(
              context: context,
              initialTime: time,
            );
            if (pickTime != null) {
              setState(() => time = pickTime);
            }

It always show my current system time

Tags:

2

Answers


  1. 0

    Here is a working example:

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({ super.key });

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TimeOfDay? selectedTime;
  @override
  Widget build(BuildContext context) {
    return 
      GestureDetector(
        onTap : () async {
          TimeOfDay? newTime = await showTimePicker(
            initialTime: TimeOfDay.now(),
            context: context,
          );
          setState((){
            selectedTime = newTime;
          });
        },
        child: Text(
        selectedTime.toString(),
        style: Theme.of(context).textTheme.headline4,
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    this is my usual way. with TextFormfied. so you can use validator if you need too.

    TextFormField(
  readOnly: true,
  decoration: kInputDecor,
  controller: _ctrl,
  onTap: () async {
    final selectedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (selectedTime != null) {
      final String hour =
          selectedTime.hour.toString().padLeft(2, '0');
      final String minute =
          selectedTime.minute.toString().padLeft(2, '0');

//                   _ctrl.text = selectedTime.format(context);
      _ctrl.text = '${hour} :$minute';
    }
  },
),

    result:

    enter image description here

    demo : https://dartpad.dev/?id=be4ccb0cad0930c9797bb4c2b63cd70e

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search