2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Flutter環境構築

Posted at

image.png

Flutter環境構築手順																								
前提:AppleIDが作成済みであること、Mac OSであること																								
																								
1. Flutter SDKのインストールとPATH設定																								
	ダウンロード元:																							
	https://flutter.dev/																							
																								
	a.	上記ダウンロード元リンクのページを開き、画面右上の「Get Started」ボタンをクリックする																						
																								
	b.	自分のPCのOSに合ったインストーラを取得する																						
																								
	c.	"インストールされたzipファイルを「Macintosh HD > ユーザー > (ユーザー名)> development」のフォルダに移動し、解凍する

(上記のフォルダは例。任意のフォルダでよい)"

	d.	ターミナルを起動する																						
																								
	e.	以下のコマンドを実行し、使用しているシェルを確認する																						
		echo $SHELL																						
		「/bin/zsh」と返ってきたら使用しているシェルは「zsh」、「/bin/bash」 と返ってきたら「bash」																						
																								
	f.	手順eでzshだった場合は																						
		open ~/.zshrc																						
		のコマンドを実行してファイルを開き、下記を追記・保存して閉じる																						
		open ~/.bash_profile																						
																								
	g.	手順fで開いたファイルに以下を追記し、保存してファイルを閉じる																						
		export PATH="$PATH:$HOME/development/flutter/bin"																						
		※ 手順cでzipファイルを「deployment」以外の任意のフォルダに移動させた場合、上記のファイルパスは適切なものに置き換える																						
																								
	h.	ターミナルで以下のコマンドを実行し、手順gの変更内容を反映させる																						
		手順eで「zsh」だった場合は																						
		source ~/.zshrc																						
		手順eで「bash」 だった場合は																						
		source ~/.bash_profile																						
																								
	i.	ターミナルで以下のコマンドを実行し、flutterが正しくインストールされていることを確認する																						
		which flutter																						
		「/Users/[ユーザ名]/development/flutter/bin/flutter/flutter」が返ってきたらOK																						
																								
2. Android Studioのインストールとセットアップ																								
	ダウンロード元:																							
	https://developer.android.com/studio																							
																								
	a.	上記ダウンロード元リンクのページを開き、画面真ん中の緑のボタン「Download Android Studio」をクリックしてインストーラを取得する																						
																								
	b.	ダウンロードしたdmgを開き、Android Studio.appのアイコンをApplicationsにドラッグ&ドロップする																						
																								
	c.	Android Studioを起動する																						
																								
	d.	画面に従ってセットアップを完了する(基本的にそのまま「Next」を押下していけばOK)																						
																								
	e.	左側に表示されるメニュー一覧からPluginsを開き、「flutter」と検索する																						
																								
	f.	検索結果で表示された「Flutter」のインストールボタンを押下する(「Flutter Intl」も入れてる人がいるけど、必須じゃないかも)																						
																								
	g.	同じく「dart」と検索し、検索結果で表示された「Dart」のインストールボタンを押下する																						
		※ flutterのインストールと同時に自動的にインストールされている場合は「Installed」になっているので、この手順はスキップしてよい																						
																								
	h.	左側メニューの「Projects」画面に戻り、「More Actions」>「SDK Manager」を押下する																						
																								
	i.	SDK Toolsタブを開き、画面下の方の「Hide Obsolete Packages」のチェックを外す																						
		「Android SDK Command-line Tools (latest)」と「Android SDK Tools (Obsolete)」を選択してOKを押下する																						
																								
	j.	ターミナルで以下のコマンドを実行し、Androidのライセンスに同意する																						
		flutter doctor --android-licenses																						
																								
3. Visual Studio Codeのインストールと、Flutter,Dartのプラグイン導入																								
	ダウンロード元:																							
	https://code.visualstudio.com/download																							
																								
	a.	上記ダウンロード元リンクのページを開き、自分のPCのOSに合ったインストーラを取得する																						
																								
	b.	ダウンロードしたzipファイルをダブルクリックで展開し、展開されたVSCodeアプリをアプリケーションフォルダにドラッグ&ドロップする																						
																								
	c.	VSCodeを起動する																						
																								
	d.	左側に表示されているメニューから、拡張機能のページを開く																						
																								
	e.	Flutter, Dartをそれぞれ検索してインストールする																						
																								
4. Xcodeのインストールとライセンス同意																								
	ダウンロード元:																							
	https://apps.apple.com/jp/app/xcode/id497799835?mt=12																							
																								
	a.	上記のダウンロード元リンクのページを開き、AppStoreで開く																						
																								
	b.	AppStoreからXCodeをインストールする																						
																								
	c.	インストールが終了したらXCodeを開く																						
																								
	d.	ターミナルで「flutter doctor」を実行し、エラー文に記載のコマンドを実行してライセンスに同意する																						
																								
5. Homebrewのインストール								(必須じゃない)																
	ダウンロード元:																							
	https://brew.sh/index_ja																							
																								
	a.	上記のダウンロード元リンクのページを開き、記載してあるインストールコマンドをターミナルで実行する																						
																								
6. fvmのインストール						(必須じゃない)																		
																								
	a.	ターミナルで以下のコマンドを実行する																						
		brew tap leoafarias/fvm																						
		brew install fvm																						
																								
	b.	使用しているシェルが「zsh」の場合は																						
		open ~/.zshrc																						
		使用しているシェルが「bash」の場合は																						
		open ~/.bash_profile																						
		のコマンドを実行して、ファイルを開く																						
																								
	c.	手順bで開いたファイルに以下を追記してPATHを通す																						
		export PATH="$PATH:$HOME/.pub-cache/bin"																						
																								
7. Rubyのインストールとバージョンアップ(必須じゃない)																								
																								
	a.	ターミナルで以下のコマンドを実行し、rbenvをインストールする																						
		brew install rbenv																						
		echo 'eval "$(rbenv init -)"' >> ~/.zshrc																						
		source ~/.zshrc																						
																								
	b.	以下のコマンドを実行し、Rubyの最新バージョンを調べる																						
		rbenv install --list																						
																								
	c.	手順bの結果で確認した最新バージョンをインストールする(以下のコマンドの数字部分を置き換える)																						
		rbenv install 3.1.2																						
																								
	d.	標準で利用するRubyのバージョンを指定する(以下のコマンドの数字部分を置き換える)																						
		rbenv global 3.1.2																						
																								
	e.	以下のコマンドを実行してバージョンを確認する																						
		ruby -v																						
																								
8. CocoaPodsのインストール																								
																								
	a.	ターミナルで以下のコマンドを実行し、CocoaPodsをインストールする																						
		sudo gem install cocoapods																						
																								
																								
動作確認																								
																								
1. Flutterプロジェクトの作成																								
																								
	a.	ターミナルから、任意のディレクトリ上で以下のコマンドを実行する																						
		flutter create myapp																						
		※「myapp」は作成したいアプリ名で置き換える																						
		※アプリ名には、半角小文字と「_」のみ使用可能																						
																								
2. VSCodeで実行																								
																								
	a.	VSCodeの「開く」から、1で作成したプロジェクトのフォルダ(myapp)を選択して開く																						
																								
	b.	flutter doctorコマンドを実行し、「×」が付いている項目があれば記載通りに解消する																						
																								
	c.	VSCodeでlib/main.dartを開き、F5キーを押下する																						
																								
	d.	動作させたい端末(Chrome, iOS, Android)のエミュレータを選択する																						
																								
	e.	選択した端末のエミュレータが起動し、サンプルアプリが起動することを確認する																						
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?