Flutter Vibe Code Cleanup

Widget Trees AI Generators Get Wrong

AI generates widget trees that read like a pyramid. Scaffold wraps SafeArea wraps Column wraps Padding wraps Container wraps Row wraps Expanded wraps GestureDetector wraps Container wraps Text. Fifteen levels of nesting in a single build method. Indentation pushes the actual content off the right side of the screen. Nobody can tell where one widget ends and another begins.

State management is the real chaos. Each AI prompt recommends a different solution. Your login screen uses setState. Your home screen uses Provider. Your settings page uses Riverpod. Your chat feature uses GetX. Four state management approaches in one app. They don’t interoperate cleanly. Data shared between them requires awkward bridges. Testing is different for each approach.

Build methods do too much work. AI puts everything in build() - data transformation, conditional logic, widget construction, styling. A single build method returns 200 lines of widget code. Flutter rebuilds the entire method on every state change. There are no const constructors. No extracted widgets. The framework can’t optimize because AI gave it nothing to optimize.

Dart’s type system gets undermined. AI uses dynamic to avoid type errors. It casts with as instead of pattern matching. It uses Map<String, dynamic> for everything instead of creating model classes. JSON parsing is scattered across widgets instead of centralized in typed models. You get runtime TypeError exceptions in production because the compiler was never given the chance to catch them.

Flattening the Pyramid, One Widget at a Time

We flatten the widget tree first. Deeply nested widgets get extracted into named widget classes. A 15-level build method becomes a composition of 4-5 focused widgets, each with a clear name and responsibility. const constructors are added wherever possible so Flutter can skip rebuilding widgets whose inputs haven’t changed.

State management gets consolidated. We pick one approach - typically Riverpod for its testability and type safety - and migrate everything to it. setState calls that manage complex state move to providers. GetX controllers become Riverpod notifiers. Provider instances migrate to Riverpod providers with proper scoping. The app has one mental model for state, not four.

Build methods get decomposed. Data transformation moves to the state layer. Conditional logic becomes separate widgets with clear render conditions. Styling moves to a theme. What’s left in build() is pure widget composition - small, readable, and fast to rebuild because most children are const.

Dart types replace dynamic. We create model classes for every API response. JSON parsing happens once, in the model’s fromJson factory. Widgets receive typed objects, never raw maps. The Dart analyzer is configured with strict-casts, strict-raw-types, and strict-inference. Every dynamic usage is flagged and must be justified.

From Jank to 60fps

Before: A Flutter app with build methods averaging 180 lines. Three state management libraries. Widget trees nested 12-15 levels deep. The Dart analyzer shows 400+ warnings that everyone ignores. Frame rendering exceeds 16ms on mid-range devices, causing visible jank during scrolls and transitions.

After: Build methods under 50 lines. One state management approach with consistent patterns. Widget trees 4-5 levels deep with named, reusable components. Zero analyzer warnings. Frame rendering under 8ms. Smooth 60fps on the same devices that stuttered before.

The development speed improvement is dramatic. Adding a new screen that took three days - because the developer had to figure out which state management to use, how to thread data through nested widgets, and where to put the business logic - now takes half a day. The architecture answers those questions before the developer asks them.

Lint Rules and Architecture Tests That Keep Dart Clean

The Dart analyzer with custom lint rules is your strongest defense. We configure analysis_options.yaml with strict rules: no dynamic types, no print() statements, required const constructors, mandatory documentation on public APIs. These rules run in CI and block merges that introduce AI-generated shortcuts.

We establish widget catalogs using Widgetbook. Every shared widget is documented with its parameters, variations, and usage examples. When AI generates a custom button instead of using the existing AppButton widget, it’s caught during review. Duplication becomes visible.

Integration tests with patrol cover critical user flows on both platforms. Not widget tests that mock everything - actual integration tests that tap buttons, enter text, and verify screens on iOS and Android emulators. These catch the platform-specific issues AI never considers.

Architecture tests verify the dependency graph. Business logic doesn’t import Flutter widgets. The data layer doesn’t import the presentation layer. State management doesn’t depend on specific widgets. If AI generates code that violates these boundaries, the test fails with a clear message about which dependency is invalid.