見出し画像

【世界一やさしい】Flutter環境構築【画像付き解説/macOS編】

±壱《プログラム×デジタルコラム》

Visual Studio Codeのインストール

Visual Studio Codeのインストールが終わっていない場合は下記の記事からインストールとプラグインの設定を行う。

Xcodeのインストール

 Xcodeのインストールが終わっていない場合は下記の記事からインストールとプラグインの設定を行う。

Android Studioのインストール

 Android Studioのインストールが終わっていない場合は下記の記事からインストールとプラグインの設定を行う。

Flutter本体のインストール

１．Flutter SDKのZipファイルをダウンロードする

公式サイトから自分の環境に合ったインストール用のZipファイルをダウンロードする。

macOSを選択する
自分の環境に合ったZipファイルをダウンロードする（ここではIntel製のmac版）

２．zipファイルを展開する

ダウンロードしてきたzipファイルをpathを通したい場所に展開する。
Finderを開いてメニューバーの移動から「ホーム」を選択すると一気に「/User/ユーザー名」のパスに移動することができる。
今回はこの「/User/ユーザー名」に展開する。

「移動」タブから「ホーム」を選択
「/User/ユーザー名」のディレクトリに「Flutter」を展開

３．macのターミナルで使用しているシェルを確認する

ターミナルを開いて以下のコマンドを実行すると実行結果で「~/zsh」もしくは「~/bash」と返ってくる。

echo $SHELL

「~/zsh」の場合：「.zshrc」というファイルを編集する
「~/bash」の場合：「.bash_profile」というファイルを編集する

４．シェルの設定ファイルを作成（編集）する

今回の環境ではzshのシェルを使用していたため、「.zshrc」というファイルがあるかを調べる。

ターミナルで以下のコマンドを実行し、ホームディレクトリに移動する

cd

次に「ls -a」で隠しファイルも含めたファイルを表示し、その中に「.zshrc」というファイルが存在するか確認する。

ls -a

「.zshrc」ファイルが存在しなかった場合は以下のコマンドでファイルを作成する。（bashの環境だった場合は「.bash_profile」を作成する）

touch .zshrc

「.zshrc」ファイルが存在した場合は以下のコマンドでそのままファイルを編集する。

open ~/.zshrc

作成または存在した「.zshrc」ファイルに下記コードを追加し、保存する。

export PATH="$PATH:/Users/［ユーザー名］/flutter/bin"
「export PATH=通したいパス:$PATH」でも可

５．PATH/環境変数を反映させる

以下のコマンドをターミナルで実行し、設定したPATHを反映させる。

source ~/.zshrc

６．Android licenseを通す

下記コマンドをターミナルで実行し、Android licenseを通す

flutter doctor --android-licenses

複数回承認を確認されるので全て「y」を入力

７． Flutterの環境を確認する

ターミナルで下記コマンドを実行すると必要な環境設定ができているかをチェックできる。

flutter doctor
「No issues found!」

全ての項目にチェックが入っていれば完了。

flutter doctorでエラーが起きたら

CocoaPods not installed.

「cocoapods」をインストールする必要があるが、Rubyのバージョンが2.7.0以上である必要があるため、先にRubyのバージョンを更新しておく。
下記コマンドをターミナルで実行し、先にRubyのバージョンを2.7.0以上にアップデートする

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

「ENTER」を押すように求められるのでENTERを押す

下記コマンドをターミナルで実行し、「Ruby 2.7.0」をインストールする。

rvm install 2.7.0

下記コマンドをターミナルで実行し、Rubyのバージョンが2.7.0以上であることを確認する。

ruby -v

下記コマンドをターミナルで実行し、「cocoapods」をインストールする

