Split the large `build` method by visual responsibility, not into `_buildXxx()` helper methods. Extract each meaningful section into a small `StatelessWidget`, pass only the data and callbacks it needs, and make widgets `const` where possible. This flattens nesting, makes rebuild boundaries clearer, and makes sections independently testable. ```dart class AccountPage extends StatelessWidget { const AccountPage({super.key, required this.account, required this.onSave}); final Account account; f...
Scanned 9/5/2026
Install to Claude Code
npx -y skills add HoangNguyen0403/agent-skills-standard --skill flutter-idiomatic-flutter --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Flutter Idiomatic Flutter?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-flutter-idiomatic-flutter-8c1ded69)More formats (shields.io, HTML) on the badges page.
Split the large `build` method by visual responsibility, not into `_buildXxx()` helper methods. Extract each meaningful section into a small `StatelessWidget`, pass only the data and callbacks it needs, and make widgets `const` where possible. This flattens nesting, makes rebuild boundaries clearer, and makes sections independently testable.
```dart
class AccountPage extends StatelessWidget {
const AccountPage({super.key, required this.account, required this.onSave});
final Account account;
final VoidCallback onSave;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Account')),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
AccountHeader(account: account),
const Gap(24),
AccountDetails(account: account),
const Gap(24),
SaveAccountButton(onPressed: onSave),
],
),
);
}
}
class AccountHeader extends StatelessWidget {
const AccountHeader({super.key, required this.account});
final Account account;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return ColoredBox(
color: colors.surfaceContainerHighest,
child: Padding(
padding: const EdgeInsets.all(16),
child: Text(account.name),
),
);
}
}
```
Prefer `ColoredBox`, `DecoratedBox`, and `Padding` over a catch-all `Container` when each widget has a single purpose. Keep layout widgets shallow; use `const SizedBox.shrink()` for an empty branch. If state becomes substantial, have the page select state from BLoC/Riverpod and pass plain values to these presentation widgets rather than accessing controllers directly in the widget tree.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!