How to write really good Flutter code

by Eric Windmill, Mariam Hasnany, John Ryan

Day 4 · · Cloud · 15 min · 3 min read

Cloud Architecture

TL;DR

Seven techniques for writing readable, scalable, testable Flutter code: designing with constraints, using dev tools, building reusable widgets, implementing MVVM architecture, applying the repository pattern, designing for all platforms, and writing tests. The talk demonstrated these with a checkout experience in Dash Shop app, using AI assistance via Antigravity and the Dart and Flutter MCP server.

Design with Constraints, Not Fixed Sizes

▶ Watch (0:48)

Use Flutter’s flex layout primitives to make widgets resize based on constraints. When the screen gets too small or large, swap the layout entirely. Abstract the shared data, measure using LayoutBuilder, and return different widgets based on available width. Flutter Dev Tools highlight layout overflow errors. The Dart and Flutter MCP server makes these tools available to AI agents, which can read runtime errors and automatically fix overflow issues using hot reload.

Build Reusable Widgets with AI Assistance

▶ Watch (4:31)

Separate business logic from UI by passing all configuration as widget constructor arguments. Avoid importing low-level libraries or making network calls inside widgets. Use callbacks for events. Reusable widgets enable widget previews, a tool that shows UI variations without running the full app. The Flutter team published a skill on GitHub that instructs AI agents to generate previews for an app’s widget catalog. The skill was validated with the open-source eval framework at github.com/flutter/evals.

Separate Concerns with MVVM and Repository Pattern

▶ Watch (7:51)

Layered architecture in Flutter uses MVVM. View models transform app data into render-ready data, tell the data layer when user interaction requires modification, and call notifyListeners to rebuild the UI. The repository pattern centralizes data access. A repository is the only object that fetches data from or writes data to an external source. In the Dash Store app, the cart view model defers data mutation logic to the repository. This isolation makes the codebase easier to test and scale. The official architecture skill makes AI agents expert in this pattern.

Design for All Platforms and Write Tests

▶ Watch (10:12)

Flutter plugins on pub.dev expose native features like payments with a single Dart interface. The Dart and Flutter MCP server lets AI agents search pub.dev in real time, fetch documentation, and write code using the latest API. Testing includes unit tests with the new checks package, widget tests that run without a device, and integration tests that reuse the same API. The Flutter integration testing skill enables Flutter driver to interact with the app, run a user journey on a real device, and capture steps into an integration test.

Notable Quotes

The widget shouldn’t care about where the data comes from, just that it needs to display it. Mariam Hasnany · ▶ Watch (2:08)

Layout errors contain a lot of details that Gemini is really good at understanding. Mariam Hasnany · ▶ Watch (4:19)

If your widget is importing low-level libraries, making remote requests, or interacting with a database, it’s probably not reusable. Mariam Hasnany · ▶ Watch (5:03)

Key Takeaways

Use LayoutBuilder instead of fixed sizes for responsive UI across devices.
Separate widgets, view models, and repositories for testable Flutter code.
Leverage the Dart and Flutter MCP server to let AI agents search pub.dev and fix errors.

Filed under

Cloud Architecture