Flutter Design Guard
A Dart Analyzer plugin that keeps Flutter UI code aligned with your design
system in the IDE, dart analyze, and flutter analyze.
What it guards
avoid_native_text_field— reports directTextFieldandTextFormFieldusage and points developers to your approved wrapper.avoid_hardcoded_color— reportsColors.*,Color(...),Color.fromARGB(...), andColor.fromRGBO(...)so UI colors come from theme or design tokens.
Theme colors such as Theme.of(context).colorScheme.primary and custom token
classes such as AppColors are allowed.
Install
Enable the official analyzer plugin and its diagnostics in
analysis_options.yaml:
plugins:
flutter_design_guard:
version: ^0.1.2
diagnostics:
avoid_native_text_field: true
avoid_hardcoded_color: true
No pubspec.yaml dependency or source import is required.
Configure
To customize their guidance, create flutter_design_guard.yaml at the project
root:
rules:
avoid_native_text_field:
replacement: AppField
implementation_paths:
- lib/design_system/app_field.dart
avoid_hardcoded_color:
replacement: AppColors
implementation_paths:
- lib/design_system/app_colors.dart
implementation_paths are project-relative files where native widgets or
hardcoded colors are allowed, typically the files that define your approved
design-system abstractions.
Example
// Reported
TextField();
TextFormField();
Container(color: Colors.red);
final brand = Color(0xFF6750A4);
// Approved
AppField();
Container(color: Theme.of(context).colorScheme.primary);
Container(color: AppColors.brand);
Run dart analyze or flutter analyze. See the usage guide
for diagnostic configuration, exclusions, and troubleshooting.
License
MIT