Custom painting in Flutter – Flutter In Focus

Custom painting in Flutter – Flutter In Focus

♪ (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’sML kitandFlutter, check out the companion video
in the description below. Let’s take a look
at theCustomPaintwidget. Typically, it takes apainter
and achildin itsconstructor. Thepainteris an instance
of theCustomPainter class, and this is where
the painting magic happens. Let’s focus onCustomPainter. This is where
canvas drawing takes place. Subclassing fromCustomPainter
requires two functions to be overridden–paintandshouldRepaint. Thepaintfunction is
where drawing occurs. It’s given both
aCanvasand aSizeobject. 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 thepaintobject
provided to each drawing function. 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 thecanvas. Check out the docs for a complete list. For something a little more complex and a whole lot more fun, here’s apaintfunction
that draws a smiley face, using a combination
ofdrawCircleanddrawArc,and a little bit of math. We’ll be using this a little later. We also need to implementshouldRepaint, which controls
when thepaintershould redraw. In our example, ourCustomPainter
has no mutable properties and so can always returnfalse
as what’s drawn never changes. Now, let’s take a look
at a more complex example. Drawing an image
to thecanvasand painting over it. First, we’re going
to need to load an image in a format that
thecanvascan understand. Here, we’re loading an image
as an array ofraw bytes. We can then decode the image usingFlutter’s
function and use the result in ourCustomPainter. Let’s create aCustomPainter, and pass it our decoded image and coordinates for the faces
detected in the image, which are represented here
by aListofRect. In ourpaintfunction, we can paint the image
usingcanvas.drawImage. Now, we can
draw an unfilled rectangle around each face, and we should update
theshouldRepaintfunction to repaint if the image
or list of faces changes. Wereferencethis from aCustomPaintwidget
and we’re done, right? Well, not quite. Remember when I said that
drawing outside the boundaries of the size given
to thepaintfunction is a no-no? When we draw the image
on thecanvas, the image draws to its full dimensions, which may well be
outside the givensize.Flutterdoesn’t actually define
what will happen if we do this, but we can assume
that this isn’t going to be good. So how can we make sure that thecanvasis the right size
for the image we give it? Luckily for us, there’s a widget that lets us explicitly specify its size, and the size of itschildren:
. We can wrap ourCustomPaintwidget in aSizedBoxthat’s been
given the same size as the image. Our image will now be drawn correctly, but we have a new problem. OurCustomPaintis wrapped
in a widget with a set size, so it won’t play nicely with widgets that want to constrain
its dimensions in some way. For example, placing ourCustomPaint
widget in acontainerand trying to size it. That’s not going to work. We can fix this
by using yet another widget. This time, aFittedBox,which will fit and scale
theSizedBoxinside itself while allowing other widget
to constrain its dimensions. So we end up with a combination
ofFittedBox,SizedBoxandCustomPaint, and our modified image
and freshly highlighted faces render elegantly
inside ourFlutterapp. 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
ofFlutter‘s rendering system. It’s easy to work in anycanvasdrawing 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 acanvasinFlutter. for more info, check ♪ (music) ♪ Hey, you, yes you. If you enjoyed that video, you should come check out
some of our other videos or subscribe to the
YouTube channel. We’ve a lot of fun things to show you.Flutteris Google’s portable UI toolkit. We’ll see you over there.

24 thoughts on “Custom painting in Flutter – Flutter In Focus

  1. good explanations…and in the next boring show can you guys enlight us why the website has changed from to .dev

  2. I implemented this custom painter with ML Kit:

  3. Hi Matt, could you provide the source code related so that we can learn your tutorial much more quickly. Thank you so much for your great tutorials!

  4. Hey Matt can you please also specify how to take a normal widget like maybe a button and put it on the canavas?

  5. All good but I'm still mad about the lack of good debugging environment.
    for example:
    make simple syntax error or a simple assigning mistake for the life of Merlin compiler says
    hey an error occured I'm not sure what it is but here is the widget tree when this happened good luck figuring out 😀

    Also auto suggestion stops working when the project got complicated.

    I can't write that tool I don't have time for that I'm hoping that somebody do have.

  6. You mention a companion video to be found in the description, but I fail to find one. Any chance you could update the description?

Leave a Reply

Your email address will not be published. Required fields are marked *