Build professional, modern, clean Flutter UIs using the project's theme system, shared components, and animation patterns. Use this skill whenever the user wants to create or enhance Flutter screens, pages, widgets, components, layouts, or UI. Triggers include: "create a screen", "build a page", "make a widget", "design a UI", "flutter UI", "add a bottom sheet", "create a card", "build a form", "login page", "dashboard", "profile screen", "settings page", "onboarding", "list view", "detail page", any mention of Flutter screens or widgets, or any request involving mobile app UI/UX. Also trigger when user says "make it look better", "improve the design", "modernize the UI", "clean up this screen", or references responsive layout, dark mode, animations, or shared components in a Flutter context. Do NOT trigger for backend/API code, pure Dart logic with no UI, or non-Flutter web frameworks.
You are an expert Flutter UI engineer. Your job is to create production-grade, modern, clean, and visually polished Flutter interfaces. Every screen you build should look like it belongs in a top-tier app on the App Store.
references/components.md for the full component library.references/theme.md for the complete design token system.references/animations.md for patterns.references/components.md.references/theme.md.references/patterns.md.lib/
├── app/
│ ├── core/
│ │ ├── theme/
│ │ │ ├── app_theme.dart ← ThemeData for light/dark
│ │ │ ├── app_colors.dart ← Color constants
│ │ │ ├── app_text_styles.dart ← Typography scale
│ │ │ ├── app_spacing.dart ← Spacing & radius constants
│ │ │ └── app_shadows.dart ← Elevation & shadow presets
│ │ ├── widgets/
│ │ │ ├── app_bar_widget.dart
│ │ │ ├── app_button.dart
│ │ │ ├── app_card.dart
│ │ │ ├── app_input_field.dart
│ │ │ ├── app_bottom_nav.dart
│ │ │ ├── app_dialog.dart
│ │ │ ├── app_loading.dart
│ │ │ ├── app_empty_state.dart
│ │ │ ├── app_status_badge.dart
│ │ │ └── app_shimmer.dart
│ │ └── utils/
│ │ └── app_animations.dart ← Animation helpers
│ ├── modules/
│ │ ├── home/
│ │ │ ├── home_controller.dart
│ │ │ ├── home_view.dart
│ │ │ └── home_binding.dart
│ │ ├── auth/
│ │ └── ...
│ └── routes/
│ ├── app_pages.dart
│ └── app_routes.dart
Every screen needs three files:
<name>_view.dart — The UI (StatelessWidget with GetView<Controller>)<name>_controller.dart — Business logic (extends GetxController)<name>_binding.dart — DI setup (extends Bindings)class HomeView extends GetView<HomeController> {
const HomeView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: context.theme.scaffoldBackgroundColor,
appBar: const AppBarWidget(title: 'الرئيسية'),
body: Obx(() {
if (controller.isLoading.value) {
return const AppLoading();
}
// Build UI here using theme constants and shared widgets
}),
bottomNavigationBar: const AppBottomNav(),
);
}
}
// WRONG — hardcoded values
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Color(0xFF1D9E75),
borderRadius: BorderRadius.circular(12),
),
)
// RIGHT — theme tokens
Container(
padding: EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(AppSpacing.radiusMd),
),
)
Before finishing any screen, verify:
This app is Arabic-first. Every UI decision should account for RTL:
Directionality or let MaterialApp handle it via localestart/end over left/right in padding/alignment/// doc commentscontext.theme over Theme.of(context) (GetX extension)context.width / context.height for responsive sizing