VS Code(Visual Studio Code)でFlutterの開発環境の構築【Mac】

VS CodeでFlutterの開発をしたい！

VS CodeでFlutterの開発環境の構築方法を知りたい

そこで今回は、Visual Studio CodeでFlutterの開発環境の構築方法を初心者向けに解説します！

VS Code(Visual Studio Code)にFlutterプラグインのインストール

VSCodeを起動させて、拡張機能のマーケットプレイスの検索ボックスから【Flutter】で検索します。

Dart Codeから提供されているFlutterというプラグインを【インストール】します。

Flutterのプラグインは以下の通りです。

VS Code(Visual Studio Code)でFlutterプロジェクトの作成

VS Code(Visual Studio Code)を起動して、メニューバーから表示 > コマンドパレットをクリックすると、コマンドを入力できるパレットが表示されます。

コマンドの入力欄に【Flutter】と入力し【Flutter：New Project】をクリックします。

【Application】をクリックします。

Flutterのプロジェクトを作成するフォルダを選択、もしくは新しく作成します。ここでは、すでに作成している【Studio Projects】を選択。

Flutterの作成するプロジェクト名を入力します。

Fluttderのデモプロジェクトが作成されます。

VS Code(Visual Studio Code)でFlutterアプリの実行

VS Code(Visual Studio Code)の画面右下にある【macOS（darwin）】をクリックします。

起動させるシミュレーターを選択します。ここでは【iOS Simulator】をクリックします。

iOSのシミュレーターが起動されます。

VS Code(Visual Studio Code)の画面右上の【▷】をクリックし【Start Debugging】をクリックします。

Flutterのデモアプリが起動されます。

VS Code(Visual Studio Code)でFlutterの開発環境の構築方法まとめ

今回はVisual Studio CodeでFlutterの開発環境の構築方法を紹介しました。

• VS CodeにFlutterプラグインのインストール
• VS CodeでFlutterプロジェクトの作成
• VS CodeでFlutterアプリの実行

以上、最後まで読んで頂きありがとうございます！

Flutterエンジニアになるには？

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

あわせて読みたい

Flutter学習ロードマップ！０から初心者向けに完全解説！【2024年最新】 Flutterエンジニアになりたい Flutterエンジニアになるための学習ロードマップを知りたい これから、Flutterエンジニアを目指すならどうやったらなれるのか進め方は知っ...

Flutter をスクールで学ぶ

あわせて読みたい

Flutterプログラミングスクールおすすめ4社！36社の調査結果【完全公開】 Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ プログラミング初心者は疑問やエラ...

Flutterの副業を探す

あわせて読みたい

Flutterの副業案件おすすめのサイト3選！【週2・リモートあり】 Flutterで副業を始めたい！どこのサイトがおすすめか知りたい！ 週2,3日でスキルアップが望めるようなFlutterの案件をやりたい！どこのエージェントが良いかな？ 初めて...

おまけ：Flutter入門の完全ガイド

あわせて読みたい

【Flutter入門ガイド2024】知識ゼロから使い方・全体像が分かる！ Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...

GitHub入門

GitHubの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

• GitHubのアカウントを作成する方法 
• Gitのインストール方法 
• GitHubからファイルをダウンロードする方法 
• GitHubでSSH接続する方法 
• Git originとは？使い方・エラー対処方法 

VS CodeでGit/GitHubの使い方まとめ

VS CodeでのGit/GitHubの使い方をまとめました。

• VSCodeでGit・GitHubの使い方 

GitHub Copilot X【AIペアプログラミング】

GitHub Copilot X【AIペアプログラミング】として押さえておきたい内容をまとめました。

• GitHub Copilot の登録方法 
• GitHub CopilotをVisual Studio Codeに導入する方法 
• GitHub Copilotの使い方【VS Code】 
• GitHub Copilotの解約方法 

あわせて読みたい

Github Copilot学習におすすめなUdemy講座3選【2024年最新】 UdemyでGithub Copilotを学習したい Udemyで勉強できるGithub Copilotのおすすめ講座を知りたい そこで、今回はGithub Copilotを学べるUdemyおすすめコースを紹介します...

Git/GitHub コマンド一覧

Git/GitHub コマンド一覧をまとめました。

• Git/GitHub コマンド一覧 

Git/GitHub 勉強方法

Git/GitHub の勉強方法をまとめました。

あわせて読みたい

【2024年最新】Git/GitHub 勉強におすすめなUdemy講座3選 UdemyでGitを学習したい Udemyで学べるGit/GitHubのおすすめを知りたい そこで、今回は初心者向けにGit/GitHubを学べるUdemyおすすめコースを紹介します。 この記事で分...