GitHub Actions で Flutter の自動フォーマットのプルリクを作成（fvm を利用）

はじめに

あまり fvm ( Flutter Version Management ) を活用して CI を構築している例がなかったので、今回記事にしてみました

今後は、さらにローカルで Flutter バージョンの切り替えが必要になってくると思うので、CI でも使いやすいバージョン管理ツールはおすすめです

他にも asdf というバージョン管理ツールがありますが、今回は割愛いたします

環境

• macOS Monterey バージョン 12.0.1
• Android Studio Arctic Fox | 2020.3.1 Patch 4
• fvm 2.2.5
• Git 2.34.1

fvm をインストールしておきます。
MacOS・Linux は Homebrew、Windows は Chocolatey を利用するようです。
この記事は MacOS 前提で進めていきますので、ご注意ください

プロジェクト作成

# プロジェクトを作成したい場所に移動
cd {プロジェクトを作成したい場所}

# ディレクトリを作成してそこに移動
mkdir demo
cd demo

# Flutter 2.8.0 を使用するように指定してプロジェクトを作成
fvm use 2.8.0 --force
fvm flutter create .

.gitignore に設定追加

cat <<EOF >> .gitignore

# fvm related
.fvm/flutter_sdk
EOF

GitHub にリポジトリを作成

Git の設定

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/blendthink/format-demo.git
git push -u origin main

※ git push でエラーが発生してしまった場合は、Git の認証周りの設定漏れがありそうです。ご確認ください。

Android Studio で Flutter の設定

fvm doctor コマンドを実行して、Android Studio に必要な設定値を見つけます。

$ fvm doctor 

FVM Version: 2.2.5
___________________________________________________
...

# 人によってこの設定値が変わリます
Android Studio: ****/demo/.fvm/flutter_sdk

...

次に Android Studio で作成したプロジェクトを開きます。

「Preferences..」→「Languages & Frameworks」→「Flutter」の SDK セクションの Flutter SDK path に先ほどの設定値を入力します。

GitHub Actions のワークフロー作成

ワークフロー用ファイルを作成

プロジェクト直下で「 ⌘ + n 」でファイルを新規作成します。

画像のように .github/workflows/auto-format.yml と入力するとディレクトリも一緒に作成してくれるのでおすすめです

ワークフローの処理を記述

.github/workflows/auto-format.yml

name: Auto Format

on:
  # 手動でも実行可能
  workflow_dispatch:
  # 毎週月曜日の日本時間で午前９時に自動実行
  schedule:
    - cron: '0 0 * * 1'

env:
  # フォーマット対象のパス
  FORMAT_PATHS: '.'

jobs:
  auto-format:

    runs-on: ubuntu-20.04
    timeout-minutes: 5

    steps:
      # main ブランチにチェックアウトして自動フォーマットする
      - name: checkout
        uses: actions/checkout@v2
        with:
          ref: main

      # ubuntu-20.04 は Homebrew 3.3.5 がインストールされているため、brew コマンドで fvm をインストール
      # https://github.com/actions/virtual-environments/blob/main/images/linux/Ubuntu2004-README.md
      - name: install fvm
        run: |
          brew tap leoafarias/fvm
          brew install fvm

      # .fvm/fvm_config.json に指定された Flutter をインストール
      - name: setup flutter
        run: fvm install

      # フォーマットを実行
      - name: format
        run: fvm flutter format $FORMAT_PATHS

      # 変更が発生した場合は main ブランチに向けてプルリクエストを作成
      - name: create pull request
        uses: peter-evans/create-pull-request@v3.11.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          commit-message: auto format
          title: Auto Format
          body: This was automatically generated by the [${{ github.workflow }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}).
          base: main
          branch: auto-format
          branch-suffix: short-commit-hash

Git の更新もお忘れなく

git add .
git commit -m "add auto-format workflow"
git push -u origin main

試してみる

フォーマットされる変更を用意

diff --git a/lib/main.dart b/lib/main.dart
index 202509b..7e8025d 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -5,7 +5,8 @@ void main() {
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
+  const MyApp(
+      {Key? key}) : super(key: key);
 
   // This widget is the root of your application.
   @override

Git の更新もお忘れなく

git add .
git commit -m "change to require formatting"
git push -u origin main

手動で実行してみる

画像のように作成した GitHub のリポジトリで Actions タブを選択して、Auto Format というワークフローをクリックして、Run workflow をクリック！

実行結果

おわりに

いかがだったでしょうか？

０から GitHub Actions のワークフロー構築まで記事にしてみましたが、案外簡単にできたのではないでしょうか。

少しでも Flutter で開発している方々のお役に立てれば幸いです