Mastering CustomPainter: Going Beyond Widgets in Flutter
summary
Explains how to parse backend SVG strings into Flutter paths using the xml and path_drawing parser (parseSvgPathData), convert SVG commands to Path methods, then measure routes with computeMetrics to sum contour lengths and map a backend percentage to a point and tangent. Shows a working TruckMap: extract position, draw the car with drawCircle and drawImageRect, layer paints with save/restore, and skip repaints via shouldRepaint — a complete pipeline that actually renders moving cars on a race track.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 1:47Why CustomPainter matters
- 2:50Flutter rendering pipeline
- 4:39CustomPainter integration
- 6:27CustomPainter class
- 9:38Canvas API basics
- 10:21Basic shape drawing
- 12:08Drawing text
- 13:13Working with images
- 14:59Vertices and GPU optimization
- 16:24Path objects deep dive
- 17:07Paint styling and effects
- 18:35Canvas transformations
- 20:00SVG vs Canvas
- 21:26SVG path commands
- 24:21Bézier curves
- 27:36Truck Map case study
- 29:03Parsing SVG paths
- 31:58Truck Map implementation
- 33:23Positioning cars
- 36:10Final demo
related talks
34mMastering CustomPainter: Going Beyond Widgets in Flutter
43mPortable Material: Flutter physical models
32mEnhance your Flutter painting skills
28mCustom shapes in Flutter: The secret to creating custom UI design
17mFlutter Widgets Probably Haven’t Heard Of
32mCode Meets Art: Flutter for Creative Coding
01h 03mThat's how we scroll in Flutter
50mBuild a multiplayer drawing experience with full-stack Dart