LinuxMintでFlutter開発環境構築

# 本記事について

Linux MintのDesktop環境にて、Flutter開発環境を構築したので手順を記載します。

使用するFlutterSDKはStableバージョンとなります。

# FlutterSDKのSetUp

公式より最新のSDKをダウンロードする。(600MB程度)

https://docs.flutter.dev/development/tools/sdk/releases?tab=linux

ダウンロードしたファイルをTerminalのCurrentDirectryに移動し、解凍する。
`$ tar xf ./flutter_linux_3.0.1-stable.tar.xz`

解答したディレクトリを任意の場所に配置し、Path通す。(以下は配置場所は例)
PATHを永続化する場合は`.bashrc`などに記載する。
`export PATH="$PATH:$HOME/software/flutter/bin"`

flutterコマンドでPATHが通っていることを確認(配置場所が出力されたらOK)
`which flutter`

# flutter doctor実行

flutter doctorを実行し、環境の確認を行う

`flutter doctor`

自身の環境だと以下の出力となる。
すべてが[✓]になると最低限のFlutter環境構築が完了となる。

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Linux Mint 20.3 5.4.0-91-generic, locale ja_JP.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✗] Linux toolchain - develop for Linux desktop
    ✗ clang++ is required for Linux development.
      It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from
      https://releases.llvm.org/
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from
      https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
      https://github.com/ninja-build/ninja/releases
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
[!] Android Studio (not installed)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

```

# Android SDK ,Android StudioのSetUp

(Android環境が不要の場合はSkip)

## Android StudioのInstall

公式よりAndroid Studioをダウンロードする。

https://developer.android.com/studio

Flutter SDKと同じように解凍する

`tar xf ./android-studio-2021.2.1.15-linux.tar.gz`

64bit版のLinuxを利用している場合は32bit用ライブラリをいくつかインストールする。

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

## Android SDK Command-line ToolのInstall

Android Studioを起動する。

`sh android-studio/bin/studio.sh`

起動後はセットアップウィザードの指示に沿ってセットアップを行う。

Welcome to Android Studioの画面からMore Actionsの中にあるSDK Managerを選択する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1101349/f74a76ff-873c-12e8-4a32-7ecc87417811.png)

SDK Toolタブを選択し、「Android SDK Command-line Tool」にチェックを入れてOKを押下する。
インストールが始まるのでOKで進む。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1101349/f64d344c-5cb7-9eed-928c-ed9c03073a78.png)

## Android Licensesへの同意

Android Licenseに同意する。

`flutter doctor --android-licenses`

すべて同意するといかが表示される。

```
All SDK package licenses accepted
```

## Flutter Docterで確認

flutter doctorを実行し、Android Studioが正常にインストールされているかの確認する。

`flutter doctor`

Android toolchainとAndroid Studioが[✓]になっていること。
```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Linux Mint 20.3 5.4.0-91-generic, locale ja_JP.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✗] Linux toolchain - develop for Linux desktop
    ✗ clang++ is required for Linux development.
      It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from
      https://releases.llvm.org/
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from
      https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
      https://github.com/ninja-build/ninja/releases
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
[✓] Android Studio (version 2021.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability
```


# Flutter SDKに必要なLinux環境のSetUp

## Packageのinstall

以下コマンドで必要Packageのinstallする。

`sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev liblzma-dev`

## Flutter Docterで確認

flutter doctorを実行し、Android Studioが正常にインストールされているかの確認する。

`flutter doctor`

Linux toolchainが[✓]になっていること。
```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Linux Mint 20.3 5.4.0-91-generic, locale ja_JP.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability
```

# Flutter webで利用するブラウザの設定

## Chromeのinstall

Chromiumでも可能です。純正ChromeをInstallしたい場合は以下記事を参照

https://www.linuxcapable.com/ja/Linux-Mint20%E3%81%ABGoogleChrome%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

## Flutter Docterで確認

flutter doctorを実行し、Android Studioが正常にインストールされているかの確認する。

`flutter doctor`

Linux toolchainが[✓]になっていること。
```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Linux Mint 20.3 5.4.0-91-generic, locale ja_JP.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

```

# おわりに

お疲れ様でした。

以上でFlutterの環境は構築完了です。

よいFlutter Lifeを！


# (おまけ)Flutter Webの起動

アプリ作成
`flutter create sample`

`cd sample`

アプリ起動
`flutter run --web-port 8000`

Webで起動を選択

localhost:8000でベーシックテンプレートアプリが表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1101349/636b2374-8002-1d6c-c275-2b3683f8fc8b.png)


---
# 参考文献
https://docs.flutter.dev/get-started/install/linux
https://developer.android.com/studio/install#linux
https://www.linuxcapable.com/ja/Linux-Mint20%E3%81%ABGoogleChrome%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/