【Flutter入門】開発環境構築 – その①(MacOS)

Flutter環境構築①

モバイルアプリの開発は、iOSではSwift・AndroidではKotlinのように、別々のプログラミング言語を学ぶ必要があり、勉強するにはなかなか骨が折れる作業です。

これを打開しようと、昨今ではマルチプラットフォームのアプリケーション開発ができる環境が増えてきています。例えば、Facebook社が開発しているReactNativeや、Microsoft社が開発しているXamarinなどがあります。

昨年の12月にgoogle社が、同社で開発しているマルチプラットフォーム開発用のSDK「Flutter」のベータ版が外れ、正式版バージョン1.0になったことを発表しました。

本記事では、MacOSを用いてこのFlutterで開発を始めようとされている方向けに、開発環境の構築手順に関して記事にしようと思います。

目次

Flutterの特徴

Flutterの特徴は大きく4つあります。

➀Beautiful

Flutterを使用すると、美しいアプリを作成できます。
Flutterには、iOSとAndroidの両方で”pixel-perfect experience”を提供するウィジェットがフルセットで含まれています。
また、マテリアルデザインの”究極の実現”を可能にします

➁Fast

Flutterは高速です。
Chrome, Androidの基盤となるSkia 2D graphics engineを搭載しています。
FlutterのコードはDartで、1つのコードでiOSとAndroid向けに出力できます。

➂Productive

Flutterは生産的です。
ホットリロード機能で、コード変更結果をすぐに確認することができます。
(ユーザー調査では、3倍の生産性向上につながっています!)

➃Open

Flutterはオープンです。
FlutterはBSD-style licenseのオープンソースプロジェクトで、また何千ものプラグインがあります。
標準のネイティブビルドツールを使用しているため、ネイティブコード(Kotlin, Swift)へのアクセスも容易です。

初期設定の手順

構築手順の全容は、こちらの公式サイトを参考にしました。

Flutter SDKをダウンロードし、Flutterコマンドを実行可能にする

STEP
ダウンロードして、zipファイルを展開します

zipファイルをダウンロードして、それを展開します。

STEP
ファイルを置く

解凍したファイルを自分の好きなフォルダにおきます。僕の場合は、ユーザ/ホームディレクトリ 直下に置きました。

STEP
Flutter SDKを実行可能にする

Flutter SDKをカレントディレクトリで実行できるようにします。ターミナルを起動して、先ほどFlutter SDKを置いたフォルダに移動し、以下のコマンドを実行します。

Flutter Doctorでのチェック

以下のコマンドを同じディレクトリ内で実行し、Flutter開発に必要な環境が整っているかチェックします。

flutter Doctor

Flutterの開発にはXcodeが必要です。以下のようなポップアップが表示された場合、インストールをクリックします。

Gitコマンドの確認ダイアログ

インストール後、再度  flutter doctor を実行します。すると、以下のような情報が出力されます。

flutter doctorコマンド実行時のエラー

いくつか問題があると表示されています。

Android SDKのために、android studioが必要

STEP
Android Studioのダウンロード

このリンクよりダウンロードし、インストールします。

STEP
Android Studioの初期設定

Android Studioを起動し、初期設定を進めます。いくつか選択画面が表示されますが、デフォルトのままNextをクリックし、次へ進んでいきます。

STEP
初期設定の完了

初期設定が完了したら、Finishをクリックします。

Androidライセンスに同意する

STEP
Flutter Doctorの再実行

再びflutter doctorを実行すると、次はAndroid licenses not accepted. To resolve this, run: flutter doctor --android-license; と表示されました。と表示されました。

STEP
Androidの利用規約に同意

flutter doctor --android-licensesを実行します。

Xcodeのインストール

STEP
Flutter Doctorの再実行

再びflutter doctorを実行すると、次はiOSアプリ開発のために、xcodeが必要と出ました。

STEP
Xcodeのインストール

App storeより、Xcodeをインストールします(これが30分以上かかります。)

iOSアプリ開発のためのライブラリをインストールする

STEP
Flutter Doctorの再実行

再びflutter doctorを実行すると、iOSアプリ開発のためのライブラリをインストールする必要があると出ました。

STEP
HOMEBREWのインストール

ライブラリのインストールにはHOMEBREW(Mac OSのパッケージマネージャー)が必要なので、インストールしていない人は以下よりインストールする必要があります。以下のコマンドを実行して下さい。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

STEP
ライブラリのインストール
  • 以下を順に実行していきます。
    • brew update
    • brew install –HEAD usbmuxd
    • brew link usbmuxd
    • brew install –HEAD libimobiledevice
    • brew install ideviceinstaller
    • brew install ios-deploy
    • brew install cocoapods
    • pod setup(これが30分ほど時間がかかります。)

Android StudioにDartとFlutterのプラグインをインストールする

STEP
Flutter Doctorの再実行

再びflutter doctorを実行すると残りは Android Studio と Intellij(これは私がインストールしているため、表示されています。) にdartとflutterのプラグインが入っていないという警告です。

STEP
プラグインの検索ページまで移動

Preferences > Plugins > Browse Repositories…をクリックします。

STEP
プラグインのインストール

flutterで検索し、インストールする。(FlutterのプラグインはDartのプラグインも必要なので、一緒にインストールをしてくれます)。

IntellijにFlutterのライブラリをインストールする方法

Intellij IDEA にDartとFlutterのプラグインをインストールする

STEP
プラグインの検索ページまで移動

Intellijを起動し、Preferences > Plugins をクリックします。

STEP
プラグインのインストール

flutterと検索し、インストール(FlutterのプラグインはDartのプラグインも必要なので、一緒にインストールをしてくれます)

FlutterのプラグインをIntellij IDEAにインストールする方法

Flutter SDKをパスに通す

現在の状態ですと、カレントディレクトリのみでしかFlutterコマンドが使えません。そのため、Flutterコマンドをどこでも実行できるようにするために、パスにFlutterのプラグインを通します。

STEP
ファイルを開く

vi ~/.bash_profile を実行し、ホームディレクトリの.bash_profileを開きます。(まだ存在しない場合は、touch ~/.bash_profileを実行し、ファイルを作成してください。)

STEP
ファイルへのコマンドの書き込み
  1. iで入力モードに切り替えます。
  2. 下記のコマンドをペーストします。
    • export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin
    • ※PATH_TO_FLUTTER_GIT_DIRECTORYには、先ほどFlutterのSDKを置いた場所を入力してください。
  3. escで閲覧モードに移動します。
  4. : => w => q と順に入力し、保存してviモードを終了します。

Xcodeのセットアップ(続き)

Xcodeの最新バージョンを使うために、以下のコマンドを実行します。

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

Androidエミュレーターの設定

  1. Android Studioを起動します
  2. 適当なプロジェクトを作成します(これは後で削除して大丈夫です)
  3. 上のバーの右から5番目のAVD Managerをクリックします
  4. Create Virtual Deviceをクリックします
  5. 好きな端末を選択します
  6. システムイメージを選択し、ダウンロードをクリックします。x86が推奨されています
  7. Finishを押します
  8. Android Virtual Device Managerで、Actions列のRunアイコンをクリックするとエミュレーターが起動します

まとめ

ここまでで、flutter doctorを実行すると、残りのエラーが、実機が登録されていないというエラーのみになります。

Flutter doctorの実行結果

次回の記事では、実際にサンプルアプリを作成し、エミュレーターでの起動確認・実機での起動確認ができる状態まで持っていきます。

最後まで読んでいただき、ありがとうございました。

よかったらシェアしてね!

この記事を書いた人

目次
閉じる