logo

Introduction

Flutter, a Google-created framework, facilitates open-source mobile app development for both Android and iOS platforms. It serves as the primary tool for creating applications, with shared configuration steps for Android and iOS compilation. This section will delve into these shared configuration steps.

Requirements

  • Flutter version 3.22.0

  • Dart version 3.3.0

  • Dev tools version 2.34.3

  • Engine revision f6344b75dc

  • Upstream repository https://github.com/flutter/flutter.git

  • To edit this project you must have Flutter and Dart installed and configured successfully on your device Install flutter

  • Flutter (Channel stable, 3.22.0, on macOS 12.3.1 21E258 darwin-arm (Rosetta), locale en-BD)

  • Framework • revision abb292a07e (3 months ago) • 2024-02-20 14:35:05 -0800

Get Started

Download and extract the Flutter application.Open the project using your preferred IDE: Android Studio, Visual Studio Code, or IntelliJ.

Edit the remote link in utils/app_constants.dart to establish a connection between your mobile app and the RestApi.

Navigate to the "android/app/src/main/res/mipmap-mdpi/launcher_icon.png" directory and substitute the existing image with your desired logo or app icon.

Configuration for Android

Change your app icon (ic_launcher.png) folders How to generate an app icon? after you generate icons folder

  • /mipmap-hdpi in /android/app/src/main/res/ folder
  • /mipmap-mdpi in /android/app/src/main/res/ folder
  • /mipmap-xhdpi in /android/app/src/main/res/ folder
  • /mipmap-xxhdpi in /android/app/src/main/res/ folder
  • /mipmap-xxxhdpi in /android/app/src/main/res/ folder

Get Dependencies

Just run the following command

  • flutter clean
  • flutter pub get

Modify Package Name

To change the package name, follow these steps.

Modify the package name in the file located at /android/app/build.gradle.
  • defaultConfig {
    applicationId "your package name"
    minSdkVersion flutter.minSdkVersion
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    }
  • Then run the following command
    flutter pub get

Run Android Application

In the target selector, choose an Android device to run the app. If no devices are available, go to Tools > Android > AVD Manager and create one. For detailed instructions, refer to the section on Managing AVDs.
"If you're not utilizing Android Studio or IntelliJ, you can employ the command line to execute your application with the following command:"
flutter run

Build And Install App

  • Save your project after making changes.
  • Open the console.
  • Navigate to your project folder.
  • Execute the command: flutter build apk --release to build your app.
  • When publishing your app on the Play Store, it's advisable to either employ app bundles or divide the APK into smaller parts to minimize its size.
  • To create an app bundle, execute the following command in Flutter: flutter build appbundle --target-platform android-arm,android-arm64,android-x64
    Learn more on https://developer.android.com/guide/app-bundle
  • Retrieve the APK file located in the build/output/apk folder. To install the application on your connected device, execute the following command.

Push Notifications Setup for iOS (Flutter + Firebase)

This documentation provides step-by-step instructions on how to configure push notifications for an iOS app built using Flutter and Firebase. It covers creating a Firebase project, setting up an iOS project in Xcode, and configuring Apple Developer Account services.

01. Create a Firebase Project

1.1 Go to Firebase Console:

1.2 Create a New Project:

  • Click on Add Project and provide a project name (e.g., "InvoiceX").
  • Optionally, enable Google Analytics.
  • Complete the project setup.

1.3 Navigate to Project Settings:

  • Once the project is created, go to the Project Settings by clicking the gear icon next to Project Overview.

02. Set Up iOS in Firebase

2.1 Add iOS App:

  • In Project Settings, click the iOS icon under Your Apps.

2.2 Enter iOS App Information:

  • Provide the iOS Bundle ID (e.g., com.example.myApp). This should match the Bundle Identifier in your Xcode project.
  • Fill in the other optional fields (e.g., App Nickname) and click Register App.

2.3 Download GoogleService-Info.plist:

  • After registration, download the GoogleService-Info.plist file and keep it safe.

2.4 Add GoogleService-Info.plist to Flutter Project:

  • In your Flutter project, open the ios folder.
  • Move the downloaded GoogleService-Info.plist into the ios/Runner folder.
  • In Xcode, right-click the Runner folder, select Add Files to "Runner", and choose the GoogleService-Info.plist file.

03. Apple Developer Account Setup

3.1 Register for an Apple Developer Account:

04. Set Up App ID in Apple Developer Portal

4.1 Go to Certificates, Identifiers & Profiles:

  • In your developer account, navigate to Certificates, Identifiers & Profiles.

4.2 Create App ID:

  • Under Identifiers, click + to create a new App ID.
  • Choose App ID (Bundle ID) and ensure it matches the one in Firebase (e.g., com.theme29.invoicex).
  • Enable Push Notifications from the capabilities list.

05. Generate APNs Authentication Key

5.1 Create a Key for Push Notifications:

  • In Certificates, Identifiers & Profiles, go to Keys and click + to create a new key.
  • Provide a name for the key (e.g., MyAppPushKey) and select Apple Push Notifications Service (APNs).
  • Download the .p8 file and save the Key ID (you will need this later).

06. Connect Firebase with APNs

6.1 Navigate to Firebase Console:

  • In Firebase, go to Project Settings > Cloud Messaging.

6.2 Upload APNs Key:

  • Under APNs Authentication Key, upload the .p8 file you downloaded.
  • Enter the Key ID and Team ID (found in your Apple Developer account under Membership).

07. Configure Push Notifications in Xcode

7.1 Enable Push Notifications Capability:

  • In Xcode, open Runner.xcodeproj.
  • Navigate to the Signing & Capabilities tab.
  • Click + Capability and add Push Notifications.

7.2 Configure Background Modes:

  • In the Signing & Capabilities tab, add Background Modes and check Remote Notifications.

08. Testing Push Notifications

8.1 Test on Real Device:

  • Push notifications cannot be tested on the iOS Simulator. Use a real device.

8.2 Send a Test Message:

  • Go to Firebase Console > Cloud Messaging, and send a test message to your device using the FCM token.

09. Optional: Notification Service Extension

9.1 Add Notification Service Extension:

  • If you want to handle custom notifications or media attachments, add a Notification Service Extension:
  • In Xcode, go to File > New > Target.
  • Choose Notification Service Extension and name it (e.g., MyAppNotificationService).
  • This extension will let you modify or enrich incoming notifications.

10. Important Notes

  • Ensure Bundle ID Match: The Bundle ID must match between your Xcode project and Firebase settings.
  • Use a Real Device: Push notifications will not work on the iOS simulator.
  • Apple Developer Account: Ensure you have a valid Apple Developer account to configure push notifications.
  • Production APNs Certificates: For production, make sure you create the appropriate production APNs certificates.