DEV Community

Cover image for Vibe Coding Flutter: The Senior Dev's Honest Take
Sayed Ali Alkamel
Sayed Ali Alkamel

Posted on

Vibe Coding Flutter: The Senior Dev's Honest Take

I'm a Google Developer Expert in Dart & Flutter. This is my honest, research-backed take on vibe coding — with real tweets, real code, and a real workflow you can use Monday morning.


⚡ TL;DR — The Five Things You Need to Know

  • Vibe coding is AI-assisted dev where intent replaces syntax — coined by Andrej Karpathy in Feb 2025, now a legitimate workflow
  • Flutter is one of the best frameworks for vibe coding because Dart is strongly-typed, widget trees are predictable, and hot-reload is unbeatable
  • It genuinely crushes boilerplate, scaffolding, tests, and Figma-to-widget conversion
  • It breaks badly on state management, platform channels, and performance tuning — you still need to read the code
  • The power move: pair AGENTS.md + MCP servers + a clear PRD, and treat AI as your most productive junior dev

Where It Started: A Throwaway Tweet That Changed Everything

On February 2, 2025, Andrej Karpathy — OpenAI co-founder, former Tesla AI Senior Director — posted something that wasn't supposed to be a manifesto. It was a shower thought about his weekend hobby.

It got million of views.

"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LLMs are getting too good. I just talk to Composer with SuperWhisper so I barely even touch the keyboard. I accept all, I don't read the diffs anymore. I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works."

@karpathy, Feb 2, 2025 · x.com/karpathy/status/1886192184808149383

Exactly one year later, Karpathy revisited the post. The word "vibe coding" had earned a Merriam-Webster entry (March 2025) and was named the Collins English Dictionary Word of the Year 2025 and spawned university courses. But his preferred term had quietly evolved:

"Today, programming via LLM agents is increasingly becoming a default workflow for professionals, except with more oversight and scrutiny. My current favorite term is 'agentic engineering' — agentic because you're orchestrating agents who write the code, engineering because there's an art & science to it. It's something you can learn and become better at."

@karpathy, Feb 2026 retrospective · x.com/karpathy/status/2019137879310836075

This evolution matters. What started as a "forget the code exists" attitude has matured into deliberate orchestration with oversight. And that nuance is exactly what Flutter developers need to internalize.


What the Flutter Community Is Actually Saying on X

Twitter / X has been the real-time laboratory for Flutter vibe coding opinions. Here's an honest cross-section — hype, skepticism, and people actually shipping things.

The Enthusiasts: "It Unlocks Everything"

"Vibe coding with #Flutter basically lets anyone build whatever niche app they want in a couple of hours."

@FlutterCarl · x.com/FlutterCarl/status/1906004591570825422


"Preparing a complete Vibe coding with Flutter video... Stay tuned 👀"

@mcflyDev (Gautier 💙) · x.com/mcflyDev/status/1900578339770843172


"Can't wait to try Vibe coding Flutter apps in the Vide!" — reacting to Norbert Kozsir's Flutter AI-IDE that runs and tests widgets it creates, implements pixel-perfect widgets from screenshots, and writes code exactly the way you want.

@csells (Chris Sells) · x.com/csells/status/1903182124141908165


"🔴 LIVE Vibe Coding with @norbertkozsir @devangelslondon and @esratech! #VibeCoding #Flutter #Dart #FlutterCommunity" — 2,729 Views on the live session.

@FlutterComm · x.com/FlutterComm/status/1914001730355814887

The Pragmatists: "It's a Multiplier, Not a Magic Wand"

Andrea Bizzotto (codewithandrea.com), who maintains one of the most respected Flutter newsletters (22k+ subscribers), captured the nuanced position that most senior Flutter developers share:

"AI is a multiplier that amplifies both your skills and your mistakes. So learn to use it well, and don't feel like you need to go all-in. Sometimes the old-fashioned way of writing code manually is still the right call. The decision matrix is simple: compare prompting effort vs coding effort."

Andrea Bizzotto · codewithandrea.com/newsletter/november-2025

The Skeptics: "Don't Actually Forget the Code Exists"

Andrew Chen from a16z pointed out the macro trajectory that makes seasoned engineers uncomfortable:

"Random thoughts/predictions on where vibe coding might go: most code will be written by the time-rich. Thus, most code will be written by kids/students rather than software engineers. This is the same trend as video, photos, and other social media — we are in the early innings..."

