Flutter 18 - Download and Resize an Image Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian welcome to our
eighteenth flutter tutorial we're going
to hopefully today wrap up our dart
conversation and then move into flutter
in the next tutorial the reason why I
want to do this one is it kind of goes
through a overview of libraries and how
to use them which we've talked about a
little bit but not really in depth so if
you kind of just poke around dart you'll
find that there is a pub dartlang.org
and you get to it by going to libraries
and then you can actually view the tour
of libraries how to create packages how
to you know commonly use libraries which
I highly recommend you look at but
you'll see that pub is a tool for
managing directors and we've talked
about that before that we've even talked
about Pop Tart Lang when we go out there
you can search for just about anything I
mean if you've thought about it it's
already out there which is just nuts
because flutter itself is an alpha darts
been out for a while but just about
anything you can think of and back to
the commonly used you can see they've
got a wrapper for firebase HTTP
engineering internationalization I can
never say that right logging I mean
we've been over some of these before so
what I want to do today is really go
over how to really integrate those into
your project we haven't really covered
that so if you're out there you can
search for HTTP or image and I've got
both pages up really we're just going to
work with these two what we're going to
do is we're going to download an image
and actually resize it and we're just
going to show just how dead simple this
is in another languages this is a total
nightmare of a project your boss as well
you know we want to download this image
and resize it you're thinking I gotta go
find a image library I gotta figure out
how to work with HTTP I've got to you
know do the get and the put and all that
no it's dead simple so let's just jump
right into this and we're gonna make a
console application in Dart and one call
this downloader
alright and this will load our project
and load all the dependencies and
calculate the meaning of life sometimes
I really want the hood with that thing
all right so one thing we really haven't
talked about is when you open a project
it opens these three files for you
automatically it opens this file which
is your code file out in your Lib this
little guy it opens the main file which
we've worked with many many times which
is that guy and then this pub spec yeah
Mille
notice how in ml there is a dev
dependencies that's what we're really
going to be working with here so let's
just kill that and we're going to get
this and get that out of there now let's
flip back to use anything that we find
out in the dart package is like we just
search for HTTP you see that's how I got
to it right there once you get to the
page you can do the readme file you can
see who the author is the HTTP package
was actually done by the dart team
itself and it's got some example code on
how to use it now not all of these are
created equal
meaning you will find packages that have
just absolutely zero documentation so in
that case you would reach out to the
author and say hey how do I use this
thing this is pretty straightforward and
it works with streams so under the hood
there's a lot going on but to use it
it's dead simple what you always want to
look at is how to install it depend on
it so you open the dependencies I'm
sorry you open the yamo file copy this
little bit here and then put it in the
dependencies so we're going to do that
and we're gonna do the same thing with
image we're going to go to installing
gonna grab this and we're just gonna put
that in there so save that yamo file
there are really two ways of doing this
but the easy way is just flip over to
main dot dart and you can see how hey
pub spec has been edited this file right
here that we just did what do you want
to do do you want to upgrade get ignore
well we want to get because we don't
actually have
those yet you can see there's our pub
file or a pub folder right here the
little dot denotes that it's a hidden
folder so we're gonna get dependencies
and that may take it a second depending
on your download speeds all right once
we're done you should see that the
little indicator has gone away and if we
run through here I think we may actually
see them
there's HTTP right there I'm not seeing
image and wondering where that went
hmm maybe I'm wrong but I'm pretty sure
that's where it is that's eleven three
sixteen there it is oh there it is right
here
image doop now I feel very stupid that's
so that's where they end up going is
under external libraries and they get
bundled with your dart package here so
we're gonna kill that go in here now we
want to actually use these things right
so many times it's very simple very
easily documented is right under here
they tell you how to do a pub get you
can do a flutter packages get this is
all command-line work that we didn't
have to do and then you can import it
right here just by copying and pasting
so we're gonna copy that for the image
go back out here and we're going to copy
that for our HTTP now if you have no
idea what HTTP is it's hypertext
Transfer Protocol it's basically how you
communicate on the web when you open a
browser and you go to a web page it's
actually talking a language called HTTP
it's a protocol so we also want dart IO
we need to set a few things up here so
what we're going to do is we're going to
say void download the premise here being
that we are going to download something
and we are going to resize it so what we
need to do is actually set up our
variables string URL and because I just
am dead lazy and I do not want to type
that whole thing out BAM we're just
going to do this if you're wondering
what it is it's just the hot reload gif
this guy so we're going to download this
and resize it and then we're going to
say
all right so now I need a file name
let's just grab this see where I'm at on
my virtual machine here I probably
should have known where that was but so
we got that directory and we're just
gonna say test dot gif and then we're
going to say preview gif so we've got
our variables set up now we're just
going to simply call the function
yeah see if we would have named that two
paths instead of file it would have just
done it for us automatically all right
so a lot of typing so far not really
let's actually make the magic happen as
they say so we're going to say yeah I
missed the step that's why that's not
working we want to do this as HTTP so if
you're wondering what I'm doing here is
we want to use the image package but we
don't want to import it as a variable we
just want to actually use it whereas the
HTTP package we want to actually import
this and create a variable I'm just kind
of showing two different ways of doing
this here that way we can just call HTTP
dot and bang we've got an instance of
that variable already we're going to say
read bytes and you notice how we've got
some parameters here and it looks really
nasty and ugly but really you don't have
to mess with that too much we're just
going to say the URL which is our
variable so it's going to take that URL
go out there and it's going to do the
HTTP protocol in the background it's
going to read it as bytes and it's going
to return a variable we're calling data
and when yeah blah then we need to do a
then on the data itself what's really
going on here is well you guessed it
we're working with an asynchronous
function whoops that didn't work as
planned there we go kind of that's a
little better
those always trip me up I'm still not
used to those for whatever reason they
just mess me all up so what we've got so
far is we're going out we're reading the
URL as a byte stream and then once it's
done we've got the data itself my
pression call that data let's call this
mmm what should we call this F data why
not that way it's not super confusing
what we're doing here then we're going
to say file F equal new file from path
so then once we actually have the file
we're going to once we have the data
we're going to open a file and we are
going to actually dump that data down to
the desk and we're going to say random
access file and we've done this before
as far as opening the file and what we
want to do here is we want to open sync
because we don't want to mess around
with any of the asynchronous stuff just
because I'm being a little lazy this
morning and we want to just write to
that file and here we want to do what's
called right from sync and you notice
how it's taking a templated list using
its now really what that is is that is
our actual byte stream so we're going to
do that and we're gonna say F data
actually we could just call that buffer
or probably easier why didn't I think of
that genius yeah these dart developers
are just awesome alright so we're going
to flush sync and then we are going to
close sync that way we've got our
synchronous code in there we don't have
to worry about any weird timing issues
that are going to pop up due to any
synchronous calls then we want to
actually resize the image so let's
actually let's put some commenting in
here
all right so now that we've actually got
the file down to the disk what we want
to do is we want to actually resize it
and here we're going to use the image
library so there's image actually called
image library image package
I think the two terms are kind of
interchangeable and we want to actually
decode image and we could actually take
that buffer you see how it is a list
into but what I want to do is I want to
actually grab the file so we're gonna
say new file
and we want read as bytes sync so really
we're just going to say hey the image
decode the image mean it's gonna read in
the raw bytes and then it's going to
decode that because every image has a
certain codec it's not really a codec
it's called an encoding you know the
difference between a bitmap or gif or
JPEG or something like that is the
encoding that it actually uses so it's
going to decode that image by using the
bytes that we're reading from the actual
file on the disk sound confusing now you
know why this tutorial gets a little
nuts in other languages alright so now
that we've actually got the image in
memory we want to actually resize it
actually I should say load the image now
we're going to resize the image all
right so we're going to say image
thumbnail and we want to copy resize and
we're going to take the actual image and
we want this to be 200 pixels
then once we're done we want to save the
thumbnail out to the desk so we're gonna
say and we want to do right by it's a
sink
and we want to actually do this as a PNG
not a gif because why not but you can
see how you can get code as a gif gif
animation JPEG TGA you can do a named
image type things like that so there's a
lot of power in this little little
package here so we're gonna code this as
a PNG alright so that is a lot of typing
let's see if this actually works
you notice how right now we've got
absolutely nothing out in our folder
except for a few other folders and the
video that I'm currently recording we're
going to download that file and encode
it you can see process finished exit
code 0 and you can see how there is our
test yeah that is not a gif file that's
why let's rename that to a PNG okay just
simply because I had the name wrong
there his heart are encoded here to kind
of solidify that this actually does work
we're going to leave all this nonsense
and we're going to actually fix this
because remember in the very end I
change it to a PNG instead of a gif so
what we're doing is we're downloading
the gif
putting it on the disc and then we're
changing the size and changing the
encoding sorry I kind of confused you a
little bit but I wanted to do both just
to show that it could and dennis is just
gonna work nothing up my sleeve ladies
and gentlemen and bam you see it's
actually writing it out to disk and when
it's done which it is you can see here
is the full sized hmm that's not working
for some reason
hmm it is there trust me there is our
thumbnail what why this one isn't
working
hmm I don't have to figure that out oh
there it goes I was just impatient it
was still loading so you notice how this
is animated whereas the actual preview
is not animated
that is part of dude to the part in part
due to the encoding which is right here
in code PNG so let's see if we can go in
code and I'm not sure how that works but
you could do in code gif animation and
then you would have to do the animation
part I'm not sure how to do that to be
brutally honest it's kind of out of the
scope of this tutorial but just wanted
you to be aware that that could happen
who so that is a pretty complex little
application in a very small package I'm
really impressed by how dart packages
work and how everything just kind of
fits together and I wanted to kind of do
this tutorial before we you know just
headfirst into flutter to show that you
can get this level of complexity in a
very small simple to easy-to-use package
so if it seemed a little bit confusing
it's because it's kind of a confusing
topic and there's a lot of information
that we're skipping over like we haven't
really touched on encoding and decoding
we haven't touched on HTTP GET input and
delete and all that stuff we also really
didn't talk a whole lot about the real
under the hood differences between these
image formats but you can see now how to
actually download a file off the
Internet and then work with it you'll be
seeing the image package a lot of
talking I think I'm spent that's all for
this tutorial I hope you found this
educational and entertaining and thank
you for watching oh and be sure to visit
my website void realms comm for the
source code for this and other tutorials