← Writing

Building iDraw: A Flutter Drawing App With Lessons, a Studio, and an AI Coach

Sep 2026 · 5 min read

iDraw

Learning to draw usually means either copying YouTube tutorials or staring at a blank canvas. I wanted something in between: an app that teaches with clear steps, still feels like a real sketchbook when you freehand, and can give useful feedback when you’re stuck.

That’s what I’m building with iDraw — a learn-to-draw app for iOS and Android, built entirely with Flutter.

What iDraw is

iDraw is a drawing companion with a few connected pieces:

  • Guided lessons — step-by-step traces with animated dashed guides, ghosted completed steps, and an accuracy score with stars
  • Drawing studio — freehand canvas with five brushes, colour picker, grid, mirror mode, undo/redo, and paper colours
  • AI coach — powered by Google Gemini: critique a drawing, generate ideas, or get a step-by-step guide for any subject
  • Gallery — save, browse, zoom, share, and keep AI score badges on finished work
  • Progress — XP, levels, streaks, daily challenges, and profile stats

The goal is simple: open the app, draw a little every day, get better, and keep a trail of what you made.

The drawing engine (where the “feel” lives)

Under the hood, drawing is a classic Flutter pointer → stroke → paint pipeline.

DrawingCanvas listens for touch. It tracks a single finger so a palm or second touch doesn’t leave stray marks. Pointer down begins a stroke, move extends it (with light point thinning), and up commits it.

DrawingController owns the state: stroke list, current brush, colour, width, symmetry, undo/redo, and background. Each stroke stores points plus brush type — ink, pencil, marker, glow, or eraser.

StrokesPainter renders everything with CustomPaint. Paths are smoothed with quadratic curves through midpoints so lines feel natural, not jagged. Brushes are mostly paint settings (alpha, width, blur); the eraser uses BlendMode.clear. Mirror mode redraws a flipped copy of mirrored strokes.

Committed strokes are cached as a ui.Picture, so only the live stroke is redrawn while you move. That keeps the canvas smooth even after dozens of marks. Toolbars listen separately, so they don’t rebuild on every point.

Lessons reuse the same engine. A trace scorer compares your strokes to the guide paths and returns a 0–100 score (coverage + precision), then maps that to stars.

Product surfaces at a glance

Area

Brief

Splash & onboarding

Logo draws itself stroke by stroke; three onboarding pages with live vector art

Learn tab

Level ring, streak, continue-lesson hero, daily challenge, category carousels

Lessons

Animated guides, accuracy score, auto-save, confetti on finish

Studio

Full brush toolkit, grid/mirror, save & share as PNG

AI Coach

Critique, ideas, and step guides via Gemini (with on-device key option and consent)

Gallery & Profile

Artwork library plus stats, premium status, settings, and legal links

All artwork, lessons, copy, icon, and code in the project are original to it.

Technology stack

iDraw is a Flutter app (Dart 3), shipping to both mobile platforms from one codebase.

Core

  • Flutter / Material UI
  • Custom painting (CustomPainter, dart:ui Picture caching) for the canvas
  • ChangeNotifier / ValueNotifier for scoped rebuilds

AI

  • Google Gemini via http (GeminiService)
  • Critique, idea generation, and step-by-step guides
  • Model fallback chain if a model is retired or overloaded
  • Optional user-provided API key stored only on device

Persistence & media

  • shared_preferences for progress, settings, streaks, AI quota
  • Local gallery: PNG files + index in the documents folder
  • share_plus / gal for sharing and saving to the device gallery

Monetization & growth

  • in_app_purchase (StoreKit / Play Billing) — yearly, monthly, lifetime
  • google_mobile_ads
  • Firebase Analytics & Crashlytics
  • App Tracking Transparency, in-app review, connectivity checks

Motion & polish

  • flutter_animate, Google Fonts, SVG, custom logo/sketch painters

Architecture stays intentionally flat: data/ for lessons and challenges, drawing/ for the canvas, services/ for state/AI/purchases, and screens/ / widgets/ for UI. That keeps the drawing core easy to test and iterate without dragging the whole app with it.

What I’m optimizing for

Three things matter most while I ship this:

  1. Feel — strokes should feel immediate and forgiving on a phone
  2. Learning loop — lessons → score → streak → come back tomorrow
  3. Honest AI help — optional, consent-based feedback that points at the next skill, not generic praise

There’s still work before a public release (store products, receipt validation, privacy URLs, bundle IDs), but the core loop already works: draw, learn, save, improve.

Why I’m writing this

Building iDraw has been a mix of product design and low-level Flutter graphics. The “simple” act of drawing on a screen turns into pointer filtering, stroke models, path smoothing, picture caching, blend modes, and scoring — then you wrap that in lessons, AI, and a gallery so it feels like a product, not a demo.

If you’re building a creative app in Flutter, start with the canvas feel. Everything else — AI coach, paywall, streaks — sits on top of whether the first stroke feels right.

I’m still building in public. More soon as lessons, AI flows, and polish land.