|
| 1 | +--- |
| 2 | +title: 'Deployment: Mobile Client' |
| 3 | +description: A guide to building and deploying the Flutter mobile app for Android and iOS. |
| 4 | +--- |
| 5 | + |
| 6 | +import { Steps, Tabs, TabItem, Aside } from '@astrojs/starlight/components'; |
| 7 | + |
| 8 | +This guide covers the essential pre-release tasks for building and deploying the Flutter News App Mobile Client to the Google Play Store and Apple App Store. |
| 9 | + |
| 10 | +<Aside> |
| 11 | +Before you begin, ensure you have configured the app to connect to your production API server by setting the `appEnvironment` constant in `lib/main.dart` to `AppEnvironment.production`. |
| 12 | +</Aside> |
| 13 | + |
| 14 | +<Tabs> |
| 15 | +<TabItem label="Android"> |
| 16 | +<Steps> |
| 17 | +1. **Update the Package ID** |
| 18 | + |
| 19 | + The Android package ID is a unique identifier for your app. You must change it from the default. |
| 20 | + - Open `android/app/build.gradle`. |
| 21 | + - Locate the `applicationId` field and change its value to your own unique ID (e.g., `com.yourcompany.newsapp`). |
| 22 | + |
| 23 | +2. **Change the App Display Name** |
| 24 | + |
| 25 | + - Open `android/app/src/main/AndroidManifest.xml`. |
| 26 | + - Find the `android:label` attribute within the `<application>` tag and update its value to your app's name. |
| 27 | + |
| 28 | +3. **Generate App Icons** |
| 29 | + |
| 30 | + The project uses the `flutter_launcher_icons` package to generate app icons. |
| 31 | + - Replace the placeholder icon file in your project's `assets` folder with your own icon (`1024x1024` recommended). |
| 32 | + - Update the `flutter_launcher_icons.yaml` file if your icon has a different name. |
| 33 | + - Run the following command to generate the icons: |
| 34 | + ```bash |
| 35 | + flutter pub run flutter_launcher_icons |
| 36 | + ``` |
| 37 | + |
| 38 | +4. **Create a Production Keystore** |
| 39 | + |
| 40 | + You must sign your Android app with a private key before uploading it to the Play Store. |
| 41 | + - Follow the official Android documentation to [generate a new upload key and keystore](https://developer.android.com/studio/publish/app-signing#generate-key). |
| 42 | + - Securely store the generated `.jks` file and remember your passwords. |
| 43 | + |
| 44 | +5. **Configure Gradle for Signing** |
| 45 | + |
| 46 | + - Create a file named `android/key.properties` (this file is in `.gitignore` and should not be committed). |
| 47 | + - Add your keystore information to this file: |
| 48 | + ```properties |
| 49 | + storePassword=YOUR_STORE_PASSWORD |
| 50 | + keyPassword=YOUR_KEY_PASSWORD |
| 51 | + keyAlias=YOUR_KEY_ALIAS |
| 52 | + storeFile=path/to/your/keystore.jks |
| 53 | + ``` |
| 54 | + - Open `android/app/build.gradle` and ensure the signing configuration section is set up to read from this `key.properties` file. |
| 55 | + |
| 56 | +6. **Build the Release Bundle** |
| 57 | + |
| 58 | + Generate a production-ready Android App Bundle (`.aab`): |
| 59 | + ```bash |
| 60 | + flutter build appbundle |
| 61 | + ``` |
| 62 | + The output file will be located at `build/app/outputs/bundle/release/app-release.aab`. You can now upload this file to the Google Play Console. |
| 63 | + |
| 64 | +</Steps> |
| 65 | +</TabItem> |
| 66 | +<TabItem label="iOS"> |
| 67 | +<Steps> |
| 68 | +1. **Update the Bundle Identifier** |
| 69 | + |
| 70 | + The iOS bundle identifier is a unique ID for your app. |
| 71 | + - Open the project in Xcode (`ios/Runner.xcworkspace`). |
| 72 | + - In the Project Navigator, select the `Runner` target. |
| 73 | + - Go to the "General" tab and update the "Bundle Identifier" field to your unique ID (e.g., `com.yourcompany.newsapp`). |
| 74 | + |
| 75 | +2. **Update the Display Name** |
| 76 | + |
| 77 | + - In the same "General" tab in Xcode, update the "Display Name" field to your app's name. |
| 78 | + |
| 79 | +3. **Generate the App Icon Set** |
| 80 | + |
| 81 | + - In Xcode, navigate to `Runner/Assets.xcassets` and select `AppIcon`. |
| 82 | + - Drag and drop your prepared app icons (`.png` files of various required sizes) into the appropriate slots. You can use an online tool to generate these sizes from a single `1024x1024` image. |
| 83 | + |
| 84 | +4. **Configure Signing & Capabilities** |
| 85 | + |
| 86 | + - In Xcode, go to the "Signing & Capabilities" tab. |
| 87 | + - Select your development team and ensure a provisioning profile and signing certificate are correctly configured. This is required for deploying to a real device or the App Store. You will need an active Apple Developer account. |
| 88 | + |
| 89 | +5. **Build the Release Archive** |
| 90 | + |
| 91 | + Create a build archive to upload to App Store Connect. |
| 92 | + ```bash |
| 93 | + flutter build ipa |
| 94 | + ``` |
| 95 | + This command will create an `.ipa` file inside the `build/ios/ipa/` directory. You can then upload this archive to App Store Connect using Xcode's Organizer or the Transporter app for testing via TestFlight or submission to the App Store. |
| 96 | + |
| 97 | +</Steps> |
| 98 | +</TabItem> |
| 99 | +</Tabs> |
0 commit comments