sudo gem install cocoapods
Password:［管理者パスワードを入力］
Fetching nap-1.1.0.gem
Fetching escape-0.0.4.gem
Fetching fourflusher-2.3.1.gem
Fetching colored2-3.1.2.gem
Fetching addressable-2.8.4.gem
Fetching ruby-macho-2.5.1.gem
Fetching gh_inspector-1.1.3.gem
Fetching public_suffix-4.0.7.gem
Fetching rexml-3.2.5.gem
Fetching nanaimo-0.3.0.gem
Fetching claide-1.1.0.gem
Fetching CFPropertyList-3.0.6.gem
Fetching atomos-0.1.3.gem
Fetching xcodeproj-1.22.0.gem
Fetching molinillo-0.8.0.gem
Fetching cocoapods-try-1.2.0.gem
Fetching netrc-0.11.0.gem
Fetching cocoapods-trunk-1.6.0.gem
Fetching cocoapods-search-1.0.1.gem
Fetching cocoapods-plugins-1.0.0.gem
Fetching cocoapods-downloader-1.6.3.gem
Fetching cocoapods-deintegrate-1.0.5.gem
Fetching ffi-1.15.5.gem
Fetching ethon-0.16.0.gem
Fetching typhoeus-1.4.0.gem
Fetching concurrent-ruby-1.2.2.gem
Fetching httpclient-2.8.3.gem
Fetching algoliasearch-1.27.5.gem
Fetching fuzzy_match-2.0.4.gem
Fetching tzinfo-2.0.6.gem
Fetching i18n-1.13.0.gem
Fetching activesupport-7.0.5.gem
Fetching cocoapods-core-1.12.1.gem
Fetching cocoapods-1.12.1.gem
Successfully installed public_suffix-4.0.7
Successfully installed addressable-2.8.4
Successfully installed ruby-macho-2.5.1
Successfully installed nap-1.1.0
Successfully installed gh_inspector-1.1.3
Successfully installed fourflusher-2.3.1
Successfully installed escape-0.0.4
Successfully installed colored2-3.1.2
Successfully installed rexml-3.2.5
Successfully installed nanaimo-0.3.0
Successfully installed claide-1.1.0
Successfully installed CFPropertyList-3.0.6
Successfully installed atomos-0.1.3
Successfully installed xcodeproj-1.22.0
Successfully installed molinillo-0.8.0
Successfully installed cocoapods-try-1.2.0
Successfully installed netrc-0.11.0
Successfully installed cocoapods-trunk-1.6.0
Successfully installed cocoapods-search-1.0.1
Successfully installed cocoapods-plugins-1.0.0
Successfully installed cocoapods-downloader-1.6.3
Successfully installed cocoapods-deintegrate-1.0.5
Building native extensions. This could take a while...
Successfully installed ffi-1.15.5
Successfully installed ethon-0.16.0
Successfully installed typhoeus-1.4.0
Successfully installed concurrent-ruby-1.2.2
Successfully installed httpclient-2.8.3
A new major version is available for Algolia! Please now use the https://rubygems.org/gems/algolia gem to get the latest features.
Successfully installed algoliasearch-1.27.5
Successfully installed fuzzy_match-2.0.4
Successfully installed tzinfo-2.0.6
Successfully installed i18n-1.13.0
Successfully installed activesupport-7.0.5
Successfully installed cocoapods-core-1.12.1
Successfully installed cocoapods-1.12.1
Parsing documentation for public_suffix-4.0.7
Installing ri documentation for public_suffix-4.0.7
Parsing documentation for addressable-2.8.4
Installing ri documentation for addressable-2.8.4
Parsing documentation for ruby-macho-2.5.1
Installing ri documentation for ruby-macho-2.5.1
Parsing documentation for nap-1.1.0
Installing ri documentation for nap-1.1.0
Parsing documentation for gh_inspector-1.1.3
Installing ri documentation for gh_inspector-1.1.3
Parsing documentation for fourflusher-2.3.1
Installing ri documentation for fourflusher-2.3.1
Parsing documentation for escape-0.0.4
Installing ri documentation for escape-0.0.4
Parsing documentation for colored2-3.1.2
Installing ri documentation for colored2-3.1.2
Parsing documentation for rexml-3.2.5
Installing ri documentation for rexml-3.2.5
Parsing documentation for nanaimo-0.3.0
Installing ri documentation for nanaimo-0.3.0
Parsing documentation for claide-1.1.0
Installing ri documentation for claide-1.1.0
Parsing documentation for CFPropertyList-3.0.6
Installing ri documentation for CFPropertyList-3.0.6
Parsing documentation for atomos-0.1.3
Installing ri documentation for atomos-0.1.3
Parsing documentation for xcodeproj-1.22.0
Installing ri documentation for xcodeproj-1.22.0
Parsing documentation for molinillo-0.8.0
Installing ri documentation for molinillo-0.8.0
Parsing documentation for cocoapods-try-1.2.0
Installing ri documentation for cocoapods-try-1.2.0
Parsing documentation for netrc-0.11.0
Installing ri documentation for netrc-0.11.0
Parsing documentation for cocoapods-trunk-1.6.0
Installing ri documentation for cocoapods-trunk-1.6.0
Parsing documentation for cocoapods-search-1.0.1
Installing ri documentation for cocoapods-search-1.0.1
Parsing documentation for cocoapods-plugins-1.0.0
Installing ri documentation for cocoapods-plugins-1.0.0
Parsing documentation for cocoapods-downloader-1.6.3
Installing ri documentation for cocoapods-downloader-1.6.3
Parsing documentation for cocoapods-deintegrate-1.0.5
Installing ri documentation for cocoapods-deintegrate-1.0.5
Parsing documentation for ffi-1.15.5
Installing ri documentation for ffi-1.15.5
Parsing documentation for ethon-0.16.0
Installing ri documentation for ethon-0.16.0
Parsing documentation for typhoeus-1.4.0
Installing ri documentation for typhoeus-1.4.0
Parsing documentation for concurrent-ruby-1.2.2
Installing ri documentation for concurrent-ruby-1.2.2
Parsing documentation for httpclient-2.8.3
Installing ri documentation for httpclient-2.8.3
Parsing documentation for algoliasearch-1.27.5
Installing ri documentation for algoliasearch-1.27.5
Parsing documentation for fuzzy_match-2.0.4
Installing ri documentation for fuzzy_match-2.0.4
Parsing documentation for tzinfo-2.0.6
Installing ri documentation for tzinfo-2.0.6
Parsing documentation for i18n-1.13.0
Installing ri documentation for i18n-1.13.0
Parsing documentation for activesupport-7.0.5
Installing ri documentation for activesupport-7.0.5
Parsing documentation for cocoapods-core-1.12.1
Installing ri documentation for cocoapods-core-1.12.1
Parsing documentation for cocoapods-1.12.1
Installing ri documentation for cocoapods-1.12.1
Done installing documentation for public_suffix, addressable, ruby-macho, nap, gh_inspector, fourflusher, escape, colored2, rexml, nanaimo, claide, CFPropertyList, atomos, xcodeproj, molinillo, cocoapods-try, netrc, cocoapods-trunk, cocoapods-search, cocoapods-plugins, cocoapods-downloader, cocoapods-deintegrate, ffi, ethon, typhoeus, concurrent-ruby, httpclient, algoliasearch, fuzzy_match, tzinfo, i18n, activesupport, cocoapods-core, cocoapods after 28 seconds
34 gems installed

インストールが完了し、「flutter doctor」で環境を確認した際全ての項目にチェックが入っていれば完了。

flutter doctor 
「No issues found!」


この記事が気に入ったらサポートをしてみませんか？