Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

Flutterラボの

プレミアム会員になる

2020.06.07

はじめに

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

環境

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

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

【Flutter】3日でできるFlutterアプリ開発入門 環境構築から簡単なアプリの開発を通じてFlutterを最短"3日"で学習 www.udemy.com

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

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

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

スクリーンショット 2020-06-22 23.46.21

Flutter SDK releasesAll current Flutter SDK releases, both stable, dev, and masteflutter.dev

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

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

SDK archiveをクリック

画像35

Flutter beta版の選択

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

画像34

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

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

画像2

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

画像3

画像4

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

【2】パスの設定

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

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

画像5

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

画像6

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

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

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

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

画像7

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

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

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

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

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

画像8

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

【3】パスの確認

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

画像9

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

画像10

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

スクリーンショット 2020-05-20 14.44.54

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

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

Download Android Studio and SDK tools  |  Android Developers Download the official Android IDE and developer tools to buil developer.android.com

画像12

Android Studioをインストール

画像13

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

画像14

画像15

画像16

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

画像17

【5】Android licenseを許可する

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

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

スクリーンショット 2020-05-20 15.12.25

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

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

画像19

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

スクリーンショット 2020-05-25 12.43.29

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

スクリーンショット 2020-05-25 12.44.57

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

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

スクリーンショット 2020-05-20 15.33.41

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

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

スクリーンショット-2019-11-11-5.49.03

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

スクリーンショット 2020-05-25 13.00.10

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

スクリーンショット 2020-05-25 13.01.09

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

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

【8】Emulatorの実装

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

スクリーンショット 2020-05-25 13.07.50

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

画像27

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

画像28

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

スクリーンショット 2020-05-25 13.27.54

その後はFinishをクリック。

スクリーンショット 2020-05-25 13.28.36

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

スクリーンショット 2020-05-25 13.43.49

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

スクリーンショット 2020-05-20 15.33.41 (1)

【9】デモアプリの実行

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

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

画像33

環境構築完了!

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

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


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

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