Format Dates in Flutter
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: "w3wiki" , // Body home: Scaffold( // AppBar appBar: AppBar( // AppBar color backgroundColor: Colors.green.shade900, // AppBar title title: Text( "w3wiki" ), ), // 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:
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: "w3wiki" , // Body home: Scaffold( // AppBar appBar: AppBar( // AppBar color backgroundColor: Colors.green.shade900, // AppBar title title: Text( "w3wiki" ), ), // 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:
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( "w3wiki" ), ), 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:
The intl is a library with lots of features so don’t end up here and explore more from their docs.