Canvas.drawVertices - Incredibly fast, incredibly low-level, incredibly fun

One of Flutter's lowest-level APIs is the drawVertices method, which allows you to efficiently draw an astounding amount of stuff on the screen. That stuff can be lines, rectangles, polygons, particles, and whatever else you can think of. This method is how people (including Filip) can even implement specialized 3D renderers on top of Dart that run fast on mobile, web and desktop. In this talk, Filip will explain the API of Canvas.drawVertices() and the Vertices.raw() constructor - both are obscure, very low-level, and hard to explain in documentation alone. But they are worth it when you need to squeeze the last bit of performance out of Flutter.
We'll also cover Canvas.drawLines, for good measure.
This talk is part of Flutter Forward, a 2023 official Flutter conference in Nairobi, Kenya.

[@mahmood466]

This is some excellent quality content in Flutter! Please continue!!

[@HezOmanjo]

Too nerdy for me ... But I'll say this - Filip has always challenged me to push beyond my boundaries of thinking in Flutter. Right from day 1. Amazing man 👍🏽

[@imaNNeO]

That was really great. I learned a lot. Thank you Filip

[@CodeWithImem]

the depth of the informations you provide it's amazing .

[@thanhdatvo0]

We missed you! Welcome back!

[@SmashHighlights]

Really interesting, thanks for sharing! I always enjoy your focus on performance and low level stuff in Flutter.

[@Dotafreak]

Fear of canvas is slowly reducing. Thanks for sharing this.

[@lemomar]

This was great! I’ve recently begun to work on the canvas after years of being scared of it and I’m enjoying it a lot

[@mksln]

Wonderful video Filip! Thanks for the great intro to drawVertices, I didn't even know it was there, it looks like a great way to squeeze out lots more drawing performance when have need of it in Flutter apps.

[@jjny916]

This is excellent and incredibly valuable content. Thank you.

[@giiyms4408]

Thanks Filip. Keep it up. Learning a lot!

[@yf4453]

Amazing talk. Thakn you!

[@mivoligo]

Just wanted to say Thank You! ❤

[@SecondFlight]

Thanks so much for this talk! I didn't realize this was hidden in the painter API and I'm excited to try it out.

[@pankajkoirala6563]

Really happy to watch such content :)

[@Andreasonline3]

absolutley dope keen to see more

[@mohanedy]

I have enjoyed every second of this video. Really helpful and interesting. But I think you have drawn the Kotlin logo at 30:50 accidentally, maybe this is how the Kotlin team came up with the logo idea 😂

[@reacct1002]

Thanks Filip!

[@Hamiiidev]

Great. waiting for Flutter Forward analysis.

[@CarlosHenrique-er7zq]

Amazingggg video! Thanks for it

[@dhruvinvainsh743]

This is superb

[@Apenschi]

VERY good! Thanks!

[@saqibshafin]

I love your work. So much. Keep it up! Also, please finish the Self Improving Developer book!

[@user-on3zu2fh6j]

great. love your way.

[@TheDescrout]

While looking at the drawVertices docs I saw that flutter also has drawAtlas(and drawRawAtlas) methods. Would these be better for drawing a lot of images ? Also in your example the image in the polygon is not rotating. I assume it could be rotated via some sort of UV coordinates binding. I see that drawAtlas method supports all sort of transformations like scale and rotation that could make our life easier but maybe at the cost of a little performance ?

[@TadejKanizar]

Very cool. I'm going to start drawing all widgets using drawVertices from now on ;)

[@filiphracek]

Lol. Yes. It also helps to render all text via Vertices.raw, inputting each vertex by hand while juggling a chainsaw.

[@MohamedSalah-pi7fn]

This is awesome ❤️

[@mkc11267]

Awesome!!

[@erlangparasu6339]

Great! Thanks 👍

[@JessicaPereira-wy6ru]

Thanks for this amazing talk Filip, you inspire me... Do you have the code source?

[@filiphracek]

Not the one I show in the talk, but have a look at github.com/zesage/flutter_cube, for example.

[@SirJohn2024]

Nerdy... But interesting... Basically you can build a 3D engine on top of that, Flutreal Engine maybe? 😏

[@hyungtaecf]

Or Flame 3D

[@KennyFully]

I’m tired of flame. I’m going to do it myself.

[@R4IVI]

My first thought when you asked for the "bug" was : "that comes from the 16bits limits !" I'm not a low level engineer but I learned that when trying to position planets accurately in space in Blender3D, which use a 32-bits number precision, which is ok for entertainment but weak for technical viz' ! 🤓

[@iy908]

Please do more videos about high performance flutter/dart! Like how to use SIMD operations in flutter or own implementation of spatial interpolation algo and so on

[@mojtabana6322]

thanks for sharing

[@yafiwala]

Gonna start Flutter again I did first start in 2017

[@alexandergorny]

Yes nerdy, but love it! feels like first days of creating assembler triangles on vc20 ;) So curious about your SciFi UIs, please share !!!

[@tluanga-ruatpuii-pa]

Can you please release a video about your desk setup

[@rlrl5879]

Have you tried running this demo on an ios device with impeller enabled? I have an app with some very complex scenes like this that runs fine in skia, but locks up on impeller. I still need to dig into what is goin on, but Im curious if you would see the same with this demo.

[@SimonNielsen-zm7mq]

Nice! Will it be possible for you to share the comparison app?

[@AntonioBrandao]

