androiddartflutter

Show running clock on flutter


I wanted to know if there is any way to show a real time clock in dart? Date and time (e.g 11/14/2018 19:34) and the time will continue to run.

Time can be taken from the device itself.


Solution

  • The below uses the intl plugin to format the time into MM/dd/yyyy hh:mm:ss. Make sure to update your pubspec.yaml.

    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:intl/intl.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Time Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Time Demo'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      String _timeString;
    
      @override
      void initState() {
        _timeString = _formatDateTime(DateTime.now());
        Timer.periodic(Duration(seconds: 1), (Timer t) => _getTime());
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Text(_timeString),
          ),
        );
      }
    
      void _getTime() {
        final DateTime now = DateTime.now();
        final String formattedDateTime = _formatDateTime(now);
        setState(() {
          _timeString = formattedDateTime;
        });
      }
    
      String _formatDateTime(DateTime dateTime) {
        return DateFormat('MM/dd/yyyy hh:mm:ss').format(dateTime);
      }
    }