DEV Community: charlieww

We Built a Full-Stack Flutter Short Video + Live Streaming App in 90 Days — Here's What We Shipped

charlieww — Tue, 15 Sep 2026 15:12:13 +0000

90 days. One team. A complete TikTok-style app — from bare repo to App Store submission.

Here's the full breakdown of what we shipped with DTok, our open-source Flutter short video + live streaming platform.

🚀 What Is DTok?

DTok is a production-grade short video and live streaming app built entirely in Flutter. Think TikTok + Twitch — but open source, self-hostable, and developer-friendly.

We wanted to prove that a small team could ship a full-featured social video app in a single quarter. This post documents what we built, the architectural decisions that made it possible, and everything we learned along the way.

📦 Core Features Shipped

Short Video Feed

Infinite vertical swipe feed (like TikTok)
Auto-play with smart prefetching
Hardware-accelerated video player built on video_player + custom controller
Like, comment, share, and save actions — all optimistically updated

Live Streaming

Real-time RTMP broadcast from phone camera
Low-latency playback via HLS adaptive bitrate
Live chat with WebSocket-based message sync
Virtual gift sending system with coin economy

Creator Tools

In-app video recording with filters and speed control
Multi-clip editing timeline
Caption + music overlay
One-tap publish flow with thumbnail auto-generation

Social Graph

Follow / following system with real-time feed updates
User profiles with video, liked, and saved tabs
Push notifications (FCM) for new followers and interactions
Algorithmic "For You" page using engagement signals

Monetization Layer

Coin purchase via in-app purchase (IAP)
Gift sending to live streamers
Streamer payout dashboard
Stripe Connect integration for creator withdrawals

🛠 Tech Stack

Layer	Technology
Mobile	Flutter 3.x (Dart)
State management	Riverpod + AsyncNotifier
Video player	video_player + custom buffering
Live streaming	RTMP push, HLS pull
Backend	Go (Gin) + gRPC microservices
Real-time	WebSocket (live chat), Firebase (notifications)
Storage	MinIO (video), PostgreSQL (metadata)
CDN	Cloudflare R2 + Stream
CI/CD	GitHub Actions + Fastlane

📐 Architecture Decisions That Saved Us

1. Riverpod over Bloc

We switched from BLoC mid-project. The AsyncNotifier pattern reduced boilerplate by ~40% for async data operations. Provider-scoped state also made widget tests dramatically simpler.

2. Separate Video Controller per Page

Instead of a global video player, each feed item owns its controller lifecycle. This enabled proper pause/resume during scroll and eliminated the "ghost audio" bug that haunts most video feed implementations.

3. Optimistic UI everywhere

Every like, follow, and comment triggers an immediate local state update before the server confirms. We built a simple rollback queue — if the server returns an error, the UI reverts. Users never wait.

4. Feature Flags from day 1

We integrated a lightweight flag service on day 3. This let us ship unfinished features behind flags and do gradual rollouts. Saved us twice when a live streaming feature broke on specific Android OEMs.

📊 What the Numbers Look Like

After 90 days we shipped:

47 screens across the app
12 microservices on the backend
3,200+ commits across all repos
~0 crashes in beta (Crashlytics-verified)
Cold start time: < 1.8 seconds on mid-range Android

💡 Biggest Lessons

Video is hard. Live video is harder. The gap between "plays a video" and "plays a video reliably across 200+ Android device models" is enormous. Budget 2x your estimate for video features.

Real-time sync is where complexity hides. Live chat looks simple until you handle reconnection, message ordering under packet loss, and gift animations that need to land in sync.

Flutter is genuinely ready for production video apps. The ecosystem has matured. We hit zero framework-level bugs. The bottleneck was always our own code.

🔓 Open Source

DTok is open source. You can explore the codebase, star the repo, or build your own version on top of it.

👉 GitHub: github.com/dtokapp/dtok

👉 Live Demo: dtok.app

👉 Discord: Join our builder community

If you're building in the video space or curious how the architecture handles scale, drop a comment — happy to go deeper on any layer.

flutter #dart #livestreaming #videoapp #opensource #mobiledev #webdev

We Built a Full-Stack Flutter Short Video + Live Streaming App in 90 Days — Here's What We Shipped

charlieww — Tue, 15 Sep 2026 13:54:04 +0000

