Frontend · Any coding agent
Flutter 3 & Riverpod / Dart ARCHITECTURE.md
An ARCHITECTURE.md for Flutter 3 & Riverpod / Dart: module responsibilities, data flow and the boundaries code changes must keep.
- Path
- ARCHITECTURE.md
- Loads
- Read when referenced
- Format
- Markdown (.md)
- Used by
- Any coding agent
What this file tells the agent
ARCHITECTURE.md describes module responsibilities, state boundaries and data flow, so a coding agent knows where code belongs before it changes anything. Point to it from CLAUDE.md or AGENTS.md so agents read it.
- Always add const constructors wherever possible to maximize Flutter element rebuild caching.
- Use Riverpod 3 with code generation (@riverpod, Notifier/AsyncNotifier) or BLoC; ban raw mutable setState() in business logic.
- Leverage Dart 3 pattern matching and sealed classes for exhaustive state and error representation.
- Enforce sound null safety: avoid force-unwrapping with ! unless proven non-null by a preceding guard clause.
- Separate presentation UI widgets from asynchronous repository and API service layers.
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
// Discouraged: Mutable setState with force-unwrap and missing const
class BadProfile extends StatefulWidget {
@override
_BadProfileState createState() => _BadProfileState();
}
class _BadProfileState extends State<BadProfile> {
var user;
void load() async {
user = await fetchUser();
setState(() {});
}
@override
Widget build(BuildContext context) {
return Container(child: Text(user!.name)); // Runtime crash if null!
}
}import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@immutable
sealed class ViewState<T> {
const ViewState();
}
class Loading<T> extends ViewState<T> { const Loading(); }
class Success<T> extends ViewState<T> { final T data; const Success(this.data); }
class Failure<T> extends ViewState<T> { final String message; const Failure(this.message); }
class ProfileView extends ConsumerWidget {
const ProfileView({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(profileProvider);
return Scaffold(
appBar: AppBar(title: const Text('Profile')),
body: switch (state) {
Loading() => const Center(child: CircularProgressIndicator.adaptive()),
Success(:final data) => Center(child: Text('Welcome, ${data.name}')),
Failure(:final message) => Center(child: Text('Error: $message')),
},
);
}
}Install it in one command
- 01
Go to your project root
The file goes at ARCHITECTURE.md, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Agents read it when your CLAUDE.md or AGENTS.md points to it. Add a line such as "Read ARCHITECTURE.md before structural changes".
$ curl -fsSL "https://www.devscratchpad.tech/api/raw/architecture-md/flutter-dart" -o "ARCHITECTURE.md"
writes ARCHITECTURE.md
ARCHITECTURE.md
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for Flutter 3 & Riverpod / Dart
Questions
- What belongs in ARCHITECTURE.md?
- How the main modules relate, how state and data flow, and the boundaries every change must keep.
- How does ARCHITECTURE.md help AI agents?
- It tells them where code belongs and which boundaries to keep, so they are less likely to add circular dependencies or skip layers. Point to it from CLAUDE.md or AGENTS.md so they read it.