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 the intl package
Add the following dependencies to your pubspec.yaml file, you can find the latest dependencies here.
dependencies:
flutter:
sdk: flutter
intl: ^0.20.2
- Add using the terminal
You can also get the latest intl library using the terminal easily:
flutter pub add intl- Import it
That's it, now import the 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 getNow 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.
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:
Now let's make use of the intl package for formatting the date.
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: "Geeksforgeeks",
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green.shade900,
foregroundColor: Colors.white,
title: Text("Geeksforgeeks"),
),
body: Center(
child: Text(
// Date format
DateFormat.yMMMEd().format(DateTime.now()),
style: TextStyle(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:
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",
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green.shade900,
foregroundColor: Colors.white,
title: Text("Geeksforgeeks"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Day,Month Date,Year
Text(
DateFormat.yMMMEd().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// Day,Month/Date in Numbers
Text(
DateFormat.MEd().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// DayName,MonthName Date
Text(
DateFormat.MMMMEEEEd().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// DayName,MonthName Date,Year
Text(
DateFormat.yMMMMEEEEd().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// Full DayName only
Text(
DateFormat.EEEE().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// Short DayName
Text(
DateFormat.E().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// Month-Number
Text(
DateFormat.M().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// short MonthName
Text(
DateFormat.MMM().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// full MonthName
Text(
DateFormat.LLLL().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
// Current Time only
Text(
DateFormat.j().format(DateTime.now()),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
],
),
),
),
);
}
}
Output:
