How to auto-update date and time dynamically

Question

I have a DateTime object that has been formatted to a string to show only the time. What should I do so that the time auto-updates. Any help would be really appreciated.

Widget build(BuildContext context) {
    String formattedTime = DateFormat('kk:mm').format(DateTime.now());
    String hour = DateFormat('a').format(DateTime.now());
return Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Container(
        child: Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(formattedTime,
                  style: GoogleFonts.lato(
                      fontSize: 80.0,
                      color: Colors.blue,
                      fontStyle: FontStyle.normal,
                      letterSpacing: 5.0)),
              Padding(
                padding: const EdgeInsets.only(top: 41.0, left: 10.0),
                child: Text(
                  hour,
                  style: GoogleFonts.lato(
                    color: Colors.blue,
                    fontSize: 30.0,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);
}

Solution 1

Supposing that you don't need to display milliseconds, you can simply add a Timer to the state of your widget that triggers every 500ms and pass it a function that alters the String in which you store the formatted time. Also, if you want it to work, you have to move the two Strings out of the build method and put them as properties of your stateful widget.

I found some time and edited your code

class Clock extends StatefulWidget {
  const Clock({Key? key}) : super(key: key);

  @override
  _ClockState createState() => _ClockState();
}

class _ClockState extends State<Clock> {
  String formattedTime = DateFormat('kk:mm').format(DateTime.now());
  String hour = DateFormat('a').format(DateTime.now());
  late Timer _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(milliseconds: 500), (timer) => _update());
  }

  void _update() {
    setState(() {
      formattedTime = DateFormat('kk:mm').format(DateTime.now());
      hour = DateFormat('a').format(DateTime.now());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(formattedTime, style: GoogleFonts.lato(fontSize: 80.0, color: Colors.blue, fontStyle: FontStyle.normal, letterSpacing: 5.0)),
                  Padding(
                    padding: const EdgeInsets.only(top: 41.0, left: 10.0),
                    child: Text(
                      hour,
                      style: GoogleFonts.lato(
                        color: Colors.blue,
                        fontSize: 30.0,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Solution 2

Using timer.period with a delay of 1 minute may solve your problem. Paste this code snippet above your build method.

@override
  void initState() {
    Timer.periodic(Duration(minutes: 1), (timer) {
      setState(() {
        formattedTime = DateFormat('kk:mm').format(DateTime.now());
        hour = DateFormat('a').format(DateTime.now());
      });
    });
    super.initState();
  }