All language subtitles for 16. Installing External Packages & Formatting Dates

So string interpolation is a really useful feature and something I will use throughout this course and which

I would recommend using because it can save you some extra code.

Now let's also format the date however and there, instead of just printing it as a string like this

which is relatively ugly, it's certainly human readable but it's not really that beautiful,

instead of using that, I'd be more interested in actually having a nicely formatted date and that can

easily be achieved with the help of an extra package and

that's correct.

There is no built-in feature, neither in Dart nor in Flutter that would make it easy for us to format

this date.

Now obviously, we could always try to do it on our own,

we could write our own code that takes this string and for example only extracts the date part here

at the beginning but writing that code on our own would be pretty cumbersome and thankfully, there is

a package, a third-party package which we can use. If you search for a Dart date format,

you will find this intl package here.

Click on it and you should be taken here to a description of this package here on pub.dev. Now

pub.dev is an important page in the Dart and Flutter universe,

it's a site, a webpage, where you find a lot of packages you can install into your Dart projects and

we will actually use a lot of these packages throughout the course,

for example later also for things like HTTP requests or using Google maps.

So here on pub.dev, we're now on the page of the intl package and intl stands for internationalisation

because this actually is a package that helps us with localizing our app,

we could for example transform strings here to different text for the different locales

we might be targeting, so the different languages we might be targeting but for a start, we can also

use this package to simply transform a date to the English locale but there, to a human readable string

that is nicer than this string we have here.

So for this, we need to install this package and clicking on installing here, you get instructions on

how to add it.

It's super straightforward,

you can just copy that part here, so the package name and the version number and then go to your project

and there to the pubspec.yaml file because the pubspec.yaml file is the file which

in the end manages the the setup of your project and most importantly, the dependencies of your project. So

which other packages can we use in this Dart project here? There, we already have Flutter as a dependency

and below that, on the same level as Flutter, we can add intl and the version number, so what you just

copied.

Now one important note, in .yaml files, indentation is very important, indentation expresses how things

are related. So it's important that you don't add intl here on the same level as dependencies or on

the same level as SDK or one space too far on the right.

So you can hit space twice and you're on the same level as Flutter and it has to be on that level.

Now if you save this file, Flutter should automatically go ahead, thanks to the Flutter and Dart

extensions which you have installed and install that package on your machine and enable it in this

project. Important, the source code for this package will not be stored in this project,

it's stored somewhere else, typically in your user folder but a connection is established in your project

so that you can use this package

and now we can use it here in the main.dart file to output our date here

as more human readable text. For this, let's go back to the package page, you can check out the API reference

here on the right to find the documentation for this package and here, you learned how to use it and

you can configure a lot there because as I explained, you could use this package for actually translating

your app or parts of your app,

things like dates and numbers to different locales but here you'll also find the basic syntax for formatting

a date and in the end, that is what we will use here.

So in the main.dart file where I want to format the date, I first of all have to import this package,

you always have to import something to use its features. So the package name here now is intl and

there you want to import intl.dart. With that import added in the main.dart file,

we can go down there where we have our date string and now here, we can use date format and build an

object with the constructor here.

This is a class that is now made available by the intl package

and on that date format object, you can call format and pass a date into this,

so now not a string but a date. Conveniently tx.date gives us a date,

so let's just get rid of to string and add this and format will then automatically return the string,

that's exactly what we need here.

With that if you save it and you go back to your application, now you see this looks way better,

we get this beautiful string here out of the box, thanks to this format package or to this intl package

and the format method there.

The thing just is I only want the date and you can actually define the pattern of the string that should

be generated.

There are two ways of doing that,

for one you can pass a pattern string

here to date format and now this has its own language for defining these patterns and you can learn

how to define these patterns in the official docs of the intl package which I just showed you a second

ago.

There you can for example enter things like yyyy to indicate that you want to first print the year

and there, you want to print it by including all four digits,

then maybe a dash, then maybe the month and then the day

and there is a difference between capital and lowercase characters

and again the official docs of this intl package and there, the date format functionality

show you all the different patterns you can use and different meanings of the different characters.

So if you would use that here, we for example get a date that is formatted like this,

we have the dash between the year and the month and the day because I added the dash here. We could of

course also use a slash instead,

only the characters here,

so y, m and d, these are special values which are interpreted by the date format,

what you put between these characters is basically up to you,

so now we would have a slash in between.

Well that's one thing,

there also are a lot of preconfigured configurations and these are all made available as special constructors.

So you can also add a dot here after date format to access these special constructors

and there you have tons of constructors as you can tell. Constructors for all kinds of stuff, like for

example here for a year, then a month in a written out form and then a day

and if I use this here, I don't have to add a pattern because this preconfigures a pattern and now

we have this here as a date. And I will go with that,

however feel free to play around with that, choose different patterns, different formats dive into the official

docs and fine tune the date to your requirements and preferences.