[APP-WS-02] Reactive Fridge Screen Updates via WebSocket

Frontend: Integration

Published

October 14, 2026

NoteTask Brief
  • Repository / Component: food_tracker_mobile (Dart / Flutter).
  • Stack: web_socket_channel, BLoC / Cubit.
  • Task Type: Frontend (UI & Network).
  • Status: Under Analysis

Task Description

It is necessary to support a WebSocket connection on the mobile application side for instantaneous updates to the refrigerator content without blocking the UI layout during the receipt ingestion process.

Step-by-Step Instructions (Flutter)

  1. Environment Configuration (Crucial for Mac/Emulator): Within the NetworkConfig configuration service, map the local address for the Android emulator utilizing the 10.0.2.2 host (instead of localhost) to properly reach the local Go server environment.
  2. WebSocket Client: Design a singleton repository named WebSocketRepository based on the web_socket_channel package. Initialize the connection upon successful user authorization. Provide an auto-reconnect strategy (Heartbeat/Ping-Pong) in case of network disruptions.
  3. BLoC Layer Binding: Inside the global FridgeBloc, subscribe to the data Stream exposed by the WebSocketRepository.
  4. Event Handling: When parsing a PRODUCTS_PROCESSED event from the stream:
    • Dispatch a FetchProducts() event to the FridgeBloc to quietly update the product inventory list in the background.
    • Trigger an in-app Flushbar or SnackBar displaying the message: “Hooray! Products have been successfully added to your fridge.”
  5. Lifecycle Management (Background/Foreground): Set up socket reconnection logic when the application transitions back from the background (WidgetsBindingObserver -> AppLifecycleState.resumed).