Macで「Flutter」と「Android Studio」をインストール して「Flutter」環境構築を行う手順ご紹介。

今回の記事はgoogleの新規OSでも動かせると言われている、かつ「iOS/Android OS」の両方で動作するかなり先進的なプログラミング言語の初め方を記載していきます。

なぜ、SwiftやJavaがある程度使えるのにFlutterやってみようかと思うのですが、理由としてAndroid開発を業務で用いそうになっており、その際に将来性を考慮するとFlutterが良い選択。また、比較的伸びそうな言語なので早いうちに習得しておくととくなのではと感じたので使ってみようと考えはじめました。

記載したように私はFlutter初心者に当たりますのでこれから始めると言っても過言ではないため、初心者向けの記事から書いていきます。では早速始めていきましょう。

まずは先ほどから話している、将来性に関してですが、なぜ将来性があるのかについてです。

「Flutter」の将来性。

Android OSはgoogleの所有するエッジ端末用のOSです。エッジ端末といえばもはや２大巨塔ですね。「iPhone」「Android」の二択になると思います。私がGAFAの中で最も安定していると考えているAmazonは唯一エッジデバイスを保有していない（現在）ことを考えるとこのエッジデバイスを保有していることがまず大きいと考えられます。

Android端末は日本ではそこまでですが世界全体で見ると3/4はAndroidです。

ここからが将来性の核の部分ですが、googleはOSの統一を考えています。スピーカー、電気自動車、PC、Android端末などのです。そしてそう言った構想を持って着々と開発されているOSが「Fuchsia」です。

このOSは5年後には普及していると言われています。つまり2025年程度です。

また少しビジネスの話なのですが、android開発に用いられている言語はほぼJavaです。しかしJava の所有権はOracleが持っています。おそらくこのあたりもgoogleの課題になっており、ここをgoogle謹製の言語に置き換えつつ全てのデバイスに入るOS間で共通した言語を所有するという考えがあるのではないっでしょうか？

その言語こそが「Flutter（Dart）」言語なのです。詳しくいうと言語名はDartでフレームワークがFlutterですが一般的にFlutterと言われています。

徐々にこのFlutterは関心度や期待値などをあげてランキング上位に食い込む勢いですので今のうちに習得しておくのは良いと考えています。

では環境構築に進んでいきます。

Android Studioのインストール

まずは環境の土台になる、Android Studioをインストールします。

FlutterはなぜかAndroid Studioの最新版では動作しないので「4.0.0」をインストールしてください。通常のダウンロードページにあるものではなくこちらのダウンロードarchiveから過去にリリースされたものを探してインストールしてください。

あとはローカルに落としたdmgファイルをクリックしてアプリアイコンをアプリケーションフォルダに落とせばコピー完了です。

アプリケーションのAndroid Studioをクリックしてインストールを進めましょう。全てそのままNextで進みインストールしていきます。

このアップデートはしなくていいのでバツで閉じます。

あとはNextを押すのみです。

インストールには時間がkかりますので並行してFlutterをインストールしていきましょう。

Flutter本体のインストール

まずはFlutterの本体をインストールする必要があります。

Android Studio上でFlutterを利用するためにローカルに落としたFlutterをAndroidStudioにパスを合わせる
みたいなイメージです。

まず公式サイトからダウンロードしていきましょう。
ローカルのダウンロードフォルダにまずはZipファイルを落とせるのでその落としたものに対して下記操作を実行します。

/Users/「ユーザー名」/development
上記のフォルダで作業をするのでフォルダがない場合はフォルダをまずは作成

cd ~/development
export PATH="$PATH:`pwd`/flutter/bin"
上記でパスを通します。

flutter doctor

長文が出力され最後に下記が出現します。
[✓] Flutter (Channel stable,・・・・・,    locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.51.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device

チェックマークが設定できている部分で、びっくりマークが設定できていないもの
Android Studioで動作させるためには最低限「Android toolchain」と「Android Studio」の項目はチェックにしておく必要があります。

そのために下記を実行します。

flutter doctor　--android-licenses
全て「y」で回答します。

するとAndroid toolchainはチャックになります。これであとはプラグインをAndroid Studioにインストールするのみ。

「Configure」をクリック

「Plugin」をクリック。

「Flutter」をインストールするとついでに「Dart」もインストールされます。

以上で設定は完了です。

簡単なプロジェクトを作成してみる

上記でインストールは完了しているのでその続きとして、簡単なプロジェクトを作成してみましょう。
下記画面のFlutterプロジェクトを作成をクリックして、SDKなどの設定に進み、プロジェクトを作成するところまで行ってみます。

「Create New Flutter Project」をクリックしてください。

アプリの名前などを設定するメニューが来るのでそこに注意して、設定を行います。

SDKパスは先ほど格納したFlutterのフォルダを選択して設定しておきます、アプリの名前はデフォルトのままでもなんでもOKです。プロジェクトパスはこのプロジェクトが保存される先を表しています。

これでNextで進むとピロジェクトが完成します。

この画面がゴールです。

お疲れ様です。次のステップとしてHello Worldを出力するまでをこちらのリンクで記載しているので気になる方はご参照ください。