flutter_ui_layer

🎯 UI Layer (Presentation)

Purpose: Display information and handle user interactions

Components:

• Views (Widgets): Display UI, capture user input
• ViewModels: Hold UI state, expose data and commands

Rules:

1. Views MUST be as simple as possible
2. Views MUST NOT contain business logic
3. Views SHOULD be StatelessWidget when possible
4. ViewModels MUST extend ChangeNotifier
5. ViewModels MUST NOT import UI code
6. ViewModels MUST use repositories for data operations
7. All async operations MUST be wrapped in Commands (see flutter_design_patterns.mdc)

Example Screen

// ✅ CORRECT: Simple, delegates everything to ViewModel
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key, required this.viewModel});
  
  final HomeViewModel viewModel;
  
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: viewModel,
      child: const _HomeScreenContent(),
    );
  }
}

class _HomeScreenContent extends StatelessWidget {
  const _HomeScreenContent();
  
  @override
  Widget build(BuildContext context) {
    final viewModel = context.watch<HomeViewModel>();
    
    return Scaffold(
      body: ListenableBuilder(
        listenable: viewModel.loadData,
        builder: (context, child) {
          // Handle loading state
          if (viewModel.loadData.running) {
            return const Center(child: CircularProgressIndicator());
          }
          
          // Handle error state
          if (viewModel.loadData.error) {
            return ErrorIndicator(
              title: 'Failed to load data',
              onRetry: viewModel.loadData.execute,
            );
          }
          
          // Show data
          return child!;
        },
        child: ListView.builder(
          itemCount: viewModel.items.length,
          itemBuilder: (context, index) {
            return ItemTile(item: viewModel.items[index]);
          },
        ),
      ),
    );
  }
}