はじめに

プログラミング初心者が Flutter で簡単な iOS・Android 向けのモバイルアプリをひとつ完成させることができるようになることを目的としています。

環境

MacOSの環境構築について説明していきます。
公式ドキュメントを参考に環境開発導入ができる方は、ぜひ公式ドキュメントを参考に環境開発導入してみてください。

※Flutter開発が学べる動画をUdemyで公開しているので、よければ下記リンクから見てみてください！

【1】Flutter SDKのダウンロード

:注) 『【Flutter】【Dart】環境構築 〜Flutter For Web編〜』から来られた方は【1'】にお進みください

下記リンクよりmacOSのVersion1.17.3をダウンロードします。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【1’】Flutter SDK(Beta版)のダウンロード

SDK archiveをクリック

Flutter beta版の選択

version 1.20.2をインストールしてください。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ダウンロード完了後、「ダウンロード」ディレクトリにzipファイルがあることを確認し、ダブルクリックでzipファイルを解凍する。

zipファイル解凍後「flutter」フォルダが表示されるので、そのフォルダをユーザー名直下に移動させる。

パスのコピーの仕方
flutter直下のbinフォルダを右クリック後、「optionキー」を長押しし表示された、「”bin”のパス名をコピー」クリックする。
コピーしたものをメモ帳やエディタにペーストする。

【2】パスの設定

ここで、自分が使っているデフォルトのシェルを確認する。
ターミナルを起動して echo $SHELL コマンドを実行する。

コマンド実行後以下赤枠の表示であった場合は、※1作業をする。

コマンド実行後以下赤枠の表示であった場合は、※2作業をする。

※1
以下コードをコピーしたものをメモ帳やエディタにペーストする。
先程ペーストしたflutter/binまでのパスを以下の「flutter直下のbinまでのパスに変更」箇所にペーストする。

echo export PATH="$PATH:flutter直下のbinまでのパスに変更" >> ~/.bash_profile

例：
echo export PATH="$PATH:/Users/nittayuuto/flutter/bin" >> ~/.bash_profile

それをターミナル上にペーストして実行する。

一度ターミナルを閉じて、もう一度ターミナルを開く。

※2
以下コードをコピーしたものをメモ帳やエディタにペーストする。
先程ペーストしたflutter/binまでのパスを以下の「flutter直下のbinまでのパスに変更」箇所にペーストする。

echo export PATH="$PATH:flutter直下のbinまでのパスに変更" >> ~/.zshrc

例：
echo export PATH="$PATH:/Users/nittayuuto/flutter/bin" >> ~/.zshrc

それをターミナル上にペーストして実行する。

一度ターミナルを閉じて、もう一度ターミナルを開く。

【3】パスの確認

ターミナル上でflutter doctorと入力し実行する。
実行結果が以下のようになっていればパスが通っています。

セットアップを完了するためにインストールする必要があるものが表示されているかと思います。その結果がすべて緑色のマークになれば、Flutter を正しく動かすことのできる環境が整ったということになります。
(今回は時間の都合上XCodeのインストールは省略させて頂きます。)

現状のflutter doctorの内容はこのように一番上だけチェックになっているかと思います。
この状態になっていればここまでの項目はクリアです。

【4】Android Studioをダウンロード&インストール

公式サイトからダウンロード

Android Studioをインストール

Android Studioの初期設定を行っていきます。

この段階でflutter doctorを実行すると以下のように2コメの項目が「!」に変わっていると思います。(内容として、「Android licenses not accepted.」と書かれていればOK。)

【5】Android licenseを許可する

ここで前項のAndroid toolchainの「!」をチェックにする為に、flutter doctor --android-licenses をターミナルで実行します。
7回ほどy/Nと聞かれると思うので、全てyで回答してください。(y押してからEnter。)

すると、以下のようにチェックになるかと思います。

【6】Android StudioにFlutterプラグインをインストール

ここで再びAndroid Studioに戻ります。以下の画面になっていることを確認してください。

この状態で、左上のAppleのリンゴマークの横のAndroid Studioのタブをクリックしてください。その中のPreferencesをクリックしてください。
するとこのような画面が出てくるかと思います。

この画面の左側の項目にあるPluginsをクリックしてください。その中の検索欄にflutterと入力してください。

すると、一番初めにFlutterと書かれているものが出てくるかと思います。これをInstallしてください。
その後はRestart IDEをクリックし、ダイアログのRestartをクリック。
Android Studioが自動で再起動され、インストールしたFlutterが反映されます。

ここで再びflutter doctorを実行してみてください。以下のようにAndroid Studioの項目がチェックになっているかと思います。

【7】新規Flutterプロジェクトの作成

Android Studioに戻ると2行目の項目に「Start a new Flutter project」が追加されているかと思います。

ここからFlutterの新規プロジェクトを作成していきます。
下記画面でそのままNextで進みます。

次の画面では任意のProject nameを設定し、Flutter SDK pathにはユーザー直下にダウンロードしたflutterフォルダのpathを指定します。

設定が完了すれば、Nextで次の画面でFinishをクリックすればFlutterの新規プロジェクト作成は完了です。

注::)【Flutter】【Dart】環境構築 〜Flutter For Web編〜 から来られた方はここで下の記事に戻ってください。

【8】Emulatorの実装

次にEmulatorの実装を行います。ToolsのAVD Managerを選択します。

Create Virtual Deviceをクリックします。

どの端末を選んで頂いても大丈夫ですが、今回はPixel 2を選択しNextをクリック。

[Pie]を選択．[Download]を実行．ダウンロードが完了したら[Next]をクリック。

その後はFinishをクリック。

下記の画面の右側の緑色の三角ボタンをクリックすると、Emulatorが起動します。

このタイミングでflutter doctorを実行すると、必要な全ての項目(XCodeは今回除いています。)がチェックになっているはずです。

【9】デモアプリの実行

最後に、Android Studioの実行ボタン(右上にある緑色の三角ボタン)をクリックして、デモアプリが実行できれば完了です。

最初の実行は時間がかかる場合があるのでご注意ください。

環境構築完了！

これにてMacに置ける環境構築は完了です。
お疲れ様でした！

それでは早速アプリ開発に取り掛かっていきましょう。

JDK問題：Version8以下しか対応していない。
インストールしてなければ以下リンクより

https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html