As we know, Flutter has its own UI components, along with an engine to render them on both the Android and iOS platforms.
To Display date, time and calendar. Flutter providing us some useful widgets like showDatePicker, DateTime, and DateFormat.
In this post, we are going to learn about the above widget. We'll create a flutter Application and we'll see, how we can use above widget in the Flutter Application for display date and time in a specific format. We'll discuss some use case like UTC date conversion.
So, let's start it and create a Flutter Application.
Creating a new Project
1. Create a new project from File ⇒ New Flutter Project with your development IDE.
2. Now, open pubspec.yaml file and put intl: ^0.15.7.
3. Open main.dart file and edit it. As we have set our theme and change debug banner property of Application.
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_google_map_route/map_screen.dart';
import 'package:map_view/map_view.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
theme: new ThemeData(
primaryColor: const Color(0xFF02BB9F),
primaryColorDark: const Color(0xFF167F67),
accentColor: const Color(0xFF167F67),
),
home: new Home(),
));
}
4. After that create home.dart file and implement app bar in this widget.
home.dart
appBar: new AppBar(
title: new Text(
"Date and Time",
style: new TextStyle(color: Colors.white),
),
actions: <Widget>[
new IconButton(
icon: new Icon(
Icons.date_range,
color: Colors.white,
),
onPressed: () => _showDateTimePicker(),
)
],
),
as you can see above code snippet. We have added a calendar icon. We going to use it for show calendar dialog.
5. Let's define _showDateTimePicker method.
home.dart
_showDateTimePicker() async {
selected = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(1960),
lastDate: new DateTime(2050),
);
setState(() {});
}
the above method will open calendar dialog and you can select a date for display in widgets.
6. After that edit build method of the home screen and create date widgets. Date widget will display a date in the different format. Here, we have created some date and time widgets that will show date and time. When you select a date from the date and time picker dialog.
1. If you want to show date in a specific format. You can achieve it by providing date format in the DateFormat.
home.dart
var dateFormat_1 = new Column(
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
new DateFormat('yyyy-MMMM-dd').format(selected),
style: new TextStyle(
color: Colors.black,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
2. If you want to show date from a text to format. You can achieve it by parsing it.
home.dart
var dateStringParsing = new Column(
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
new DateFormat('yyyy-MM-dd h:m:s')
.format(DateTime.parse("2018-09-15 20:18:04Z")),
style: new TextStyle(
color: Colors.green,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
3. Date and Time in UTC to Local and Local to UTC.
home.dart
var dateUtcLocal = new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
"UTC: " +
new DateFormat('yyyy-MM-dd h:m:s').format(selected.toUtc()),
style: new TextStyle(
color: Colors.blue,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
"Local: " +
new DateFormat('yyyy-MM-dd h:m:s')
.format(selected.toLocal()),
style: new TextStyle(
color: Colors.black26,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
4. If you want to compare two dates. We have the following method to do it.
home.dart
var compareDates = new Column(
children: <Widget>[
new Text(
selected != null
? selected.isBefore(new DateTime.now()) ? ": True" : ": False"
: "",
style: new TextStyle(
color: Colors.red,
fontSize: 20.0
),
),
],
);
var dateComapereFormat = new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
selected != null
? new Text(
new DateFormat('yyyy-MM-dd').format(selected),
style: new TextStyle(
color: Colors.green,
fontSize: 17.0
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
new SizedBox(
width: 10.0,
),
new Text(
"After",
style: new TextStyle(
color: Colors.green,
fontSize: 17.0
),
),
new SizedBox(
width: 10.0,
),
new Text(
new DateFormat('yyyy-MM-dd').format(new DateTime.now()),
style: new TextStyle(
color: Colors.green,
fontSize: 17.0
),
),
new SizedBox(
width: 10.0,
),
compareDates,
],
);
7. In the end, merge all above code snippet. You will see the final home.dart file look like below.
home.dart
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class Home extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<Home> {
DateTime selected;
_showDateTimePicker() async {
selected = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(1960),
lastDate: new DateTime(2050),
);
setState(() {});
}
@override
Widget build(BuildContext context) {
var dateFormat_1 = new Column(
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
new DateFormat('yyyy-MMMM-dd').format(selected),
style: new TextStyle(
color: Colors.black,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
var dateFormat_2 = new Column(
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
new DateFormat('yyyy-MM-dd').format(selected),
style: new TextStyle(
color: Colors.deepPurple,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
var dateStringParsing = new Column(
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
new DateFormat('yyyy-MM-dd h:m:s')
.format(DateTime.parse("2018-09-15 20:18:04Z")),
style: new TextStyle(
color: Colors.green,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
var dateUtcLocal = new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
"UTC: " +
new DateFormat('yyyy-MM-dd h:m:s').format(selected.toUtc()),
style: new TextStyle(
color: Colors.blue,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
new SizedBox(
height: 30.0,
),
selected != null
? new Text(
"Local: " +
new DateFormat('yyyy-MM-dd h:m:s')
.format(selected.toLocal()),
style: new TextStyle(
color: Colors.black26,
fontSize: 20.0,
),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
],
);
var compareDates = new Column(
children: <Widget>[
new Text(
selected != null
? selected.isBefore(new DateTime.now()) ? ": True" : ": False"
: "",
style: new TextStyle(color: Colors.red, fontSize: 20.0),
),
],
);
var dateComapereFormat = new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
selected != null
? new Text(
new DateFormat('yyyy-MM-dd').format(selected),
style: new TextStyle(color: Colors.green, fontSize: 17.0),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
new SizedBox(
width: 10.0,
),
selected != null
? new Text(
"After",
style: new TextStyle(color: Colors.green, fontSize: 17.0),
)
: new SizedBox(
width: 0.0,
height: 0.0,
),
new SizedBox(
width: 10.0,
),
selected != null
? new Text(
new DateFormat('yyyy-MM-dd').format(new DateTime.now()),
style: new TextStyle(color: Colors.green, fontSize: 17.0),
): new SizedBox(
width: 0.0,
height: 0.0,
),
new SizedBox(
width: 10.0,
),
compareDates,
],
);
return new Scaffold(
appBar: new AppBar(
title: new Text(
"Date and Time",
style: new TextStyle(color: Colors.white),
),
actions: <Widget>[
new IconButton(
icon: new Icon(
Icons.date_range,
color: Colors.white,
),
onPressed: () => _showDateTimePicker(),
)
],
),
body: new Padding(
padding: EdgeInsets.all(20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
dateFormat_1,
dateFormat_2,
dateStringParsing,
dateUtcLocal,
new SizedBox(
height: 20.0,
),
dateComapereFormat
],
),
));
}
}
now run this code and will see it's working as below.
If you face any difficulties in writing code. Please feel free to ask it from below comment section
To Display date, time and calendar. Flutter providing us some useful widgets like showDatePicker, DateTime, and DateFormat.
