MENU
カテゴリー
＼気になるカテゴリーをクリック！／
VS Code(Visual Studio Code)でFlutterの開発環境の構築【Mac】
この記事にはPRを含む場合があります。
VS CodeでFlutterの開発をしたい！
VS CodeでFlutterの開発環境の構築方法を知りたい
そこで今回は、Visual Studio CodeでFlutterの開発環境の構築方法を初心者向けに解説します！
この記事で分かること！
- MacでのVisual Studio CodeでFlutterの開発環境の構築方法
開発環境の事前準備
以下の設定が完了している前提でのセットアップとなります。
- Flutter SDKのインストール
- XCodeインストール
- Android Studioインストール
- VS Code(Visual Studio Code)のインストール
フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。
あわせて読みたい
Flutterフリーランスエージェントおすすめサイト5選！徹底比較！
Flutterの仕事をフリーランスでしたい！ どこのサイトがFlutter求人が多いのか知りたい！ そこで、今回はFlutterエンジニアの求人案件探しにオススメのサービス5選をご...
目次
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の学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
- ローカルデータベース（SQLite）
- グラフ①（fl_chart）
- グラフ②（syncfusion_flutter_charts）
- カレンダーから日付取得①（syncfusion_flutter_datepicker）
- カレンダーから日付取得②（month_picker_dialog_2）
GitHub入門
GitHubの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
VS CodeでGit/GitHubの使い方まとめ
VS CodeでのGit/GitHubの使い方をまとめました。
GitHub Copilot X【AIペアプログラミング】
GitHub Copilot X【AIペアプログラミング】として押さえておきたい内容をまとめました。
あわせて読みたい
Github Copilot学習におすすめなUdemy講座3選【2024年最新】
UdemyでGithub Copilotを学習したい Udemyで勉強できるGithub Copilotのおすすめ講座を知りたい そこで、今回はGithub Copilotを学べるUdemyおすすめコースを紹介します...
Git/GitHub コマンド一覧
Git/GitHub コマンド一覧をまとめました。
Git/GitHub 勉強方法
Git/GitHub の勉強方法をまとめました。
あわせて読みたい
【2024年最新】Git/GitHub 勉強におすすめなUdemy講座3選
UdemyでGitを学習したい Udemyで学べるGit/GitHubのおすすめを知りたい そこで、今回は初心者向けにGit/GitHubを学べるUdemyおすすめコースを紹介します。 この記事で分...
コメント