Flutter Course, 6.1 Setting Up VS Code

Hello! In this course, we will cover how to set up VS Code (Visual Studio Code) for Flutter development. VS Code is a code editor loved by many developers due to its various extensibility and features. In this course, we will learn step-by-step from installing VS Code to setting up the Flutter environment.

1. Installing VS Code

VS Code can be used on various operating systems. First, we will install VS Code following the procedures below.

  1. Visit the official VS Code website (https://code.visualstudio.com/).
  2. Click the ‘Download’ button on the homepage and download the installation file suitable for your operating system.
  3. Run the downloaded file and proceed with the installation following the instructions of the installation wizard.
  4. Once installation is complete, launch VS Code.

2. Installing Flutter SDK

To develop in Flutter, you must first install the Flutter SDK. The Flutter SDK is a tool that helps you develop applications that can run on multiple platforms.

  1. Visit the official Flutter website (https://flutter.dev/docs/get-started/install).
  2. Download the Flutter SDK suitable for your operating system.
  3. Extract the downloaded file and move it to your desired location (e.g., C:\src\flutter).
  4. Add the location of Flutter to the system PATH. This requires modifying the environment variables.
  5. Open Command Prompt (Windows) or Terminal (Mac/Linux) and enter the following command to verify that the installation was completed successfully.
flutter doctor

This command checks the installation status of the Flutter SDK and informs you of the installation status of necessary components (e.g., Android SDK, Xcode, etc.).

3. Installing Dart Plugin

Since Flutter is based on a language called Dart, you need to install the Dart plugin in VS Code.

  1. After running VS Code, click on the ‘Extensions’ icon in the left sidebar.
  2. Type ‘Dart’ in the search bar and find the official Dart plugin to install.

Once the installation is complete, VS Code will recognize the Dart language.

4. Installing Flutter Extension

To conduct Flutter development more efficiently, we also install Flutter-related extensions.

  1. Similarly, search for ‘Flutter’ in the VS Code ‘Extensions’ menu.
  2. Find the official Flutter extension and install it.

By installing the Flutter extension, you will have access to various useful features for creating and managing Flutter projects.

5. Creating a New Flutter Project

Now that all settings are complete, let’s create a new Flutter project.

  1. Select the ‘View’ menu in VS Code and click on ‘Command Palette’. (You can also press Ctrl + Shift + P.)
  2. Type ‘Flutter: New Project’ in the Command Palette.
  3. Select the type of project. Here, choose ‘Flutter Application’.
  4. Enter a name for the project and select a location to save it.

VS Code will automatically generate the Flutter project file structure for you.

6. Setting Up Emulator and Devices

To test your Flutter app, you need to set up a physical device or emulator. Let’s proceed with the steps below.

  1. You can install Android Studio to use the Android emulator. After installing Android Studio, use the AVD (Android Virtual Device) manager to create the desired emulator.
  2. Alternatively, connect a real iOS or Android device via USB. In this case, you must enable USB debugging on the device.
  3. In VS Code, go to the ‘Debug’ menu and select ‘Start Debugging’ or press F5 to run the app.

7. Running the Flutter Project

After creating the project, you can enter the following command to run the Flutter project on the emulator or connected device.

flutter run

During this process, the project will be built and the application will run on the emulator. If an error occurs, use the ‘flutter doctor’ command to troubleshoot.

8. Writing and Modifying Code

Now that the Flutter project is set up, start writing and modifying your code. VS Code offers various features such as code completion, error highlighting, and debugging tools, making your development work more efficient.

9. Conclusion and Additional Resources

In this course, we explored how to set up the Flutter development environment using VS Code. In addition, check out the official Flutter documentation, community, and GitHub repositories for more information and learning materials.

In the next course, we will look into the basic widgets and layouts in Flutter. Happy coding!