Let me be straight about what this is.

DTok — a full-stack Flutter source code package for short video + live streaming. Runs on Android, iOS, Web, and Desktop (6 platforms total). One-time purchase, no recurring fees.

What's included

✅ 12 complete feature modules — not a demo, not a prototype

✅ 6 business scenarios: short dramas, live commerce, online education, content e-commerce, enterprise internal tools, vertical communities

✅ Private deployment — your servers, your data, full deployment guide included

The numbers

3-person team. 90 days to ship. First month revenue: $11,200 (¥82,000).

Why Flutter?

One codebase, six platforms. The rendering is consistent, performance is solid, and the ecosystem has matured enough that we hit production-quality on all targets without platform-specific rewrites.

Who this is for

Teams that want to launch a short video or live streaming product without building from scratch
Agencies building for clients in these verticals
Developers who want to study a real production Flutter codebase at scale

flutter #livestreaming #shortvideo #mobile #opensource

I tested my app across 8 platforms with zero test code — here's how

charlieww — Tue, 24 Feb 2026 18:13:35 +0000

Last week I shipped a cross-platform app and needed to test it on Flutter, React Native, iOS, Android, Electron, Tauri, and web. Writing separate test suites for each platform? No thanks.

Instead, I used an AI agent that could see my app and interact with it. Here is what the workflow looked like:

The Setup

I used flutter-skill, an open-source MCP server that gives AI agents eyes and hands inside running apps. It connects to your app via a lightweight bridge and exposes 253 tools the AI can use.

npm install -g flutter-skill
flutter-skill init ./my-app
flutter-skill launch ./my-app

Testing with Natural Language

Instead of writing test code, I just described what to test:

Test the login flow - enter test@example.com and password123, tap Login, verify the Dashboard appears

The AI agent automatically:

Takes a screenshot to see the current state
Discovers all interactive elements with semantic refs
Taps, types, scrolls - just like a human
Verifies the expected outcome
Screenshots each step for evidence

The Results

Across 8 platforms, the AI agent completed 562 out of 567 test scenarios (99.1% pass rate). The failures were all legitimate bugs it discovered.

What surprised me most:

Zero test code written - everything was natural language
Cross-platform for free - same test descriptions worked on iOS, Android, web, desktop
Found real bugs - the AI explored edge cases I would not have thought of
Snapshot is 99% more token-efficient than screenshots - the accessibility tree gives the AI structured data instead of pixels

When to Use This vs Traditional Automation

Use AI testing when:

You need to test across multiple platforms quickly
You want to explore edge cases without writing explicit tests
Your team does not have dedicated SDET resources
You need fast smoke tests during development

Stick with traditional automation when:

You need deterministic, repeatable CI/CD tests
Performance benchmarking
Testing specific race conditions

Try It

flutter-skill is open source and free: github.com/ai-dashboad/flutter-skill

Works with Claude, GPT, Gemini, Cursor, Windsurf, and any MCP-compatible agent.

Would love to hear if anyone else is using AI agents for testing - what is working for you?

How AI Semantic Snapshots Replace Screenshots for E2E Testing

charlieww — Mon, 23 Feb 2026 22:45:30 +0000

The Problem with Screenshots

Every AI-powered testing tool I've seen sends screenshots to the AI model. It works, but it's expensive:

100KB+ per screenshot
Thousands of tokens to process
Visual recognition needed to find elements
500ms-2s latency per analysis

Semantic Snapshots: A Better Way

What if instead of a screenshot, you sent the AI a structured description of every interactive element — its position, label, type, and state?

That's what semantic snapshots do. In 1ms, they extract the complete UI structure. The AI gets a machine-readable picture for a fraction of the token cost.

New: Form Validation Detection

The latest feature detects form validation rules automatically:

Editor type: CodeMirror, Draft.js, Tiptap, ProseMirror, Quill
Required empty fields: Which fields need to be filled
Why buttons are disabled: Infers missing required fields
Best input method: Recommends how to input text per framework

This means AI agents can fill and submit forms on the first try — no trial and error.

Try It

npx flutter-skill@latest

253 MCP tools, 10 platforms, 1ms latency.

Open source: github.com/ai-dashboad/flutter-skill

How I Stopped Writing Fragile E2E Tests and Let AI Handle It

