Automating Flutter App Builds with GitHub Actions: Firebase App Distribution and GitHub Releases

Manish Kumar — Sun, 20 Oct 2024 10:09:07 +0000

Introduction

This documentation provides a step-by-step guide on setting up GitHub Actions for your Flutter project to automate the process of building and uploading releases to both Firebase App Distribution and GitHub Releases. It covers generating necessary tokens, configuring secrets, and creating a workflow for continuous integration and deployment.

1. Generate a Personal Access Token on GitHub

A personal access token on GitHub functions like an OAuth access token and authenticates access to the GitHub API.

Navigate to your Git account settings, then Developer Settings. Click the Personal access tokens menu, then click Generate new token.
Select repo as the scope. The token will be applicable for all the specified actions in your repositories.
Click Generate Token. GitHub will display the personal access token only once. Ensure that you copy the token and store it in a safe space.

This token will be used in the Integration function's code, enabling access to necessary repository information.

2. Create a New Secret on GitHub

To securely store sensitive information like tokens, create a new secret in your GitHub repository:

Navigate to your repository on GitHub.
Go to Settings > Secrets & Variables and click Actions.
Click on New repository secret.
Enter a Name for your Secret (e.g., FIREBASE_APP_ID) and paste the value of the token you generated earlier.
Click Add secret to save.

3. Generate a Firebase CLI Authentication Token

If your project uses Firebase, you'll need to generate a Firebase CLI authentication token:

Install Firebase CLI: Run the following command:
```
npm install -g firebase-tools
```
Login to Firebase: Use the command:
```
firebase login
```
This will open a browser window for login.
Generate a Token: After logging in, generate a token with:
```
firebase login:ci
```

Copy and securely store the generated token in GitHub actions secrets

4. Set Up GitHub Actions Workflow

Create a new file in your repository at .github/workflows/main.yml with the following content:

name: Deploy Build and Release apk

on:
  pull_request:
    branches:
      - main

  push:
    branches:
      - main

jobs:
  build:
    name: Deploy Build APK
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-java@v3
        with:
          distribution: "zulu"
          java-version: "17"

      - run: git config --global --add safe.directory /github/workspace

      - name: Set up Node.js
        uses: actions/setup-node@v4.0.4
        with:
          node-version: "18" # Specify your Node.js version

      - name: Get Flutter Version
        id: flutter_version
        uses: bungabear/flutter_version_read@main
        with:
          file: ./pubspec.yaml

      - name: Flutter App Version Number
        run: echo 'version_number:' ${{ steps.flutter_version.outputs.version_number }}

      - name: Flutter App Build Number
        run: echo 'build_number:' ${{ steps.flutter_version.outputs.build_number }}

      - uses: subosito/flutter-action@v2
        with:
          flutter-version: 3.24.3

      - run: flutter pub get
      - run: flutter build apk

      - name: Rename APK
        run: |
          VERSION_NUMBER=${{ steps.flutter_version.outputs.version_number }}
          BUILD_NUMBER=${{ steps.flutter_version.outputs.build_number }}
          mv build/app/outputs/flutter-apk/app-release.apk build/app/outputs/flutter-apk/app_name-${VERSION_NUMBER}-${BUILD_NUMBER}.apk

      - name: Upload the APK onto Github
        uses: ncipollo/release-action@v1
        with:
          artifacts: "build/app/outputs/flutter-apk/*.apk"
          token: ${{ secrets.GH_TOKEN }}
          tag: ${{ steps.flutter_version.outputs.version_number }}+${{ steps.flutter_version.outputs.build_number }}

      - name: Upload to Firebase App Distribution
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
        run: |
          curl -sL https://firebase.tools | bash  # Install Firebase CLI
          firebase appdistribution:distribute build/app/outputs/flutter-apk/app_name-${{ steps.flutter_version.outputs.version_number }}-${{ steps.flutter_version.outputs.build_number }}.apk --app ${{ secrets.FIREBASE_APP_ID }} --groups rpa-testers --release-notes "New release for version ${{ github.ref }}"

5. Commit and Push

Commit the workflow file to your repository and push it to GitHub. This will trigger the GitHub Actions workflow on your next push to the main branch or when opening a pull request.

Security Considerations

Never commit tokens or sensitive information directly in your code or workflow files.
Regularly rotate your tokens and update the corresponding secrets in GitHub.
Review and limit the permissions granted to your personal access tokens.
Monitor your GitHub Actions usage and review logs for any suspicious activity.

By following these steps, you'll have set up a basic CI/CD pipeline using GitHub Actions, incorporating both GitHub and Firebase authentication for your project.

Flutter App Multiple Audio/Video Playback Issue

Manish Kumar — Mon, 08 Apr 2024 16:44:23 +0000

Problem Description:

When playing background audio, normal audio, and video simultaneously in a Flutter app, you encounter several issues:

Audio Interruptions: The music stops when the app loses focus or the user switches to another app.
Video Display Problems: Sometimes the video doesn’t play or doesn’t show up at all.
Error Messages: During the debugging process, an error message is displayed.

dispatching onAudioFocusChange(-1) to android.media.AudioManager@c7d4210com.ryanheise.audio_session.AndroidAudioManager$Singleton$$ExternalSyntheticLambda0@3d63109

Solution:

To resolve this issue, it is recommended to utilize the videoPlayerOptions parameter with the mixWithOthers property set to true when initializing the VideoPlayerController. This option allows the video to continue playing while other audio sources are also playing simultaneously.

Implementation Steps:

Import the required dependencies in your Flutter application:

import 'package:video_player/video_player.dart';

Initialize the VideoPlayerController with the videoPlayerOptions property set to VideoPlayerOptions(mixWithOthers: true).

VideoPlayerController _controller = VideoPlayerController.network('YOUR_VIDEO_URL',
  videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true))
    ..initialize().then((_) {
      // Once the video has been initialized, play it.
      _controller.play();
    });

Ensure that the mixWithOthers property is set to true to allow simultaneous playback of video and other audio sources.

Additional Notes:

By setting mixWithOthers to true, you can avoid conflicts between different audio sources and ensure smooth playback of both video and background audio in your Flutter application.
It's advisable to test the changes thoroughly to ensure that all audio and video sources play correctly without any interruptions.

By following these steps and implementing the suggested solution, you should be able to overcome the audio/video playback issue in your Flutter application and enhance the overall user experience.

DEV Community: Manish Kumar