How to Display Current DateTime in Flutter

Hello Guys How are you all? Hope you all are fine. Today We are going to learn How to Display Current DateTime in Flutter?

Many Times We have to display Current Date time with date, month, year, hours, minutes and second, with real time clock in flutter. in very easy way we are going to learn in this tutorial a=here. so without wasting your time lets start this tutorial.

How to Display Current DateTime in Flutter?

• First of All Import material.dart, async, and intl Package in your main.dart file.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

• Then, Create void main and Define MyApp in your runApp.

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

• Now, Create a class named MyApp extends with a Stateless widget. This is our main View class. and define

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {

  }
}

• Then, After making Scaffold in MyApp Widget. The scaffold is the Base of every flutter apps, Scaffold provides app bar, background color, drawer, body, bottom sheet, etc.
• We need a center widget in our body so add the Center widget in the body.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Display Current DateTime - Fluttercorner'),
        ),
        body: Center(),
      ),
    );
  }
}

• Now Define DateTime String name that you want to display.

  String _timeString;

• after that, make method named _getTime and use DateTime.now().
• and set _timeString in setState as like below.

  void _getTime() {
    final String formattedDateTime =
        DateFormat('yyyy-MM-dd \n kk:mm:ss').format(DateTime.now()).toString();
    setState(() {
      _timeString = formattedDateTime;
    });
  }

• Add _getTime method in initState Same like below.

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer.periodic(Duration(seconds: 1), (Timer t) => _getTime());
  }

• Here Timer.periodic has Duration property that will trigger _getTime method every second. So You will get Every second time in your display.
• Here Is my main.dart full sourceCode for batter understanding.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _timeString;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer.periodic(Duration(seconds: 1), (Timer t) => _getTime());
  }

  void _getTime() {
    final String formattedDateTime =
        DateFormat('yyyy-MM-dd \n kk:mm:ss').format(DateTime.now()).toString();
    setState(() {
      _timeString = formattedDateTime;
      print(_timeString);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Display Current DateTime - Fluttercorner'),
        ),
        body: Center(
          child: Text(
            _timeString.toString(),
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 40,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

Faq

Summery

So Guys That’s It For How to Display Current DateTime in Flutter. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Check Out Below Tutorials

• How to use Conditional statement in widget in flutter?
• [Solved] Flutter: How to fix “A RenderFlex overflowed by pixels ” error?
• Also Read How to make a blur Background Image effect in Flutter using BackdropFilter.
• How to use Hexadecimal HEX Color Code String in Flutter Dart ?
• How to Add Borders to a Widget In Flutter ?