charlieww — Mon, 23 Feb 2026 19:25:11 +0000

Last month I spent 4 hours debugging a Playwright test that broke because someone renamed a CSS class. Sound familiar?

I decided to try a different approach: what if the test framework could see the app like a human does, instead of relying on brittle selectors?

What I Built

An MCP (Model Context Protocol) server that gives AI agents — Claude, GPT, Cursor, Copilot — direct access to running applications. The AI can:

Launch and connect to apps via CDP
Tap elements, fill forms, scroll, navigate
Take screenshots and analyze UI snapshots
Run assertions in natural language

The Key Trick: Semantic Snapshots

Instead of sending full screenshots (expensive in tokens), I built a snapshot system that extracts the UI's semantic structure — interactive elements, their positions, labels, states. The AI gets a complete picture of the UI in ~2ms and a few hundred tokens.

Compare that to a screenshot: ~100KB of base64, thousands of tokens, and the AI still has to "guess" where buttons are.

Real Numbers

Metric	Traditional	AI-Driven
Tap latency	50-200ms	1ms
UI analysis	500ms-2s (screenshot)	2ms (snapshot)
Test brittleness	High (selector-dependent)	Low (semantic)
Platforms supported	Usually 1-2	10

Supported Platforms

Flutter, React Native, iOS, Android, Web (Chrome/Firefox/Safari), Electron, Tauri, KMP, .NET MAUI.

253 MCP tools total. Video recording, API testing, mock responses, parallel multi-device — it's all there.

Getting Started

\bash npx flutter-skill@latest \\

Add to your MCP config and your AI assistant can start testing immediately.

GitHub: ai-dashboad/flutter-skill
npm: flutter-skill

Would love to hear from anyone doing E2E testing — what's the most annoying part of your current setup?

I Replaced 500 Lines of E2E Tests with One AI Prompt

charlieww — Mon, 23 Feb 2026 09:44:31 +0000

The Breaking Point

I had 500+ lines of E2E test code across three platforms. Every UI change broke dozens of selectors. Every framework migration meant rewriting test suites.

Then I tried something different: let AI control the app directly.

What is flutter-skill?

An MCP server with 253 tools that lets Claude, Cursor, or any MCP client:

See your app through screenshots (31ms capture)
Interact like a human — tap, scroll, type (1ms latency)
Test across 10 platforms with natural language
Auto-adapt when UI changes

Before vs After

Traditional (Playwright — 50+ lines)

await page.goto("https://app.example.com");
await page.waitForSelector("#register-button");
await page.click("#register-button");
await page.fill("[name=email]", "test@example.com");
// ... 50 more lines

AI-Driven (1 line)

flutter-skill test "Open registration, fill email and password, accept terms, submit, verify welcome page"

99.8% less code. Zero maintenance.

How it Compares

Tool	MCP Tools	Platforms
flutter-skill	253	10 (Flutter, RN, iOS, Android, Web, Electron, Tauri, KMP, .NET MAUI, CDP)
Playwright MCP	~33	1 (Web only)
Appium	-	2 (iOS + Android)

Performance

Tap latency: 1ms (near hardware limit)
Screenshot: 31ms
UI analysis: 2ms
Compare: Selenium 100-500ms, Appium 200-1000ms

181 test scenarios across 8 platforms: 99% pass rate.

Get Started

npm i -g flutter-skill
flutter-skill init && flutter-skill demo

GitHub: github.com/ai-dashboad/flutter-skill

Open source, MIT licensed. Happy to answer questions!

Zero-code E2E testing for any app with OpenClaw + flutter-skill

charlieww — Sat, 14 Feb 2026 13:41:24 +0000

What if your AI agent could actually use your app?

Not review your test code. Actually tap buttons, enter text, scroll through lists, take screenshots, and verify everything works.

flutter-skill makes this real. It's an MCP server that gives AI agents eyes and hands inside any running app.

Now available as a skill for Claude Code, Cursor, OpenClaw, and 20+ other agents:

npx skills add ai-dashboad/flutter-skill

How it works

Initialize your app (one-time):

flutter-skill init

Tell the agent what to test:

"Test the login flow — enter admin and password123, tap Login, verify Dashboard appears"

The agent screenshots the screen, finds UI elements, interacts with them, and verifies results. No test code. No selectors. Just natural language.

