Open In App

Format Dates in Flutter

Improve
Improve
Like Article
Like
Save
Share
Report

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.  

Using intl package:

Add the following dependencies to your pubspec.yaml file, you can find the latest dependencies here.

dependencies:
  intl: ^0.17.0

Add using terminal:

You can also get the latest intl library using terminal easily: 

flutter pub add intl

Import it:

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

More DateFormat Functions:

 

DateFormat class in intl provides a lot of functions to format dates accordingly as shown:

 

                               Use Description Example
DateFormat.yMMMEd().format(date) Day Name ,Month Name ,Date,Year Fri, Sep 3, 2021
DateFormat.MEd().format(date)  Day Name,Month/Date in Numbers Fri , 9/3
DateFormat.MMMMEEEEd().format(date)) DayName,MonthName Date Friday ,September 3
DateFormat.yMMMMEEEEd().format(date)) DayName ,MonthName Date,Year Friday ,September 3,2021
DateFormat.EEEE().format(date) Full DayName only Friday
DateFormat.E().format(date) Short DayName Fri
DateFormat.M().format(date)      Month-Number 9
DateFormat.MMM().format(date) Short MonthName Sep 
DateFormat.LLLL().format(date) Full MonthName September
DateFormat.j().format(date) Current Time only 4 PM

 

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

 



Last Updated : 15 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads