4月からFlutterを使うことになるので、そのキャッチアップを兼ねて勉強の内容を書き留めていこうと思います。
ネットに勉強サイトや知見ブログがたくさんあるのでそちらを見ながらでもいいかなと思ったのですが、今回はこちらの書籍を買ってみました。
ゼロから学ぶFlutterアプリ開発 | 藤川 慶 |本 | 通販 | Amazon
”本書は、プログラミング初心者やエンジニア1〜2年目レベルの方を対象に、アプリ開発やプログラミングを始めるきっかけとなる1冊です。”(解説から抜粋)
産育休期間を除いて約4年ほどこの仕事をしているので全くの初心者というわけではないけど、すぐに見れる分かりやすい本が一冊あった方が始めやすいかな〜などと思って選びました。
環境構築
本書に沿ってやっていきます。
- Flutterのインストール
- パスを通す
- Android Studioのインストール
- Xcodeのセットアップ ※iOS開発したい方は先にこちらからやった方がいいかも 5.CocoaPodsのインストール
1.Flutterのインストール
以下から「macOS」を選択して次のプラットフォーム選択ページで「iOS」を選択します。
iOS用のFlutterセットアップ方法の画面が表示されます。
スクロールすると「Install the Flutter SDK」があるので自分のmacに合ったSDKをダウンロードして解凍します。
ユーザーフォルダの下に「development」フォルダを作り、その中に解凍したFlutterフォルダを移動します。
2. パスを通す
※2019年10月以降に購入しているmacOSならシェルは基本的にzshがデフォルトのようですのでzsh前提でやっていきます。本にはbashの場合のやり方も書かれていました。
.zshrcという設定ファイルにパスを書き込むためにターミナルで以下を打ち込んでvimからファイルを開き、キーボードの「i」を押してinsertモードにします。
vim .zshrc
insertモードになったら以下のパスを入力します
export PATH="$PATH:/Flutterフォルダが格納されているディレクトリのパス/flutter/bin"
escキーを押してinsertモードを終了し:WQを入力しEnterキーで上書き保存します。
次にパスの有効化するためにターミナルで以下を実行。
source ~/.zshrc
これでパスを通せました。(パスが通っているかの確認方法は割愛)
パスの通し方は公式サイトのAdd Flutter to your PATHにも書いてるのでそっちの方がやりやすいのかな?
本だと.zshrcで紹介されてたけど公式だと.zshenvに書き込んでるみたいです。
.zshrcと.zshenvの違いはこちらの記事で説明されていたのが分かりやすかったです。
qiita.com
3. Android Studioのインストール
公式サイトからダウンロードします。
developer.android.com
Android Studioをインストールしたら起動して「Plugin」から「Flutter」を検索して、インストールします。
Flutterをインストール後に「Restart IDE」が表示されると思うので、そのボタンをクリックして再起動させます。
本によるとFlutterプラグインを入れるとDartのプラグインも自動的に入るそうなのでDartプラグインを別で入れる必要はないみたいです。
再起動したAndroid Studioの初期画面に「New Flutter Project」ボタンがあれば成功です。
4. Xcodeのセットアップ
自分の環境では既にXcodeが入っているので特に何かする作業はありませんでした。
Android Studioでflutterのprojectファイルを作ってiOS simulatorを起動させたらちゃんと起動しました。
ですが、macにXcodeが入っていない方は先にXcodeをダウンロードしておいた方がいいです。
ダウンロード時間がめちゃくちゃ長いので…
5.CocoaPodsのインストール
ターミナルで以下のコマンドを実行します。
sudo gem install cocoapods
本だと説明がこれだけだったので公式サイトの方が分かりやすいかもしれないけど、公式サイトに沿うなら全工程を公式に合わせた方がいいかも。
一応公式のCocoaPods導入部分のリンクだけ貼っとこ…
docs.flutter.dev
これで環境構築は完了です!
書き出してみるとスムーズに見えるけど、実際はエラーがいくつか出て結構時間がかかりました…主にCocoaPods導入関係で……
そちらはまた別の記事でまとめよ。