|
| 1 | +--- |
| 2 | +title: Local Setup Guide |
| 3 | +description: Learn how to set up and run the Flutter mobile client on your local machine. |
| 4 | +--- |
| 5 | +import { Steps } from '@astrojs/starlight/components'; |
| 6 | + |
| 7 | +This guide provides step-by-step instructions to get the Flutter mobile client running on your local machine for development and testing. |
| 8 | + |
| 9 | +## Prerequisites |
| 10 | + |
| 11 | +Before you begin, ensure you have the following installed on your system: |
| 12 | +- **Flutter SDK**: The mobile client is a Flutter application. Please follow the official [Flutter installation guide](https://flutter.dev/docs/get-started/install) for your operating system. |
| 13 | +- **An IDE**: A code editor like [VS Code](https://code.visualstudio.com/) with the Flutter extension or [Android Studio](https://developer.android.com/studio). |
| 14 | + |
| 15 | +## Understanding the Environments |
| 16 | + |
| 17 | +The application can be run in three different environments, configured in `lib/main.dart`: |
| 18 | + |
| 19 | +- `AppEnvironment.demo`: This is the default environment. It uses an in-memory data store (`DataInMemory`) populated with mock data. This is perfect for quickly running the app and exploring the UI without needing a live backend. The app also wraps itself in the `DevicePreview` package in this mode, allowing you to see how it looks on various devices. |
| 20 | +- `AppEnvironment.development`: This environment is configured to connect to a local instance of the API server. It uses the `DataApi` client to make live HTTP requests. |
| 21 | +- `AppEnvironment.production`: This environment points to your live, deployed API server. |
| 22 | + |
| 23 | +You can change the active environment by modifying the `appEnvironment` constant in `lib/main.dart`: |
| 24 | + |
| 25 | +```dart title="lib/main.dart" |
| 26 | +// Define the current application environment (production/development/demo). |
| 27 | +const appEnvironment = AppEnvironment.demo; |
| 28 | +``` |
| 29 | + |
| 30 | +## Dependency Injection |
| 31 | + |
| 32 | +The application's dependencies, such as repositories and data clients, are initialized in the `bootstrap.dart` file. This function reads the selected `AppEnvironment` and injects the appropriate data clients. |
| 33 | + |
| 34 | +For example, in `demo` mode, it injects `AuthInmemory` and `DataInMemory` clients. In `development` or `production` mode, it sets up an `HttpClient` and injects `AuthApi` and `DataApi` clients to communicate with the backend. This clean separation makes the app highly testable and configurable. |
| 35 | + |
| 36 | +## Running the Application |
| 37 | + |
| 38 | +<Steps> |
| 39 | +1. **Navigate to the Project Directory** |
| 40 | + |
| 41 | + Open your terminal and navigate to the mobile client's root directory: |
| 42 | + ```sh |
| 43 | + cd apps/flutter-news-app-mobile-client-full-source-code |
| 44 | + ``` |
| 45 | + |
| 46 | +2. **Get Dependencies** |
| 47 | + |
| 48 | + Run the following command to fetch all the required packages from `pubspec.yaml`: |
| 49 | + ```sh |
| 50 | + flutter pub get |
| 51 | + ``` |
| 52 | + |
| 53 | +3. **Select a Device** |
| 54 | + |
| 55 | + Ensure you have a simulator running (iOS) or an emulator running (Android), or a physical device connected. You can see a list of available devices with: |
| 56 | + ```sh |
| 57 | + flutter devices |
| 58 | + ``` |
| 59 | + |
| 60 | +4. **Run the App** |
| 61 | + |
| 62 | + Start the application using the `flutter run` command. By default, this will launch the app in `demo` mode. |
| 63 | + ```sh |
| 64 | + flutter run |
| 65 | + ``` |
| 66 | +</Steps> |
| 67 | + |
| 68 | +The application should now be running on your selected device. Because it's in `demo` mode, you can immediately start exploring the UI and features with the pre-loaded mock data. |
0 commit comments