Flutterとは
Flutterとは、Googleによって開発されたモバイルアプリケーションSDK (Software Development Kit)です。
クロスプラットフォームに対応していて、1つのコードで複数のプラットフォーム(iOS,Androidなど)に対応したアプリケーションを開発することができます。
開発環境構築手順
MacでFlutterの開発を始める為に開発環境を構築していきましょう。
※所要時間約1時間(ダウンロードやインストールをするので時間かかります。)
1.Flutterをダウンロードする
下記の公式サイトからFlutterをダウンロードします。
https://flutter.dev/docs/get-started/install/macos
Apple Silicon Macの場合
重要: Apple Silicon Macにインストールする場合、いくつかの補助ツールでRosetta翻訳環境を利用できるようにする必要があります。これを手動でインストールするには、以下を実行します：
sudo softwareupdate --install-rosetta --agree-to-license
flutter_macos_arm64_3.7.11-stable.zip をクリックしてダウンロードします。
※3.7.11の部分はアップデートされると変わります。
Intel Macの場合
flutter_macos_3.7.11-stable.zip をクリックしてダウンロードします。
※3.7.11の部分はアップデートされると変わります。
2.ファイルを解凍して、PATHを通す
作業ディレクトリを作成して、ダウンロードしたzipを解凍
※作業ディレクトリ名や作成場所は好きなところに作ってください。
mkdir ~/development
cd ~/development
# Apple Silicon Macの場合
unzip ~/Downloads/flutter_macos_arm64_3.7.11-stable.zip
# Intel Macの場合
unzip ~/Downloads/flutter_macos_3.7.11-stable.zip
次にPATHを通します。
[PATH_TO_FLUTTER]
ここには解凍したFlutterのディレクトリを書いてください。
bashの場合
echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.bash_profile
source ~/.bash_profile
zshの場合
echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
source ~/.zshrc
flutterコマンドが使えるようになっていれば成功です。
3.実行環境に必要なものを確認する
Flutterは
flutter doctor
コマンドを実行することで
- 問題ないところには✔︎マーク
- 不足しているものには✖︎印
- 問題があるところには！マーク
が表示されて実行環境に何が足りないのか教えてくれますので、次は足りないものをインストールしていきましょう。
4.Android Studioをインストールする
下記の公式サイトからAndroid Studioをダウンロードします。
https://developer.android.com/studio/index.html
DOWNLOAD ANDROID STUDIO をクリックし、利用規約に同意してダウンロードします。
ダウンロードが終わったらAndroid Studioを起動し、表示にしたがってインストールをします。
※いろいろと聞かれますが、基本的には全部Next,FinishをクリックすればOKです。
Welcome to Android Studioの画面が出れば成功です。
5.Android Studioにプラグインを導入する
Android StudioにFlutterとDartのプラグインをインストールします。
起動画面から
- Configure->Pluginsを選択
- 検索ボックスにFlutterと入力
- 出てきたFlutterという名称のプラグインをインストール
※DartプラグインはFlutterプラグインのインストールと同時にインストールされます。
6.デバイスのエミュレータを導入する
Android Studioでデバイスのエミュレータを導入していきます。
起動画面から
- Start a new Flutter projectを選択
- Flutter Applicationを選択してNextをクリック
- Project nameは任意の名前で入力しNextをクリック
- Company domainは任意の名前で入力しFinishをクリック
- エディタが表示されたら、メニューバーのTools->AVD Managerを選択
- Create Virtual Deviceをクリック
- Category->Phoneを選択されていることを確認し、任意のDeviceを選択してNextをクリック(自分はPixel 3aを選択しました)
- 任意のOSをDownloadをクリックしてダウンロード(自分はAndroid10.0を選択しました)
- ダウンロードした項目を選択し、Nextをクリック
- 設定画面が出てきますが、何もせずにFinishをクリック
これでデバイスのエミュレータを導入することができました。
7.Androidのライセンスを許可する
Androidのライセンスを許可しないとflutter doctorを実行した際に！マークが出るので許可していきます。
flutter doctor --android-licenses
上記コマンドを実行するとライセンスに許可するかどうかを聞かれるので yを入力し、Enterを押して許可をしていきましょう。
flutter doctorを実行し、Android toolchainの部分に✔マークがついていれば成功です。
8.Xcodeをインストールする
XcodeはAppStoreからダウンロードできますのでダウンロードしましょう。
最新のMacOSを利用していない場合はダウンロードできない可能性がありますので以下を参考にダウンロードしてください。
Xcode - インストール可能 対応バージョン macOS 一覧 / Install Support macOS Version Lists
インストールをすすめて
Welcome to Xcodeの画面が出れば成功です。
9.CocoaPodsをインストールする
CocoaPodsというプラグインも必要なのでインストールします。
sudo gem install cocoapods
パスワードを聞かれますので自分のMacのパスワードを入力しましょう。
10.最後にflutter doctorで確認する
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.14.6 18G6020, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 4.0)
上記にような表示になっていれば環境構築完了です。
以上、これでFlutterでアプリを開発を始めることができます！
番外編 VSCodeで開発する場合
VSCodeで開発したい場合は、更に設定が必要なのでやっていきましょう。
※VSCodeのインストールは省略します。
1.VSCodeにFlutterの拡張機能をインストールする
- Shift+Command+Xで拡張機能を表示
- 検索ボックスにFlutterと入力
- 出てきたFlutterの拡張機能をインストール
2.VSCodeでFlutter新規プロジェクトを作成
- Shift+Command+Pでコマンドパレットを表示
- 検索ボックスにFlutterと入力
- Flutter:New Projectをクリック
- 任意のプロジェクト名を入力
- プロジェクトを作成するディレクトリを聞かれるので任意の作業ディレクトリを指定する
3.VSCodeでデバイスのエミュレータを起動する
- プロジェクトを作成するとVSCodeの右下あたりにNo Deviceと表示されるのでクリック
- Start iOS SimulatorまたはStart Pixel3a API 29をクリック ※Androidのエミュレータは設定したデバイスによって違います。
4.最後にflutter doctorで確認する
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.14.6 18G6020, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.0)
[✓] Connected device (1 available)
• No issues found!
上記にような表示になっていればVSCodeの設定完了です。