Chapter 01

Flutterの環境構築(Mac編)

はじめに

この記事は、以下の動画をまとめたものです。

Mac を使用していることを前提とした記事なので、Windows をお使いの方はこちらの解説動画をご覧ください。

手順は公式 HP のmacOS installに沿って行っていきます。

ではさっそく環境構築を始めていきましょう!

Flutter のインストール

まずはじめに、Flutter をインストールします。

Flutter 公式 HPの「Install」ページでmacOS を選択

②「Get the Flutter SDK」 から zip ファイルをダウンロードし解凍

③ユーザーフォルダ直下に「development」フォルダを作成し、ダウンロードした「flutter」フォルダを移動

※動画内では「Developer」という名前で作成していますがどちらでも問題ありません。

フォルダ構成は、Macintosh HD > ユーザー > (ユーザー名)> development > flutterとなりました。

パスを通す

Flutterをインストールした後、Flutterを使えるようにするには「パスを通す」という作業が必要になります。

①使用しているシェルを調べる

ターミナルを起動して以下を実行してください。

echo $SHELL

/bin/zshと返ってきたら使用しているシェルはzsh/bin/bash と返ってきたらbash を使用していることになります。

このシェルによって次の作業が異なってきます。

自分の環境に合ったほうを実行して進めてください。

// zshの場合
vim .zshrc

// bashの場合
vim .bash_profile

②vim というエディターが起動した状態になるので、**i **キーを押して「INSERT」モードに切り替える

③画像を参考にexport PATH="$PATH:[flutterフォルダが格納されているディレクトリ]/flutter/bin" を入力する

なお、フォルダをターミナル内にドラッグ&ドロップすることでディレクトリが自動で入力されます。

esc キーを押してINSERTモードを終了し、:WQ と入力しENTERで内容を上書き保存

⑤ターミナルで下記を実行し、パスが表示されれば設定完了!

which flutter

次に、AndroidとiOSのセットアップを行います。

Android のセットアップ

Android Studio 公式 HPからダウンロードし、案内に従ってインストールする

②Flutter、Dart のプラグインを導入するため、「Preferences」** **を開く

③Flutter、Dart をインストールする

④Android Studio を再起動し、初期画面に「start a new flutter project」があることを確認する

⑤プロジェクトを作成する

「Start a new Flutter Project」 → 「Flutter Application」の順で選択し、Project name にはアプリの名前を入れておきます。

「Package name」は、アプリのストアで識別するための一意な名前を設定します。

デバッグするだけなら初期設定の状態のままでも大丈夫です。

⑥デバッグのためにエミュレーターをダウンロードする

「AVD Manager」にアクセスします。

iPhone からエミュレーターをダウンロードします(画像は Pixel 3a を選択)。

⑦「再生ボタン」をタップしてエミュレーターを起動する

⑧デバックボタンを押してビルドできれば完了!

これ以降は、プロジェクトを開いたらエミュレータが選択できるようになります。

iOS のセットアップ

最後に、iOSのセットアップを行います。

① Xcode をAppStoreからダウンロードする

②Android Studio に戻り、「Open iOS Simulator」でシミュレーターを起動する

③デバックボタンを押し、Androidと同様にビルドできれば完了!

これでFlutterでアプリ開発を始める準備が整いました!

まとめ

今回を突破できたら、もうFlutter開発の8割はマスターしたようなものです。笑
環境構築が一番めんどくさいので。

ということで、次回はFlutter開発の全体像を見ていきます。

参考文献

https://www.youtube.com/watch?v=kpvVENfDCRc