macOSでのFlutterセットアップ方法

Flutterとは

おそば(@Osoba_Sft)です。 先日から業務委託で Flutter のお仕事をさせていただくことになり、 「フリーランスデビューだうえーい」と浮かれたのもつかの間、現在 Flutter の勉強に悪戦苦闘しております。

Flutter ってなんぞい、という方のために一応ご説明すると
「 Google さんが開発した無料 & オープンソースのモバイル向けアプリケーションフレームワーク」です。 ひとつのソースコードで Android・iOS 両方の UI 構築ができる、というのが特徴。
使用する言語はこれまた Google さんが開発した Dart という言語で、Java や JS をやってる人ならすぐにマスターできるそうですが…
Java わからんし JS もそんなにわからん、という私みたいな人間は結構苦労しております。

Flutterの開発環境を構築する

でまあ現在学習中なわけですが、学習を始める前にはもちろんセットアップが必要なわけで。これになかなか時間がかかってしまいました。
基本的には公式ドキュメントに沿ってやったらいいわけですが、それ以外にもあれしてこれしないといけないので、こちらにメモ書きとして残しておきます。誰かのお役に立てれば幸い…。

※時間に余裕がない人は時間のあるときにやるのをオススメします。

macOS Mojaveにアップグレードする

まずは macOS Mojave(モハベって読む)にアップグレードです。Appleの公式サイトに沿ったらまあ特に問題なくできるかと思いますが、まままあ時間がかかります (私の場合は1時間くらいかかった)。
※ 一応アップグレードする前に Mac のバックアップを取っておいた方がいいと思います。
※ Twitter で「 Majave にアップグレードしてから Mac がめちゃくちゃ重い…」ってのをちょこちょこ見かけたので構えてましたが、今の所わたしは問題ないです。

Xcode をインストールする

Mac App Storeを開き、Xcode をインストールします。
App Store でインストールするだけなんで何にも難しいことはないのですが、私、これに2時間かかりました…(同じように時間がかかった人が沢山いるようで、「Xcode インストール」と検索バーに入力すると「終わらない」と候補が出てきます)。

Android Studio または Vscode をインストールする

私の Mac にはすでに Vscode が入っているのですが、委託先で使っているのが Android Studio なので Android Studio を新たにインストールしました。

Android Studioの場合

