How to Create Flutter App in vscode

Introduction

A single codebase may be used to create high-performance, aesthetically appealing, and cross-platform mobile applications for iOS and Android utilising the Flutter mobile application development framework. On the other hand, Visual Studio Code is a well-liked code editor that is frequently used by developers to create a variety of applications, including Flutter apps. We’ll walk you through the steps of making a Flutter app with Visual Studio Code in this tutorial.

Prerequisites

The following software needs to be set up on your computer before you start:

In Visual Studio Code, Flutter SDK
The Flutter SDK can be downloaded from the official website (https://flutter.dev/docs/get-started/install) and installed on your computer by following the on-screen prompts. Similar to that, you can install Visual Studio Code on your computer by downloading it from the official website (https://code.visualstudio.com).

Step 1: Create a new Flutter project

Creating a new Flutter project in Visual Studio Code is the first step. Follow these steps to accomplish this:

1. The “Explorer” button is located on the left side of the window while Visual Studio Code is open.
2. To create your Flutter project, click the “Open Folder” button and choose a folder.
3. Give the new Flutter project a name by clicking the “New Folder” button in the Explorer panel.
4. Open the Command Palette by pressing “Ctrl+Shift+P” (Windows/Linux) or “Cmd+Shift+P” (Mac) and then type “Flutter: New Project.”
5. From the list of choices, click “Flutter: New Project,” then enter the project name and pick the location where you wish to create the project.
   A new Flutter project will be created in Visual Studio Code.

Step 2: Set up an Android emulator

You must install an Android emulator on your PC in order to use your Flutter app. To test your app, you can use either the Android emulator offered by Android Studio or a real Android smartphone.

Use the Android emulator by doing the following actions:

1. Launch Android Studio, then select the “AVD Manager” toolbar button.
2. Choose a device from the list by clicking the “Create Virtual Device” button.
3. Set up the emulator by adhering to the on-screen directions.

Step 3: Run your Flutter app

You may now execute your Flutter app in Visual Studio Code after setting up your Flutter project and Android emulator. Follow these steps to accomplish this:

1. Open your project’s main.dart file.
2. Either hit “F5” or click the “Run” button on the toolbar.
3. Click the “OK” button after choosing the emulator you want to use.
4. Watch for the emulator to start launching the app.
   Congratulations! In Visual Studio Code, you have successfully produced a Flutter application.

Conclusion

We have demonstrated how to construct a Flutter app with Visual Studio Code in this article. We sincerely hope that this tutorial has assisted you in beginning Flutter development in Visual Studio Code. Coding is fun!

Related guides

• The Best Flutter Development IDEs for Efficient Cross-Platform App Development
• Flutter: Getting Started With Flutter
• How to Install Flutter on Windows and Mac