VSCodeでFlutterを使ってみよう！ -環境構築。
上記参考に自分の環境を作ってみました。
公式サイトからSDKウンロード、解凍して好きな場所に移動して、パスを通すことです。.zshenvファイルに記述します。Macでは隠しファイルで自分のホームフォルダ(Terminalで”pwd”と打つとパスが表示されます)に格納されています。
export PATH="$PATH:`pwd`/flutter/bin"`pwd`の場所に自分が置いたパスを入れます。自分の置いたパスを調べるにはTerminalに調べたいフォルダをドラッグ＆ドロップすればパスを表示してくれます。
指定のパスを間違えないようにすることが注意点です。何気に、”/”などが抜けることのないように。
サイトでは”vi”を使っていますが、自分でする時は隠しファイルを表示して、いつも使っているエディタ、今回はCotEditorを使って編集、保存しています。
ちゃんと入ったか、使えるかを試してみます。
Terminalを立ち上げで”flutter”と打って実行し表示されればうまくいったということになります。”which flutter”と打って実行するパスが表示されるはずです。
これでSDKが入りFlutterが使えるようになりました。あとはコードを書いて実行できるようにしていきます。今回はVSCodeを使いたので必要なプラグインを上記サイトを参考に入れていきます。
自分の環境ではXcodeとVSCodeは入っていたのでそこは今回やっていません。
あとは実際にVSCodeを立ち上げ新規プロジェクトを作ります。
ここで大事なことですが、VSCodeではコマンドパレットをよく使います。
以下のように選択して出てくる
を選んで
コマンドを打ちます。例えば、新規プロジェクトであれば
(Flutterと打ち込むと選択肢が絞りこまれます)
１ Flutter:New Project
２ Application
と順番に選んでいくと保存場所、名前と聞いてくるのでそれを変更など入力して進めていくと以下が作成されます。
それではビルド、エミュレーターを起動してみましょう。
まず”1”を押すと
と出てきます。これは今使えるエミュレーターが出てきています。(今の環境はXcode,Chromeはインストール済み)
今はChromeが選択されています。このまま実行します。上”の画像の”2”を押すと実行されます。
無事ビルドされ表示されました。
この記事が気に入ったらサポートをしてみませんか？