LoginSignup
2

More than 3 years have passed since last update.

痒い所に手が届くFlutterの環境構築・導入設定(Mac)

Last updated at Posted at 2019-08-16

FlutterをPCにインストール

まず以下のリンクからインストールします(hogehoge.zipって書いてあるボタン押す)
Mac: https://flutter.dev/docs/get-started/install/macos
Windows: https://flutter.dev/docs/get-started/install/windows (一応)

PATHを通す

vim使うんですがWebさっぱりわかんなかったのでここで詰まりました

ググってみると

$ vim .bash_profile

の後にexport PATH="$PATH:/Users/hogeUser/Developper/flutter/bin"
(:以降はflutterフォルダの場所に/binをつける)を
追加したらいけるよー と出るのですが

実際やってみるとすでにvim経由でインストールしたhomebrewのやつがごにょごにょ書いてある。。。
そもそもvimbashの編集ってどうやるの???

hogeUsernoMacBook-Air:~ hogeUser$ vim .bash_profile

....

#rbenv
export PATH=~/.rbenv/bin:$PATH eval export PATH="/Users/hogeUser/.rbenv/shims:${PATH}"
export RBENV_SHELL=bash
source '/usr/local/Cellar/rbenv/1.1.2/libexec/../completions/rbenv.bash'
command rbenv rehash 2>/dev/null
rbenv() {
  # 省略
  esac 
} 
~                                                                               
~                                                                               
-- INSERT --

vim操作の超最低限の基本

vimはモードを変更しながらコマンドを使って操作します(テキストエディタみたいにはいかない部分もあります)
モード変更

コマンド 操作
Esc コマンドモード(コマンド使うときは一旦これに戻す)
i 挿入モード(追加したい位置にカーソルを持ってこれたらこのモードに)
o 後ろに改行してから挿入モード

コマンドモード

コマンド 操作
:wq 変更を保存して終了
k 上移動
l 右移動
h 左移動
j 下移動

挿入モードにしないとbashの編集はできません
詳細はこちらから→【備忘録】Vimの操作 - Qiita

以上を駆使してexport PATH="$PATH:/Users/hogeUser/Developper/flutter/bin"を追加し成功しました

hogeUsernoMacBook-Air:~ hogeUser$ vim .bash_profile

....

export PATH="$PATH:/Users/hogeUser/Developper/flutter/bin"
#rbenv
export PATH=~/.rbenv/bin:$PATH eval export PATH="/Users/hogeUser/.rbenv/shims:${PATH}"
export RBENV_SHELL=bash
source '/usr/local/Cellar/rbenv/1.1.2/libexec/../completions/rbenv.bash'
command rbenv rehash 2>/dev/null
rbenv() {
  # 省略
  esac 
}   
~                                                                               
~                                                                               
wq!

パスを通したら
Esc(INSERT(入力モードからノーマルモードへ))→:wq!と入力(一番下に出る)→Enter

追記[2020/1/13]

状況によってはsourceコマンドで変更の反映が必要なようです
(PC買い替えたせいでもれなくつまづきました。。。。)

source ~/.bash_profile

こんなのも出ますがOKを押します
スクリーンショット 2019-08-17 0.51.52.png

1分ほど要しますがこれが出たら成功です

hogeUsernoMacBook-Air:~ hogeUser$ flutter --version
Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20e59316b8 (4 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Android Studioを入れる

ダウンロード

https://developer.android.com/studio からダウンロードします

インストール

LaunchPadなどからAndroid Studioを開きます
こんなの出ますがAndroid Studioを初めて入れる方はDo not import settingsのままOKで大丈夫です
(Android studioには設定をエクスポートして設定記録用ファイルとして保存する機能があるようで、
Config or installation folderで記録用ファイルの場所を選択すると以前の設定をインポートできるようです)
スクリーンショット 2019-08-17 2.36.21.png

インストールが完了です
スクリーンショット 2019-08-17 2.49.30.png

Flutterを導入

右下のConfigurePluginsで検索画面が出るので
Flutterと入れてFlutterのプラグインをインストールします
Restart IDERestartとやるか
出なければインストールし終わったあと再起動します
スクリーンショット 2019-08-17 2.57.12.png
再起動が終わるとStart a new Flutter projectと出ており
開発の準備ができました、お疲れでした。。。。

参考

vimまわりとか

【備忘録】Vimの操作 - Qiita
MacでPATHを通す - Qiita
PATHを通すために環境変数の設定を理解する (Mac OS X) - Qiita

other

Flutter開発環境構築(Mac編) - Qiita
Android Studio の設定を共有する方法 | DevelopersIO

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