はじめに
(2020/5/4 投稿)
GWは完全に授業ばかり。まあ勉強以外にすることほぼないからいっか。どうも私文男子です。
本日は、Flutterの環境構築を行っていきたいと思います。
Flutterの公式サイトの環境設定手順はとても丁寧ですが、それでも疎い私にとっては重労働だったのでまとめておきます。
Flutterとは何か？なんで初心者エンジニアがFlutterから入ったのか？といったことは
第1話「Flutterについての下調べ」
https://qiita.com/shibundanshi/items/36ee4e92247f4595d64e
こちらの記事からチェックしてくださいね。
ということでガシガシ進めていきます！
前提事項
セットアップ始めて行く前にまずは私の環境紹介と、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公式の説明はわかりやすいかとおもいます。
次回はどうやったら反映されるのかだったり、どこをいじればいいのかがさっぱりわからないのでいろいろいじってみて報告したいと思います。
それではまた！