@andrewchen · March 9, 2025

And the Dart language team itself signaled where things are heading — not pure vibe coding, but structured, type-safe AI tooling for Dart specifically:

"AI apps just got a lot easier to build 🏗️ Genkit Dart (Preview) is officially out, bringing type-safety and a model-agnostic API to the Dart side. Support for Gemini, Claude, OpenAI. Type-safe AI flows. Dev UI for AI testing and traces. #Genkit #Dart #Flutter"

@dart_lang · x.com/dart_lang/status/2031499569096528324


Why Flutter Is Unusually Well-Suited for Vibe Coding

Most vibe coding discussion centers on web (React, Next.js) or Python backends. But Flutter has structural properties that make it arguably better suited for AI-assisted development than most frameworks. Here's why.

1. Dart's Strong Typing Catches AI Mistakes Early

When an LLM generates incorrect Flutter code, Dart's type system screams immediately. You don't get mysterious runtime crashes at 2 AM — the compiler tells you exactly where the AI hallucinated a method that doesn't exist.

// ❌ AI hallucinated this parameter — Dart catches it at compile time
Widget buildCard(BuildContext context) {
  return Card(
    roundedCorners: 12, // Error: "The named parameter 'roundedCorners' isn't defined"
    child: ListTile(...),
  );
}

// ✅ What it should be — and you know immediately
Widget buildCard(BuildContext context) {
  return Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
    child: ListTile(...),
  );
}
Enter fullscreen mode Exit fullscreen mode

2. Widget Trees Are Declarative — Perfect for AI Reasoning

Flutter's declarative UI model maps almost 1:1 with how LLMs "think" about layout. When you say "add a gradient background to this container with rounded corners and a shadow," there's a direct, unambiguous translation to a DecoratedBox with a BoxDecoration. The AI doesn't have to guess about lifecycle methods or imperative DOM manipulation.

3. Hot Reload Is the Tightest Feedback Loop in Mobile Dev

Vibe coding thrives on fast iteration: prompt → generate → verify → adjust. Flutter's hot reload (now including Flutter Web hot reload (stable since 3.35)) makes the verify step nearly instantaneous. You see AI output materialise on your device in under a second.

4. Dart Is Expressive but Readable

Unlike Java or Kotlin, Dart is concise enough that AI-generated code stays readable. Unlike TypeScript in a React codebase, there's no JSX/CSS-in-JS impedance mismatch. A Flutter file generated by AI tends to look like Flutter code a human would write — which makes review dramatically faster.


The Truth Matrix: When to Vibe, When to Think

Task Approach Why
Generate 10 model classes from API spec ✅ Use AI Pure mechanical translation, zero judgment needed
Build a multi-step onboarding flow UI ✅ Use AI Declarative widgets, verify visually with hot reload
Write 40 widget tests for existing screens ✅ Use AI Pattern-heavy, AI is exceptionally good at this
Fix a 2px pixel misalignment ✋ Code it Low coding effort, high prompt effort — just fix it
Architect a real-time sync feature ✋ Code it Requires domain knowledge of your specific constraints
Implement fingerprint auth with fallback 🔍 AI draft + review AI can scaffold, but you must audit every security line
Optimise a ListView with 10,000 items 🔍 AI draft + review AI knows the patterns, you need to profile the output

Rule of thumb from Andrea Bizzotto: If the prompting effort is lower than the coding effort → use AI. If manually fixing it is faster than explaining it → just fix it manually.

What AI crushes ✅

  • Scaffold generation (routes, services, models)
  • Figma design → Flutter widget conversion
  • Boilerplate (copyWith, fromJson, toJson, Freezed classes)
  • Responsive layout skeletons
  • Animation scaffolding (implicit animations)
  • Simple CRUD screens with Firebase
  • README and documentation generation

Where to tread carefully ⚠️

  • Complex Riverpod / BLoC state logic
  • Platform channel implementations
  • Performance tuning (jank, Impeller issues)
  • Custom painters and shaders
  • Security-sensitive code (auth, storage, network)
  • Deep navigation flows with guards
  • Accessibility semantics

The Production-Grade Vibe Coding Workflow for Flutter

Based on real-world patterns from Viktor Lidholt (Serverpod), the Globe.dev team, and senior Flutter practitioners — here's the workflow that actually holds up.