8 platforms, 99% pass rate

Platform	SDK	Score
Flutter iOS/Android/Web	Dart	21/21
React Native	JS	24/24
Electron	JS	24/24
Android Native	Kotlin	24/24
Tauri	Rust	23/24
.NET MAUI	C#	23/24
KMP Desktop	Kotlin	22/22

Total: 181/183 tests passing

Why use a skill?

Skills are reusable capabilities for AI agents. Install once, use forever:

One-command install via npx skills
Works with Claude Code, Cursor, Windsurf, Codex, Cline, and 20+ agents
Schedule tests with cron for continuous testing
AI-native: understands natural language prompts

Demo

AI testing a TikTok-level app (10 feature modules), fully autonomous:

github-production-user-asset-6210df.s3.amazonaws.com

Get started

# Install as agent skill (Claude Code, Cursor, OpenClaw, etc.)
npx skills add ai-dashboad/flutter-skill

# Or install CLI globally
npm install -g flutter-skill

⭐ GitHub

What platform would you test first? Drop a comment!

How to Test Any App with AI in 30 Seconds — Flutter, React Native, iOS, Android & More

charlieww — Fri, 13 Feb 2026 18:36:47 +0000

How to Test Any App with AI in 30 Seconds

What if testing your app required zero test code?

Not "low-code testing." Not "AI-assisted test generation." Literally zero lines of test code — you describe what should happen, and AI does it.

That's what we built with flutter-skill: an open-source MCP server that gives AI agents eyes and hands inside any running app.

The Problem Nobody Talks About

E2E testing is universally hated for a reason:

// This breaks every time someone moves a button
final loginButton = find.byKey(Key('loginBtn'));
await tester.tap(loginButton);
await tester.pumpAndSettle();
final emailField = find.byKey(Key('emailField'));
await tester.enterText(emailField, 'test@example.com');
// ... 50 more lines of brittle selectors

You're not testing your app. You're maintaining a second codebase that mirrors your UI. Every refactor breaks it. Every design change means rewriting tests.

And it gets worse: every platform has its own testing framework. Flutter has integration_test. iOS has XCUITest. Android has Espresso. React Native has Detox. Web has Playwright. Each with its own API, its own quirks, its own debug cycle.

What if there was one tool for all of them?

The Idea: Let AI Be the User

Instead of writing robot instructions, what if we just... talked to the robot?

"Tap the login button, enter test@email.com as the email,
enter password123 as the password, tap submit,
and verify the dashboard loads."

That's a complete E2E test. No selectors. No framework-specific code. No maintenance when the UI changes — because AI understands what a "login button" looks like, regardless of its internal key.

This is what MCP (Model Context Protocol) makes possible. MCP lets AI tools like Claude, Cursor, and Windsurf connect to external services. flutter-skill is one of those services — it bridges AI to your running app's UI.

How It Works

The architecture is simple:

┌─────────────┐     MCP      ┌────────────────┐   WebSocket   ┌─────────────┐
│  AI Client   │ ◄──────────► │  flutter-skill  │ ◄────────────► │  Your App    │
│ (Claude,     │   JSON-RPC   │  (MCP Server)   │   JSON-RPC    │  (any        │
│  Cursor,     │              │                 │   on :18118   │   platform)  │
│  Windsurf)   │              └────────────────┘               └─────────────┘
└─────────────┘

Your app includes a lightweight SDK (a few lines of code) that connects via WebSocket
flutter-skill runs as an MCP server, translating AI commands into app interactions
Your AI tool sends natural language instructions, which flutter-skill converts to precise UI operations

The SDK exposes your app's accessibility tree — every button, text field, label, and container — so the AI can see exactly what's on screen.

Setup: Actually 30 Seconds

Step 1: Install (5 seconds)

npm i -g flutter-skill

Step 2: Initialize your project (10 seconds)

cd your-app
flutter-skill init

This auto-detects your project type and patches your entry point:

pubspec.yaml → Flutter
Package.swift → iOS native
build.gradle.kts + AndroidManifest.xml → Android native
package.json + react-native → React Native
index.html → Web
package.json + electron → Electron
Cargo.toml + tauri → Tauri
build.gradle.kts + kotlin → KMP
.csproj + Maui → .NET MAUI

Step 3: Add to your AI tool (15 seconds)

