[APP-AA] Displaying a Placeholder When the User’s Fridge is Empty

Fridge Screen

NoteTask Brief

• Repository / Component: food_tracker_mobile (Dart / Flutter).
• Task Type: Frontend (UI/UX Interface).
• Documentation: APP: UI/UX: FoodTracker User Interfaces and Scenarios
• Design (Figma): [Link to Fridge Screen layout] TBD
• DoR/DoD: Complies with the general [Process DoD] TBD
• Status: Ready for Implementation

Task Description

When there are no products in the user’s refrigerator (the backend returns an empty array []), a localized UI placeholder (State page “Empty Fridge”) must be displayed instead of a blank screen, in accordance with the application’s system language.

Localization Requirements

The placeholder texts have been prepared and separated into distinct files. Download them using the links below and place them into the project:

• Download Russian localization template (app_ru.arb)
• Download English localization template (app_en.arb)

Step-by-Step Instructions

1. Adding Localization Keys: Place the downloaded .arb files into the project’s lib/l10n/ directory and generate new localization methods using the flutter gen-l10n command.
2. Handling the Empty State: Within the BLoC component managing the Fridge screen state (FridgeBloc / FridgeCubit), upon receiving a successful API response (200 OK) with an empty product list (products: []), transition the screen into the FridgeEmptyState.
3. UI Component Layout for the Placeholder: In the UI layer for the FridgeEmptyState, implement the placeholder widget rendering according to the Figma design:
   • Centered element placement (Center, Column).
   • Empty fridge icon (use Assets.icons.empty_fridge.svg).
   • Localized text output via AppLocalizations.of(context).
4. Testing: Write a single Widget test to verify the correctness of the placeholder rendering when an empty list is passed into the state.