Format Dates in Flutter - GeeksforGeeks

15 Oct, 2021
The Dart in-built method, for formatting, dates in Flutter according to the requirements is very limited and restrictive. While dealing with dates it should be in human-readable format but unfortunately, there’s no way of formatting dates in flutter unless you make use of a third-party package.
In this article, we will look into one such package known as the intl package.  
Add the following dependencies to your pubspec.yaml file, you can find the latest dependencies here.
dependencies:
  intl: ^0.17.0
You can also get the latest intl library using terminal easily: 
flutter pub add intl
That’s it now import intl package in your Dart code:
import 'package:intl/intl.dart';
Still, if you face any error using intl, simply use the following command:
flutter pub get
Now let’s take a look at the below example.
Example:
In the below code we will not be using the intl package for formatting. Also, take a look at the output of the below code.
Dart
import 'package:flutter/material.dart'; void main() {  runApp(dateDemo());} class dateDemo extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(             // browser tab title      title: "Geeksforgeeks",             // Body      home: Scaffold(                     // AppBar          appBar: AppBar(                         // AppBar color            backgroundColor: Colors.green.shade900,                         // AppBar title            title: Text("Geeksforgeeks"),                    ),                   // Container or Wrapper          body: Container(                                    margin: EdgeInsets.fromLTRB(95, 80, 0, 0),                         // printing text on screen            child: Text(                                                       // Formatted Date              // Builtin format / without formatting              DateTime.now().toString(),                      style: TextStyle(                                   // Styling text                  fontWeight: FontWeight.bold, fontSize: 30),            ),          )),    );  }}
Output:
Dart built-in Format
Now let’s make use of the intl package for formatting the date.
Dart
import 'package:flutter/material.dart';import 'package:intl/intl.dart'; void main() {  runApp(dateDemo());} class dateDemo extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(             // browser tab title      title: "Geeksforgeeks",               // Body      home: Scaffold(                      // AppBar          appBar: AppBar(                          // AppBar color            backgroundColor: Colors.green.shade900,                         // AppBar title            title: Text("Geeksforgeeks"),                    ),                   // Container or Wrapper          body: Container(                                    margin: EdgeInsets.fromLTRB(95, 80, 0, 0),                         // printing text on screen            child: Text(                             // Formatted Date              DateFormat.yMMMEd()                               // displaying formatted date              .format(DateTime.now()),                    style: TextStyle(                                 // Styling text                fontWeight: FontWeight.bold, fontSize: 30),            ),          )),    );  }}
  
Output:
 
Formatted Date
 
DateFormat class in intl provides a lot of functions to format dates accordingly as shown:
 
 
Example:
 
Dart
import 'package:flutter/material.dart';import 'package:intl/intl.dart'; void main() {  runApp(dateDemo());} class dateDemo extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: "Date-Demo",      home: Scaffold(          appBar: AppBar(                         // AppBar            backgroundColor: Colors.green.shade900,                         // AppBar title            title: Text("Geeksforgeeks"),          ),          body: Container(                          // Container/Wrapper            width: double.infinity,            child:                Column(                                      // use Column for more Text()                  mainAxisAlignment: MainAxisAlignment.center,             children: [              Text(                                 // Day,Month Date,Year                DateFormat.yMMMEd().format(DateTime.now()),                 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                  // Day,Month/Date in Numbers                DateFormat.MEd().format(DateTime.now()),                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                 // DayName,MonthName Date                DateFormat.MMMMEEEEd().format(DateTime.now()),                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                 // DayName,MonthName Date,Year                DateFormat.yMMMMEEEEd().format(DateTime.now()),                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                  // Full DayName only                DateFormat.EEEE().format(DateTime.now()),                   style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                 // Short DayName                DateFormat.E().format(DateTime.now()),                       style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                  // Month-Number                DateFormat.M().format(DateTime.now()),                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                 // short MonthName                DateFormat.MMM().format(DateTime.now()),                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                 // full MonthName                DateFormat.LLLL().format(DateTime.now()),                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),              Text(                                 // Current Time only                DateFormat.j().format(DateTime.now()),                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),              ),            ]),          )),    );  }}
  
Output:
 
More DateFormat functions
 
The intl is a library with lots of features so don’t end up here and explore more from their docs. 
 
simmytarika5
Blogathon-2021
Flutter
Flutter-widgets
Android
Blogathon
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
How to Call or Consume External API in Spring Boot?
How to Create a Table With Multiple Foreign Keys in SQL?
Re-rendering Components in ReactJS
Python NOT EQUAL operator
SQL Query to Insert Multiple Rows