まずこちらからAndroid Studioをダウンロードし、 インストール手順にしたがってインストールしましょう。 こちらもまあまあ時間がかかりましたが、Xcodeほどではなかったです。インストールしたAndroid Studioを開くと設定画面が出るので、特にこだわりなければ
  • Install Type:Standard
  • UI Theme:自分が好きな方
  • でいいと思います。 最後に「現在の設定はこんな感じだよ」という画面が出るので、右下のFinishを押して設定終了。

    Vscodeの場合

    こちらからダウンロード
    次へ次へ進んで、インストール押して最後完了押したら終了。

    Flutter用のプラグインをインストール

    Android Studioの場合

    Configure → Plugins から Flutter Plugin をインストールします。Dart もインストールする?と聞かれたら Yes を押しましょう。Restart IDE を押して Android Studio を再起動すると設定完了。

    Vscodeの場合

    左のサイドバーにある「拡張機能」を押し Flutter を検索、インストールします。
    Ctrl + Shift + P でコマンドパレットを表示させ、”reload”と入力。
    下の候補に「Developer: ウィンドウの再読み込み」と出てくるので選択。
    するとリロードが実行され、いまインストールした Flutter の拡張機能が使えるようになります。

    Flutter SDK を入手する

    zipファイルをダウンロード

    こちらのページから
    flutter_macos_v1.7.8+hotfix.4-stable.zip
    をダウンロードします。

    zipファイルを任意の場所に解凍

    今しがたダウンロードした zip ファイルを、Users/ [username] / 以下の好きなところに解凍します。 たとえばホームディレクトリ以下に projects ディレクトリを作ったとして、そこに展開したかったら
    $ cd ~/projects
    でprojectディレクトリの中に移動し
    $ unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip
    を入力することで、projects ディレクトリに flutter_macos_v1.7.8+hotfix.4-stable.zip が展開されます。

    パスを通す

    .bash_profileを編集してパスを通します。
    $ vi ~/.bash_profile
    で.bash_profile の編集モードに入ります。 i を押すとインサートモードになるので、
    export PATH="$PATH:~/projects/flutter/bin"
    という行を追加します。esc を押したあとに :wq を入力して上書き保存。
    この変更を反映するために
    $ source $HOME/.bash_profile
    と入力し、.bash_profile を更新します。
    このパスがちゃんと通っているか確認するために
    $ echo $PATH
    と入力します。そこに出てきた文字列に、自分が追加したディレクトリ名と”flutter”という字があればちゃんとパスが通っています。
    そのディレクトリの下で
    $ flutter --version
    と入力して、ちゃんとバージョン情報が出てくれば Flutter SDK の設定は完了。

    ライセンス認証を行う

    $ flutter doctor --android-licenses
    というコマンドを入力してライセンスの認証を行います。(y/N)「イエスですかノーですか」と聞いてきますが、全部 y を入力してください。

    flutter doctor で足りないものをチェック

    $ flutter doctor
    というコマンドを入力すると、何が足りてないか教えてくれます。例えば
      ✗ libimobiledevice and ideviceinstaller are not installed. To install with
        Brew, run:
          brew update
          brew install --HEAD usbmuxd
          brew link usbmuxd
          brew install --HEAD libimobiledevice
          brew install ideviceinstaller
    
    と出てきたら、「libimobiledevice ってのと ideviceinstaller ってのがインストールされてないよ」ということ。 とりあえず run: 以下のコマンドをひとつずつ順番に打っていけば OK。
    Connected devise は今の状態では ! になってても大丈夫なので、 再度 flutter doctor を実行しても Connected devise 以外にはエラーが出てこない、という状態になったら完了。

    試しにアプリを作ってみる

    では、ちゃんとアプリが作成されるか確かめてみましょう。

    Android Studioの場合

    Android Studio を立ち上げ、”Start a new Flutter project”を選択します。
  • Project name :「my_app」など好きな名前を入力
  • Flutter SDK path : 先ほどの flutter ディレクトリを選択
  • Project location : /Users/[username]/AndroidStudioProjects 以下の好きな場所を選択
  • Next を押したら Company domain を入力しろと言われますが、とりあえず適当に、存在しなさそうなドメイン名を入れておきます。
    アプリの編集画面が現れたら、好きな機器を選択して緑の三角ボタンを押すとシミュレータが立ち上がります。
    ※ 使用したい機器が選択候補にない場合は AVD Manager というボタンをクリックし、[Create Virtual Device]をクリックすると色々選択できます。

    VScodeの場合

    $ flutter create my_app
    と入力するとflutter のアプリが入った my_app という名前のディレクトリが作成されます(お好きな名前にしてください)。
    $ cd my_app
    というコマンドで my_app ディレクトリの中に移動し、
    $ flutter run
    というコマンドを入力するだけで、今作成したアプリが立ち上がります。
    編集するには VScode を立ち上げ
    command + o でファイルを開く画面が出てくるので my_app を選択
    するとコードの編集画面が現れます。
    libディレクトリの中にある main.dart を開き、デバッグボタン(左にある虫みたいなアイコン)を押すと上部に緑の三角ボタンが出てきます。
    そこを押すとシミュレータの選択ができるようになるので、好きなのを選択するとアプリが立ち上がります。

    チュートリアルに挑戦

    以上でセットアップは完了です。ね、めっちゃ時間かかったでしょ…。
    先日ツイッターでもつぶやきましたが、文章読んでもよくわかんねー、って方は こういった動画を見るといいかもです。 あとはFlutter の公式ページでチュートリアルに挑戦してみると、だいたいの流れがわかるのではないでしょうか(あくまでだいたい…)。

    Flutter

    Posted by OSOBA