Step 1: Write a PRD Before You Touch the AI

A Product Requirements Document doesn't have to be formal — a Markdown file describing the feature, expected behavior, and constraints is enough. AI with context is an entirely different animal from AI without it.

Context is everything. It's like assigning a task to a junior engineer without any context — poor delivery is almost guaranteed. — globe.dev/blog/beyond-vibe-coding-production-flutter-dart-ai

Step 2: Create an AGENTS.md in Your Repo Root

This file tells every AI agent about your architecture, state management choice, folder structure, code style, and package preferences. It's the single highest-leverage action you can take. Without it, agents default to whatever they were trained on — which probably isn't your codebase.

# AGENTS.md — Flutter App Agent Instructions

## Architecture
- State management: Riverpod (hooks_riverpod 2.x)
- Navigation: go_router 13.x with nested routes
- Data layer: Repository pattern, Freezed models
- Network: Dio with interceptors, no direct http package

## Folder Structure
lib/
  features/          # One folder per feature
    auth/
      data/          # Repositories, DTOs
      domain/        # Models, use cases
      presentation/  # Widgets, controllers
  core/              # Shared utils, theme, routing

## Rules
- NEVER use setState in feature widgets, always Riverpod
- ALL models must be Freezed + json_serializable
- Widget tests are REQUIRED for all new screens
- Use const constructors wherever possible
- Follow existing theme tokens in core/theme/

## MCP Servers in Use
- Figma MCP: for any UI implementation task
- Dart MCP: for pub.dev package lookups
Enter fullscreen mode Exit fullscreen mode

Step 3: Connect the Right MCP Servers

The Dart MCP server, Figma MCP server, and Firebase Studio dramatically improve output quality. They give agents access to your actual APIs, your actual design specs — instead of making plausible-sounding things up.

Very Good Ventures published a great resource: 7 MCP Servers Every Dart and Flutter Developer Should Know.

Step 4: Plan Mode First, Then Execute

Use Cursor's or Claude Code's planning mode to generate a plan before any code gets written. Review it. Catch architectural misalignments before they become 300-line mistakes. This one habit catches 80% of problems.

Step 5: Hot Reload, Inspect, Iterate

Run the generated code immediately. Flutter's hot reload plus DevTools makes verifying AI output faster than reading it line-by-line — for simple UI changes. But always read state and logic code before accepting it.

Step 6: Audit. Don't Just Accept All.

Karpathy's original "Accept All, don't read the diffs" was fine for his personal weekend projects. For anything that ships to users, AI-generated code is your technical debt. Read it. If it's messy, ask the AI to clean it up before accepting.


Real Vibe Coding Scenarios That Actually Work in Flutter

Scenario 1: Weekend Proof of Concept — Liquid Glass iOS Effect

Viktor Lidholt from the Serverpod team vibe-coded a Flutter proof-of-concept for Apple's Liquid Glass effect (introduced in iOS 26) over a weekend.

"Obviously not production-level code, but it shows the viability of the approach." — Viktor Lidholt, serverpod.dev/blog/vibe-coding-flutter

Perfect use case: time-boxed, exploratory, visual feedback. Ship the vibe, then decide if it's worth productionising.

Scenario 2: Figma → Flutter with the Figma MCP Server

Using the Figma MCP server + Claude Code, developers are mapping complete design files to Flutter widget trees. The MCP reliably captures dimensional requirements — sizes, spacing, font scales — so the AI output is close enough that human refinement takes minutes, not hours.

// Prompt: "Implement the ProductCard from the Figma design"
// Figma MCP provides exact sizes, spacing, colors from the design file

class ProductCard extends StatelessWidget {
  const ProductCard({super.key, required this.product});

  final Product product;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 160,  // from Figma
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        borderRadius: BorderRadius.circular(16),  // from Figma
        boxShadow: [AppShadows.card],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: const BorderRadius.vertical(
              top: Radius.circular(16),
            ),
            child: CachedNetworkImage(
              imageUrl: product.imageUrl,
              height: 120,  // from Figma
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(12),  // from Figma
            child: Column(/* title, price, rating */),
          ),
        ],
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Scenario 3: Full Test Suite from Existing Screens

Prompt: "Write widget tests for every screen in the lib/features/ folder, following the existing patterns in test/."

