Flutter UI Pro — Professional Flutter UI Builder

1. Check if shared widgets already exist for what you need. Read references/components.md.
2. Check the theme constants for the correct color, spacing, or text style. Read references/theme.md.
3. Identify the screen pattern (list, detail, form, dashboard, etc.) and follow the layout pattern from references/patterns.md.

File Organization

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

How to Build a Screen

Step 1: Create the GetX structure

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)

Step 2: Build the view

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(),
    );
  }
}

Step 3: Style with theme tokens — NEVER hardcode

// 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),
  ),
)

Visual Quality Checklist

Before finishing any screen, verify:

• Consistent spacing rhythm (use AppSpacing multiples)
• Text hierarchy is clear (title > subtitle > body > caption)
• Interactive elements have adequate touch targets (min 48px)
• Loading states use shimmer placeholders, not spinners
• Empty states have illustration + message + action button
• Cards have subtle shadows (not flat, not heavy)
• Status indicators use badges with semantic colors
• RTL support works (app is Arabic-first)
• Dark mode looks intentional, not just inverted
• No orphaned text or awkward line breaks

Arabic & RTL Guidelines

This app is Arabic-first. Every UI decision should account for RTL:

• Use Directionality or let MaterialApp handle it via locale
• Prefer start/end over left/right in padding/alignment
• Icons that imply direction (arrows, back buttons) should flip in RTL
• Use Cairo or Tajawal font for Arabic text
• Test every screen visually in RTL — text alignment, icon positions, swipe directions

Code Style

• const constructors everywhere possible
• Extract widgets when a build method exceeds ~80 lines
• Named parameters for all custom widgets
• Document public widgets with /// doc comments
• Prefer context.theme over Theme.of(context) (GetX extension)
• Use context.width / context.height for responsive sizing