Flutter Hot Reloadが Touch Barに表示されない時の対処法 【MacBook Pro】【Flutter】【Android Studio】

公開 2021-04-04 / 最終更新 2021-05-05 13:27
カテゴリー Androidアプリ

Android StudioでTouch Barをカスタム

Android Studio、もといIntelliJ IDEA(Android Studioのベースソフト)にはTouch Barをカスタマイズする機能が搭載されています。

軽く方法を解説しますと、

  1. ⌘ + , でSettingsを開く
  2. 「Appearance & Behavior」→「Menus and Toolbars」→「Touch Bar」の中身を編集

と言う感じでできます。(⌘との同時押しなどで機能するフォルダーもあるため、よくフォルダー名を見て編集してください)

私は普段Flutterでアプリ開発をしているので、Flutter Hot ReloadがTouch Barにあるとかなり便利です。そこで、「Default」→「Touch Bar Run/Debug Actions」に「Flutter Hot Reload」を追加しようとしたわけです。

しかし表示されません。

明らかに追加されていますが、

上のように、Hot Reloadが表示されません。

というわけで、対処法を作りました。

Touch BarにHot Reloadを表示させるには

結論から言うと、直接表示させることはできません。いくら試しても出てきませんでした。なので、回り道をして別のアプローチで登録します。

手順1. キーマップ設定の確認

ここでは、ショートカットキーとマクロを利用する方法で実現します。

まず、⌘ + , を押して設定画面を開き、「Keymap」をクリックします。その中の検索ボックスで「Hot Reload」と検索します。すると「Flutter Hot Reload」が表示されるはずです。ここで、日本語配列のMacだと注意。日本語配列のMacには 「\」キーが存在しません 。そのため、初期設定のショートカットキーは使えません

「Flutter Hot Reload」をダブルクリックし、「Remove ⌘\」をクリックして削除し、再度ダブルクリックし「Add Keyboard Shortcut」をクリックします。そして⌘キーと、Windowsキーボードでは「\」のある「_」キーの同時押しに設定します。

手順2. マクロの作成

次はマクロを作成します。Edit→Macros→Start Macro Recordingをクリックし、先程のショートカットキーを同時押しし、右下に表示される停止ボタン(赤い四角)をクリックします。

マクロ名を入力します。「Flutter Hot Reload」としてください。

手順3. アイコンのダウンロード

このままマクロをTouch Barに登録すると「Flutter Hot Reload」という文字になってしまって格好悪いし分かりにくいので、それっぽいアイコンをダウンロードします。

以下のサイトから「lightning」で検索にかけて、稲妻アイコンをSVG形式でダウンロードしてください。(右下)

https://jetbrains.design/intellij/resources/icons_list/

ダウンロード後は解凍してください。

手順4. Touch Barへの登録

⌘ + , →「Appearance & Behavior」→「Menus and Toolbars」→「Touch Bar」(右側の画面)→「Default」→「Touch Bar Run/Debug Actions」→「Run」をクリックし、上部の「+」→「Add Action...」をクリックします。

「Macros」→「Flutter Hot Reload」をクリックし、下部の「icon:」の右側のフォルダーアイコンをクリックし、ダウンロードしたアイコン(lightning.svg)を選択して「Open」をクリックし、「Set Icon」をクリックし、OKをクリックします。最後に設定画面でOKをクリックして完了です。

上のようになりました。位置を変更するには、設定上部の上下三角アイコンをクリックして並び替えます。

環境について

今回の説明で利用した環境です。

  • Android Studio 4.2 beta6
  • Material Theme UIプラグイン導入済み
  • Flutter Plugin 55.0.2
タグ:
android-studio
flutter
macbook
not-working
コメントする

※コメントシステムの詳細はこちらを御覧ください。

コメント本文

※reCAPTCHAによるボット判定を行っているため、送信に少々時間がかかる場合があります。ご了承ください。

送信しました。

確認

コメントを削除しますか?

返信

返信を入力

arrow_upward