Flutterで始めるアプリ開発

インストール

このページのゴール

  • Flutterをインストールする
  • Web開発環境を設定する
  • iOS開発環境を設定する(任意)
  • Android開発環境を設定する(任意)

インストール・環境設定の流れ

それでは、Flutterを使うための準備を進めていきましょう 🔧🔧🔧

ステップ

  1. Flutterをインストール
  2. Web開発環境を設定
  3. iOS開発環境を設定(任意)
  4. Android開発環境を設定(任意)

1. Flutterをインストール

❗️注意事項❗️

  • 本サイトでは基本的にMacを使用することを前提としています。

Flutterをダウンロードしホームディレクトリに保存

flutter_macos_1.21.0-9.2.pre-beta.zip

ダウンロードしたファイルを解凍

flutter unzip

Flutterにパスを通す

ログインシェルの設定ファイルにパスの情報を追記

// bash を使っている場合
// .bash_profile に以下を追記
export PATH="$PATH:$HOME/flutter/bin"
// zsh を使っている場合
// .zprofile に以下を追記
export PATH="$PATH:$HOME/flutter/bin"

※ 使っているシェルを確認する方法

$ echo $SHELL
/bin/zsh

Flutterにパスが通っているか確認

バージョン情報が表示されればOK 👍

$ flutter --version
Flutter 1.21.0-9.2.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 81a45ec2e5 (9 days ago)2020-08-27 14:14:33 -0700
Engine • revision 20a9531835
Tools • Dart 2.10.0 (build 2.10.0-7.3.beta)

2. Web開発環境を設定

Webを有効化

$ flutter config --enable-web

Chromeをインストール

https://www.google.com/chrome/

正しく設定できてるか確認

flutter doctorで設定状況が確認できます。
Chromeのところに ✅ が入っていればOK 👍

$ flutter doctor
...
[] Chrome - develop for the web
...

3. iOS開発環境を設定(任意)

❗️注意事項❗️

設定が簡単なWebアプリで動作確認を行っていくため、
スキップしてもOKです 👍

Xcodeをインストール

https://apps.apple.com/us/app/xcode/id497799835

コマンドラインツールを設定

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -license

シミュレータを起動

$ open -a Simulator

正しく設定できてるか確認

flutter doctorで設定状況が確認できます。
Xcodeのところに ✅ が入っていればOK 👍

$ flutter doctor
...
[] Xcode - develop for iOS and macOS (Xcode 11.3.1)
...

4. Android開発環境を設定(任意)

❗️注意事項❗️

設定が簡単なWebアプリで動作確認を行っていくため、
スキップしてもOKです 👍

Android Studioをインストール

https://developer.android.com/studio

エミュレータを作成

Android Studio を起動し
「Configure → AVD Manager」を選択
android emulator install 1
「Create Virtual Device」を選択 android emulator install 2
作成したいデバイスを選択し「Next」 android emulator install 3
作成したいOSを選択し「Next」

OSがインストールされていない場合は、
「Download」からインストールできます。
android emulator install 4
デバイス名を入力し「Finish」 android emulator install 5
デバイス一覧に表示されていればOKです 👍 android emulator install 6

エミュレータを起動

Android Studio を起動し Configure >> AVD Manager からエミュレータを起動

android emulator launch

正しく設定できてるか確認

flutter doctorで設定状況が確認できます。
Android toolchainのところに ✅ が入っていればOK 👍

$ flutter doctor
...
[] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
...

まとめ

  • Flutterをダウンロードしパスを通すことでインストール完了
  • iOS/Android/Webの設定状況は flutter doctor で確認

環境設定お疲れさまでした。
次はエディタの設定です、アプリを起動するまでもう少しなので頑張りましょう 💪

参考情報