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

## はじめに

あまり [fvm](https://github.com/leoafarias/fvm) ( Flutter Version Management ) を活用して CI を構築している例がなかったので、今回記事にしてみました :sunny:

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

他にも [asdf](https://github.com/asdf-vm/asdf) というバージョン管理ツールがありますが、今回は割愛いたします :pray:

### 環境

- 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 前提で進めていきますので、ご注意ください :bow:

https://fvm.app/docs/getting_started/installation

### プロジェクト作成

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

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

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

### `.gitignore` に設定追加

```shell
cat <<EOF >> .gitignore

# fvm related
.fvm/flutter_sdk
EOF
```

### GitHub にリポジトリを作成

https://github.com/new

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/753b7c7b-6491-d719-72f2-22aa9ec73f31.png)

### Git の設定

```shell
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 に必要な設定値を見つけます。

```shell
$ fvm doctor 

FVM Version: 2.2.5
___________________________________________________
...

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

...
```

次に Android Studio で作成したプロジェクトを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/c0f95490-28ea-934f-c07e-8a1796538afb.png)
「Preferences..」→「Languages & Frameworks」→「Flutter」の SDK セクションの Flutter SDK path に先ほどの設定値を入力します。
![スクリーンショット_2021-12-12_14_24_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/52bc2e58-6399-9887-2198-7a6cc729ae51.png)

## GitHub Actions のワークフロー作成

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

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

画像のように `.github/workflows/auto-format.yml` と入力するとディレクトリも一緒に作成してくれるのでおすすめです :qiitan::lgtm:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/1104a924-3d60-35c8-1952-9bec06ce31f1.png)

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

```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 の更新もお忘れなく :wink: 

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

## 試してみる

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

```diff
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 の更新もお忘れなく :wink: 

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

### 手動で実行してみる

画像のように作成した GitHub のリポジトリで Actions タブを選択して、Auto Format というワークフローをクリックして、Run workflow をクリック！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/e7c272da-d127-30cf-9ad2-f57fa6d51cfe.png)

### 実行結果

https://github.com/blendthink/format-demo/pull/1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165251/a8d455dd-967d-6b8f-28e4-0f34ba7744d9.png)

## おわりに

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

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

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