♪ (music) ♪
Hello, I'm Matt from the Flutter Dev. Rel. team.
Today, we're going to be checking out the wacky world
of the custom paint widget.
What exactly is custom paint?
custom paint is a widget that provides you with a canvas
and takes a custom painter to execute paint commands.
In this video we're going to explore the custom paint widget,
and examine how to combine drawing images and shapes
on a canvas.
The example we'll use is that of a photo with faces
that have been identified,
and highlight them by drawing over the image.
To learn more about face detection with Firebase's
check out the companion video in the description below.
Let's take a look at the
Typically, it takes a
The
and this is where the painting magic happens.
Let's focus on
This is where canvas drawing takes place.
Subclassing from
to be overridden--
paint
The
It's given both a
All drawing commands should occur within the bounds
of the given size.
Circles, lines, rectangles and many other shapes
can all be easily drawn on the canvas
with different drawing functions.
You can change the properties of how these shapes are painted
by customizing the
For example,
we can update our code to draw an unfilled circle of thickness 10.
There are a host of different drawing routines available to the
Check out the docs for a complete list.
For something a little more complex
and a whole lot more fun,
here's a
using a combination of
and a little bit of math.
We'll be using this a little later.
We also need to implement
which controls when the
In our example,
our
and so can always return
Now, let's take a look at a more complex example.
Drawing an image to the
First, we're going to need to load an image
in a format that the
Here, we're loading an image as an array of
We can then decode the image
using
and use the result in our
Let's create a
and pass it our decoded image
and coordinates for the faces detected in the image,
which are represented here by a
In our
we can paint the image using
Now, we can draw an unfilled rectangle
around each face,
and we should update the
to repaint if the image or list of faces changes.
We
from a
Well, not quite.
Remember when I said that drawing outside the boundaries
of the size given to the
When we draw the image on the
the image draws to its full dimensions,
which may well be outside the given
Flutter
but we can assume that this isn't going to be good.
So how can we make sure
that the
Luckily for us, there's a widget
that lets us explicitly specify its size,
and the size of its
We can wrap our
in a
Our image will now be drawn correctly,
but we have a new problem.
Our
so it won't play nicely with widgets
that want to constrain its dimensions in some way.
For example,
placing our
and trying to size it.
That's not going to work.
We can fix this by using yet another widget.
This time, a
which will fit and scale the
while allowing other widget to constrain its dimensions.
So we end up with a combination of
and
and our modified image and freshly highlighted faces
render elegantly inside our
This is a great example of using a simple combination of widgets
to achieve some pretty sophisticated behavior,
which is a testament
to the power and flexibility of
It's easy to work in any
you'd like over the image,
such as using our smiley face
to make sure everyone's super happy in our photos.
Hopefully, this has given you a taste of painting shapes and images
to a
for more info, check out
♪ (music) ♪
Hey, you, yes you.
If you enjoyed that video,
you should come check out some of our other videos
or subscribe to the
We've a lot of fun things to show you.
Flutter
We'll see you over there.