Help us understand the problem. What is going on with this article?

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

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

emperorProgKen
iOS Engineer. Youtuber(2020/11/20に登録者1000人超えなければ引退). Tiktoker.
http://www.youtube.com/channel/UCEZIDajfDXXZtosEn9u94Ug?sub_confirmation=1
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした