本記事のゴール

Android Studioを用いてFlutterのサンプルをエミュレータで動かしてみる。

バージョン

ツール名	バージョン
Flutter	1.22.4
Dart	2.10.4
Android Studio	4.1.1

Flutter SDKの導入

公式サイトよりダウンロードして適当な場所に解凍

公式サイト

$ cd ~/
$ mkdir Development && cd Development
$ tar xf ~/Downloads/flutter_linux_v1.22.4-stable.tar.xz
$ rm -rf ~/Downloads/flutter_linux_v1.22.4-stable.tar.xz

パスを通す

$ sudo vim ~/.bashrc

#　ここから追加
export PATH="$PATH:$HOME/development/flutter/bin"
#　ここまで

Android Studioのインストール

公式サイトよりダウンロードして適当な場所に解凍

公式サイト

$ cd ~/Download
$ tar -zxvf ./android-studio-ide-201.6953283-linux.tar.gz
$ sudo mv ./android-studio /opt/
$ rm -rf android-studio-ide-201.6953283-linux.tar.gz

スクリプトを叩いて起動するか確認

$ cd /opt/android-studio/bin
$ ./studio.sh

ウィザードが起動するため以下のサイトに従って進める

参考サイト

Flutter/Dartプラグインを追加する

Configure -> Plugins -> Marketplace -> Flutter か Dart を入力してインストールを押下

ショートカットをデスクトップに作成

$ cd ~/Desktop
$ vim android-studio.desktop

#　ここから
[Desktop Entry]
Type=Application
Encoding=UTF-8
Name=Android Studio
Comment=Android Studio
Exec=/opt/android-studio/bin/studio.sh
Icon=/opt/android-studio/bin/studio.png
#　ここまで

実行権限を付与しておく

$ chmod 773 ./android-studio.desktop

諸設定

必要なツールをインストール

sudo apt-get install -y libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

依存関係を解決する

flutter doctor
flutter doctor --android-licenses

サンプルアプリを作成してみる

プロジェクトを作成する

New Flutter Project -> Flutter Application　を選択する

なお、Flutter SDK pathは以下のように設定する

/home/[user]/development/flutter

エミュレータを起動する

公式サイトに従ってエミュレータを起動する

公式サイト

Runを押して実行！

参考

Flutter公式が提供している環境構築手順
 Android Studioのショートカットの作成方法
 記事執筆時点で解決不能なエラーについて