29:44 can these drawn shapes be tapped / made interactive with a GestureDetector or so? How would the hit area work there?

[@dokinds]

nice work @Flip :)

[@aytunch]

Hi Filip, will you make the source code of the snowflake benchmark available? On part you did not mention int he talk was how you are changing the positions of all the vertices. SO it would be very helpful to see the code. Thanks

[@mrverdant13]

I really love this video I wonder how could we add interactivity tho

I think I have a gold rush because this is gold! This is exactly what I needed. So now what I understood is that it's the Float32List is what makes things fast not drawVertices() as much?

[@filiphracek]

Pretty much, yes. TypedData, if you keep it around, makes things go fast. (On the other hand, if you create (and then throw away) a big chunk of typed data every frame, then it might easily be slower.)

[@SecondFlight]

It also seems that drawVertices() is a lot closer to the equivalent graphics API call than something like drawLine(). This means Flutter basically doesn't need to transform the data you send it before handing it to the GPU, which I imagine helps quite a bit as well.

[@RioM8z]

You seem to prefer Android Studio as your editor ?! Isn't the little program that is an example available ?

[@nonnulls]

Please, can you add a link to repo with source code to the description?

[@becbelk]

Good idea that the vertex eat from the buffer of the next data

[@DominikRoszkowski]

I find it funny that it's indices that overflow, not positions or the list length. The fact that it takes 5 indices for 1 snow-flake made me a little bit puzzled at first ;)

[@filiphracek]

Yeah, I started the experimentation with polygons (any n-gon), so it was easiest to have a vertex in the middle and draw triangles from there. It also made it easier to draw the kind of gradients I wanted. Ideally, I should have rewritten the code for the special case of a rectangle, where you need 1 less vertex and _half_ the triangles... Welp. Next time! :)

[@musoftware]

I felt the felling of OpenGL 2 era. Ah... That nostalgic glVertex3f function...

[@atmega3212]

It's kinda like OpenGl, I love it

[@kausikmr]

Canvas.drawVertices is not Anti Aliased even after adding the antiAliased = true in the Paint(). Is there a solution for this @Filip Hráček ?

[@zainroyan1556]

Love your content, but iam interested as to how can u make ur vs code transparent

[@theforestapp]

can you recommend any reading material on using the raw vertices/float lists?

[@filiphracek]

I was going from the docs, tbh. They're terse, but they have everything you'll need.

[@babydoll-li9ng]

What should we do to fastest the widget build ?

[@gaosdatastory8884]

Hi filip, Question for you. Can I use Flame in Flutter Casual Games Toolkit? I am a newbie to Flutter Casual Games Toolkit. Not sure if I can use flame in Flutter Casual Games Toolkit or not.

[@odewoleabdul-jemeel8859]

This is awesome. Where can we get the source code?

[@chiefolk]

51:00 because indices is a typed data of Uint16List which can only hold values from 0 to 65,535. so when we are trying to index from positions maybe greater than that it's breaking it??

[@chiefolk]

so when there are more than 65,536 positions in the positions list and indices array is trying address them but it cannot be fit in 16 bits?

[@chiefolk]

55:00 yeah i was close ✨

[@cycomkid]

Hoping shaders deepdive

[@Kiriyaki65548]

🚀 🚀 🚀 🚀 🚀

[@shubhamyeole2881]

First comment before watching... 😀

[@Pewdew]

Is it possible to prepaint custom painters? I can't figure it out how to fix bad performance. I have 15 custom painter widgets and 10 fps😢

[@filiphracek]

Interesting. I admit I've never seen an issue like that. Are you updating them all every frame? Because if not, CustomPainter shouldRepaint() is your friend.

[@Pewdew]

@@filiphracek i turn phone, tilt changes and blocbuilder rebuild CustomPainters with new state. Also these custom painters are similar. Is there any way to paint it once and share to all my widget? Because each paint spent time.

[@ankitverma3932]

how do i get this code?

[@LuisFernandez-cz7gb]

code example please 😊😊

[@danielduvana]

Is it not possible to draw circles with drawVertices? What's the most performant way to draw circles? Just Canvas.drawCircle?

[@filiphracek]

Yes, drawCircle is really fast. You could use vertices to draw a circle-like polygon but I'm almost sure it would not give you any performance boost (possibly the opposite).

[@yf4453]

What theme is he using?

[@filiphracek]

The theme is called "high contrast" or something like that.

[@coldwolf5050]

Will you put this on github?

[@henryriehl2058]

One very small thing, but you could probably improve the performance a bit for the widget side of things by using valueNotifier with a listenable builder :) Currently the Stack, ColouredBox and SizedBox widgets are being rebuilt unnecessarily.

[@AmazingGrace0412]

Please bring Native integration with cockroachdb and interfaces like algolia 💪

[@babydoll-li9ng]

can you please share me the code ?

[@himmelkami3308]

for one day , real game engine built by flutter.

[@DmitriiGordeev]

This is not black magic )

[@user-jr7tg5ew3r]

How does it work by providing "this" as TickerProvider ?

[@ghost_7701]

Me watching this is like monkey watching surgery 😂😂 But I really enjoyed it and I hope one day that I become on that level of understanding 🫡

[@filiphracek]

Trust me, if I was watching this a year ago, I would feel the same. It's low-level and confusing. But once I tried (and failed) to wield this API a couple of times, it clicked.

[@ghost_7701]

​@@filiphracek I will give it a try I love these challenges. Thanks for the inspiration.