Add to your MCP config (e.g., Claude Desktop claude_desktop_config.json):

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill"
    }
  }
}

That's it. Your AI can now see and interact with your app.

What AI Can Do

Once connected, your AI has access to 40+ tools:

Inspection

inspect — See the full UI element tree (accessibility labels, types, positions)
get_element_details — Deep-dive into any specific element

Interaction

tap — Tap any element by description or index
enter_text — Type into text fields
scroll — Scroll in any direction
swipe — Swipe gestures (e.g., dismiss, navigate)
long_press — Long press for context menus

Verification

screenshot — Capture what the app looks like right now
assert_exists — Verify an element is on screen
get_text — Read text content from any element

Navigation

go_back — Navigate back
open_url — Deep link to any route

Advanced

eval — Execute platform-native code (Dart, JS, Swift, Kotlin)
get_logs — Read app console output

Real Example: Testing a Login Flow

Here's what happens when you tell Claude: "Test the login flow with invalid credentials and verify the error message."

Claude (via flutter-skill):

1. inspect() → sees the login screen with email field, password field, submit button
2. tap(element: "Email field")
3. enter_text(text: "bad@email.com")
4. tap(element: "Password field")
5. enter_text(text: "wrongpassword")
6. tap(element: "Submit")
7. screenshot() → captures the error state
8. assert_exists(element: "Invalid credentials") → ✅ verified

No test file created. No selectors maintained. If the UI changes tomorrow, the AI adapts — it looks for "Submit" by understanding the UI, not by memorizing a widget key.

The Numbers

We tested flutter-skill across 8 platforms with a comprehensive E2E test suite:

Platform	Tests	Passing	Rate
Flutter iOS	21	21	100%
Flutter Web	20	20	100%
Electron	24	24	100%
Android Native	24	24	100%
KMP Desktop	22	22	100%
React Native	24	24	100%
Tauri	24	23	95.8%
.NET MAUI	24	23	95.8%
Total	183	181	99.0%

Every test is AI-driven. Zero hand-written test code.

Lessons from Building for 8 Platforms

Building SDKs for 8 platforms taught us things no tutorial covers:

Android: PNG Screenshots Kill WebSocket

Full-resolution PNG screenshots on Android are huge. Sending them over WebSocket caused timeouts. The fix: JPEG at 80% quality, downscaled to 720p. AI reads the UI just fine at lower resolution, and it saves ~90% bandwidth.

Tauri: eval() Is Fire-and-Forget

Tauri v2's eval() function doesn't return values. It executes JavaScript in the webview and... that's it. No callback, no promise, no return.

Our solution: open a secondary WebSocket on port 18120. The JavaScript sends its result there, and Rust receives it via a oneshot channel. Three ports total: HTTP health (18118), WS commands (18119), WS results (18120).

We also had to add ws://127.0.0.1:* to Tauri's CSP, otherwise WebSocket connections from the tauri:// origin to localhost are silently blocked.

React Native: Skip the Full Build

Building a full React Native project requires native modules, CocoaPods, Gradle — the works. For testing, we used a Node.js mock that implements the bridge protocol directly. Much faster, same result.

The go_back Race Condition

On Android, clearing currentActivity on onActivityPaused caused a race condition with go_back. The previous activity pauses before the new one resumes, leaving a brief window where the SDK thinks there's no activity. Fix: only clear on onActivityDestroyed.

When to Use This (and When Not To)

Use flutter-skill when:

You want to test user-facing flows without writing test code
You're building across multiple platforms and want one testing approach
You're doing vibe coding and need AI to verify what it builds
You want to prototype and test simultaneously

Don't use it for:

Unit testing (that's a different problem)
Performance benchmarking (AI interaction adds latency)
Tests that need to run in < 1 second (AI thinking time)

Getting Started

# Install
npm i -g flutter-skill

# Auto-detect and configure your project
cd your-app
flutter-skill init

# Or try the built-in demo
flutter-skill demo

Add to your MCP config, and start talking to your app through AI.

GitHub: github.com/ai-dashboad/flutter-skill

MIT licensed. Contributions welcome.

flutter-skill supports Flutter, iOS, Android, Web, Electron, Tauri, KMP, React Native, and .NET MAUI. Works with Claude, Cursor, Windsurf, and any MCP-compatible AI tool.