awesome-agentic-ai/HOWTO_MOBILE.md

📱 Mobile UI Development Guide (Flutter)

1. Project Overview

The mobile interface is built with Flutter for cross-platform deployment (Android/iOS). It acts as a native client for the FastAPI backend.

📁 Folder Structure

mobile-flutter/
├── lib/
│   ├── main.dart           # App Entry Point
│   ├── screens/            # UI Screens
│   │   ├── dashboard_screen.dart
│   │   ├── crew_dashboard_screen.dart
│   │   └── ...
│   ├── services/           # Backend Data Services
│   │   ├── crew_service.dart
│   │   └── ...
│   └── models/             # Data Models
├── pubspec.yaml            # Dependencies
└── ...

---

2. Setup & Installation

📦 Prerequisites

• Flutter SDK: v3.x+
• Dart SDK
• Android Studio or Xcode (for emulators/deployment)

📥 Install Dependencies

cd mobile-flutter
flutter pub get

Key dependencies:

• http: For REST API communication.
• provider or bloc: (Optional) for state management.

---

3. Configuration

🔗 Backend URL

The app expects the backend to be running at http://localhost:8000.

• Note: When running on an Android emulator, use http://10.0.2.2:8000.
• Note: When running on a physical device, use the local IP of your development machine.

---

4. Key Features

👥 Crew Monitoring (Phase 11)

• CrewDashboardScreen: Aligned with the backend API.
• Data Mapping:
  • agent_role -> Display Name
  • score -> Trust Indicator
  • success / failure -> Performance Stats

---

5. Running the App

flutter run