The AI finds your patterns, replicates them, and generates a scaffold for 20–40 tests in a single pass. Review them, run them, patch the failures. What would take a full day takes two hours.


The Anti-Patterns That Will Burn You

"If you let too much bad code into your project, the models will perform worse over time, and your ability to keep the project clean will suffer." — Viktor Lidholt, Serverpod

❌ No AGENTS.md — Without explicit instructions, the AI defaults to its training data. It might use BLoC when your project uses Riverpod, old go_router patterns, or target the wrong platform entirely.

❌ Accepting security-sensitive code without audit — Documented cases exist of apps deployed with hardcoded secrets, missing authentication checks, and insecure data storage — all AI-generated, none reviewed. Rule: any code that touches auth, storage, or network gets a human eyeball every time, no exceptions.

❌ Vibe coding your state management — Riverpod, BLoC, and Provider have subtleties around lifecycle, disposal, and async state that LLMs frequently get wrong in non-trivial cases. The AI will generate code that looks correct, compiles cleanly, but leaks memory or produces incorrect state transitions. Tests often don't catch this.

❌ No stopping condition on agentic loops — Autonomous agents can spiral. Give them bounded tasks with clear acceptance criteria. "Implement the login screen per the Figma design and the PRD" is a good prompt. "Build the entire app" is a recipe for a mess you'll spend three days untangling.


The Flutter Vibe Coding Stack in 2026

Claude Code — Karpathy's own 2025 year-in-review called it "the first convincing demonstration of what an LLM Agent looks like." It runs in your environment with your private context, making it the most Flutter-codebase-aware option when paired with AGENTS.md.

Cursor — The dominant AI IDE with excellent multi-file operations and planning mode. Pairs well with the Dart MCP server.

Gemini CLI + Flutter Extension — Google's own answer. The Flutter Extension for Gemini CLI combines the Dart and Flutter MCP Server with additional context and commands — natural choice for Firebase-heavy Flutter projects.

Firebase Studio / DreamFlow — Higher-level "vibey" tools where you interact only with the generated app, not the code. Best for non-engineers or pure prototyping, not for production Flutter development.

Dart MCP Server — Not a standalone tool but the connective tissue. Every AI agent for Flutter becomes measurably better with it. Add it to your setup before anything else.


The Key Insight from Karpathy's 1-Year Retrospective

Karpathy's 2026 anniversary post is the most important document in this space right now. He named what skilled developers are actually doing — and it's not "vibe coding" in the throwaway sense:

"Agentic engineering: agentic because the new default is that you are not writing the code directly 99% of the time, you are orchestrating agents who do, and acting as oversight. Engineering to emphasize that there is an art & science and expertise to it."

@karpathy, Feb 2026 · x.com/karpathy/status/2019137879310836075

This reframe is everything for Flutter developers. You're not abdicating engineering judgment — you're operating at a higher level of abstraction. Your expertise shifts from "how do I write this AnimationController" to "what is the right interaction model and how do I verify the AI implemented it correctly."


The Bottom Line

Vibe coding is real, it's here, and dismissing it is as silly as dismissing hot reload in 2018. But the breathless "just describe your app and it builds itself" narrative sets up a failure mode that is very real for production Flutter development.

Flutter's architecture gives you a genuine edge. The widget tree is predictable, Dart's type system is loud about mistakes, and hot reload gives you the tightest feedback loop in mobile development. These properties mean you can move fast and maintain visibility into what the AI is generating.

Karpathy evolved from "forget the code exists" to "agentic engineering with oversight." That's the right frame. You're the architect, the QA engineer, the tech lead. The AI is your most productive junior developer — high throughput, close review, clear instructions, and never unsupervised in your security code.

"Use vibe coding wisely: accelerate where it helps, but don't let it erode your developer skills."

— Viktor Lidholt, Serverpod · serverpod.dev/blog/vibe-coding-flutter

The Flutter developers who learn to orchestrate agents well — not just prompt and accept — are the ones who will ship extraordinarily fast without accruing the technical debt that kills velocity later.


Have you been vibe coding in Flutter? What's your workflow? Drop it in the comments — I'm genuinely curious what the community has converged on.

If this was useful, follow me here on dev.to and on X [@YourHandle] for more Flutter content.


Tags: #flutter #dart #ai #vibecoding #productivity

Top comments (0)