Build a multiplayer drawing experience with full-stack Dart

on YouTube ↗50m

" summary

Builds a live multiplayer pixel canvas using Dart, Flutter, and Serverpod 3, implements a stream-based API that sends a full 64x64 image once then broadcasts per-pixel deltas, stores pixels as packed bytes, and validates inputs. Uses a generated Dart client, a 16-color palette, and a pixel editor widget that calls a server setPixel endpoint; demo runs locally and in Chrome and MacOS and successfully syncs edits across clients.

AI-written summary · about

" chapters (18)

1. 0:00Pixarama intro
2. 1:06Installing and setting up Serverpod for the project
3. 2:30Pixarama mini project
4. 4:09Serverpod project structure
5. 6:09Image update models
6. 11:59Client code from models
7. 12:44Server endpoint for updates
8. 25:25Broadcast pixel changes
9. 29:26Client code for methods
10. 30:09Pixels package in Flutter
11. 31:18Pixarama Flutter widget
12. 32:43Listen to server updates
13. 37:40Full and partial updates
14. 41:46Reconnection logic
15. 43:17Drawing canvas UI
16. 46:36Connect Flutter to Serverpod
17. 47:55Run and test multiplayer
18. 50:01Realtime drawing demo

" related talks

• 26mServerpod: Building interactive slides for tech talksViktor Lidholt · Fluttercon Europe 2024
• 32mCode Meets Art: Flutter for Creative CodingRoaa Khaddam · Fluttercon Europe 2024
• 49mTrusting your clients: live-coding a cross-platform multiplayer bingo appFrank van Puffelen, Eric Windmill · Flutter Vikings 2022
• 44mBuilding Pieces for Developers Our Journey with Flutter and DartTsavo Knott · Fluttercon USA 2024
• 47mIntroduction to Cross Platform Development with FlutterFaisal Abid · Developer Summit 2020
• 40mMastering Flutter WebJoachim Böhmer · droidcon London 2022
• 38mFlutter Web in actionJoachim Böhmer · Flutter Vikings 2022
• 47mLive-Coding Custom Widgets with SimonSimon Lightfoot · Fluttercon Europe 2025