More than 3 years have passed since last update.

「Flutterの環境構築」 ~私文男子の格闘第2話~

Posted at 2020-05-04

#はじめに
(2020/5/4 投稿)
GWは完全に授業ばかり。まあ勉強以外にすることほぼないからいっか。どうも私文男子です。
本日は、Flutterの環境構築を行っていきたいと思います。

Flutterの公式サイトの環境設定手順はとても丁寧ですが、それでも疎い私にとっては重労働だったのでまとめておきます。

Flutterとは何か？なんで初心者エンジニアがFlutterから入ったのか？といったことは

こちらの記事からチェックしてくださいね。

ということでガシガシ進めていきます！

#前提事項
セットアップ始めて行く前にまずは私の環境紹介と、Flutterのバージョンから。

###私の環境

###X Codeバージョン
Version 11.4.1

###Flutterバージョン
Flutter for Mac OS ver1.12.13

#環境構築
###手順1:「Flutter公式にアクセスしFlutterをDL」

まずはFlutter公式にアクセス。
そこから
「Get Started」をクリック
↓
「MacOS」を選択
↓
ダウンロードボタンからダウンロード

これで手順1は完了です。

###手順2:Flutterを動くようにしてみる
Flutterをダウンロードしたら、今度はMacのターミナルを開きます。

####2-1.ターミナルからZIPファイルを展開

任意のフォルダを作成し、そこにZIPを展開します。

#展開するファイルの指定(Desktopと書いてある部分を任意に変更)
$ cd Desktop 

#展開する
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.9-stable.zip

このコマンドがうまく作動して、任意に選択したファイルの中が画像のような状態になっていれば大丈夫です。

####2-2 Xcodeのインストール

これはApp Storeからダウンロードするだけです。簡単。

インストールできたら、ライセンスの許可をしますか？という旨のメッセージが出てくるので迷わず許可を押しましょう。

####2-3再びターミナルでコマンドを打ち込む

許可ができたら、ここからターミナルでの操作です。
コピぺして貼れば大丈夫です。私の場合はよくわかっていないので1行ずつ貼りました。

#flutterツールをパスに追加
$ export PATH="$PATH:`pwd`/flutter/bin"

#Flutterを開発バイナリと連携?
$ flutter precache

これがうまく実行されると、以下の画像のようなメッセージがターミナルに表示されます。
ここまで来れば手順2はバッチリです。

###手順3: Xcodeのシュミレーターで確認してみる

ここまでくればあとは確認の段階。
Xcodeをずっと前にインストールした方はバージョンを上げておきましょう。
バージョンが最新になっているのを確認して、まずはシュミレーターを開きます。

####3-1 iOSシュミレータを開く
これはGUIで操作してもコマンドを打ち込んでも構いません。

open -a Simulator

iPhoneの画面が出てきたらこの段階はクリアです。

####3-2 シンプルなアプリを作成して実行する
ターミナルにコマンドを打ち込みましょう。
役割はコメントアウトで示してあります。実行に時間がかかる物もあるので1行ずつがベターでしょう。

#新しいFlutterアプリ(my_appという名前)を作成
$ flutter create my_app

#ディレクトリ移動
$ cd my_app

#シュミレーターでアプリ起動
$ flutter run

うまく実行できると、このような画像のようになると思います。

このサンプルアプリはどうやら右下の+ボタンを何回押したかわかるアプリのようですね。

ここまで来れれば一旦環境構築はおしまいです。

iPhoneを持っていて実機でテストしたいという人はここから証明書の発行などもう一声あるようですが、、、、

#環境構築の感想
はじめての環境構築でしたがぐぐりにぐぐって何とか終わらせることができました。
わかる人にとってはFlutter公式の説明はわかりやすいかとおもいます。

次回はどうやったら反映されるのかだったり、どこをいじればいいのかがさっぱりわからないのでいろいろいじってみて報告したいと思います。

それではまた！