flutter開発環境構築 その３．Visual Studio Codeの設定

後はエディターを設定して、プログラムを組めるようにするだけだ！(๑•̀ㅂ•́)و✧

docs.flutter.dev

VS Codeのインストール

　自分のマシンには既にVScodeがインストールされてるので省きます。
　（node.js のデバッグに使っています。デバッガとしてしか使ってないのでそれ以外の使い方は全く知りません＞＜；）


VS Codeのセットアップ

docs.flutter.dev
　上のページの、ここクリック


docs.flutter.dev
　「Install VS Code」になってなかったら、ここをクリックしてタブを切り替える


　ここに書いてあることをやっていく。


flutter拡張機能をインストールする

　VS Codeを立ち上げて「拡張機能」のページを開く。
　（日本語化済みなので、日本語化パックが入っています）



　「flutter」と入力して検索。
　flutterが見つかったら「インストール」をクリック。



　入ったので「インストール」ボタンが消えました。＾＾



　検索文字列を空にしたらインストール済み一覧が出てきました。
　Fultterを入れたらDartも一緒に入るようです。




VS Code の設定を検証する

　「表示」→「出力」の右上ドロップダウンから「flutter」を選ぶ、って書いてあるのですが、
　これがどうしても出てこない。(つ﹏<)･ﾟ｡



　めっちゃ調べたけど、ここの作業を書いてる人はあって当然なように書いてるし、それ以外の人はなんも書いてないし。。。
　埒が明かないので、とりあえずこれは後回しにします。＞＜；
　（この次の作業で解決？しました＾＾ｖ）


試運転。アプリを作成

docs.flutter.dev
　「表示」→「コマンド パレット」



　「flutter」と手入力
　・・・あれ？ずっと探し続けてた「Flutter: Run Flutter Doctor」が、しれっとあるよ？Σ(￣□￣;



　押してみる。



　あるやん！！
　なんやねん、それ！！(つ﹏<)･ﾟ｡
　まあ、上記の問題は解決したってことで。（ー''ー）





　気を取り直して、お手本に戻る。
　「Flutter: New Project」を押す。



　「Application」を押す。



　フォルダ選択



　プロジェクト名入力。（デフォルトで表示されたやつをそのまま使いました）



　「保存」を押しました。



　「保存」を押しました。



　なんか出来た！



　エクスプローラで見たらこんなん。



アプリを実行

　ステータスバーの表記の部分をクリック。
　（愚痴：こんなとこがクリックできるとか考えもしやんかった。。。めっちゃ悩んだ。。。(;´д｀)だってステータスバーってステータスの《表示》するとこやんなあ？・３・）



　デバイスを選択



　「実行」→「デバッグの開始」



　待つ。



　なんか立ち上がってきた！！



　右下の「＋」のとこ押したら１ずつ足し上がる。



　ソース上で表示されてる文言の行みつけて、書き直してみた。
　書き直したら、上の雷マークをクリック。



　なんかコンパイルしてるぽい。



　文言変わったー！＾＾ｖ



長い戦いに勝利した！！✧｡٩(ˊᗜˋ)و✧*｡