Getting started with Visual Studio Code

1. Prerequisites
2. Creating a new Flutter project in VSCode
   1. Keyboard shortcuts - the way of the Master
3. Project Structure and Navigation
4. Selecting a device
5. Running a Flutter project
   1. Hot Reload
6. Skills to take away
7. Extra Info
   1. VSCode vs. Android Studio

This lab will get you started with creating and running Flutter projects in Visual Studio Code (VSCode).

Prerequisites

Complete Environment Setup first.

Creating a new Flutter project in VSCode

1. Open Visual Studio Code
2. Get used to the hotkey for opening the VS Code command palette - Ctrl+Shift+P or CMD+Shift+P
3. Open the Command Palette and type “flutter” to get the available Flutter commands. Select Flutter: New Project then pick Application.
4. A file browser will pop up. Navigate to and select your %HOME%/flutter_projects directory.
5. You will be prompted to name the project. Name it something like my_first_flutter_project.
6. VSCode will then automatically invoke the Flutter SDK to initialize a new project. You can find the project in the %HOME%/flutter_projects/my_first_flutter_project
   • You can make as many Flutter projects as you want. It doesn’t really matter where you put them either. But do NOT put one flutter project inside another flutter project’s directory – that will give you trouble.
7. VS Code will automatically open the Flutter project in a new window. You should see some code in the main.dart file.

Keyboard shortcuts - the way of the Master

Consider printing out the following keyboard shortcut cheatsheets.

• Visual Studio Code keyboard shortcuts for macOS
• Visual Studio Code keyboard shortcuts for Windows

All commands are available through the top menu or a right-click context menu.

Learn the keyboard shortcuts for things you do often, like switching between editor windows, searching, deleting a whole line, etc.

Project Structure and Navigation

Flutter projects are contained in the project folder, e.g., my_first_flutter_project/, on your hard drive. VSCode provides the “Explorer” view (top-most icon in the left pane) for navigating the project structure. You can easily create new files, new folders, and move files and folders around with this view.

Here are the most critical things to know about the project structure at this point:

• lib/ - this subdirectory will house your .dart source code files for your app. The lib/main.dart is the starting point for any Flutter app and houses the main() method.
• pubspec.yaml - this is the configuration file for Flutter projects. We will be working in it, but do not modify it for now.
• Ignore other files and folders for now. Flutter needs them to compile and run properly. The ios, android, linux, macos, web, and windows folders contain native platform-specific items.

Selecting a device

Flutter is capable of making of iOS, Android, web, and desktop apps. Before you run a Flutter project, you must select which device you want to launch Flutter on.

In the Environment Setup lab, you should have created a virtual device, either a simulated Android phone using the Android Emulator or a simulated iOS phone using the Simulator app. You can also use a real Android or iPhone.

Flutter treats virtual devices and real devices the same way. You pick which specific device you want to test Flutter on. You can also switch between devices at any time, which is great for testing on multiple phones.

1. In VSCode, there are two ways to select the device on which to run your Flutter app:
   1. Open the VSCode Commande Palette and search for Flutter: Select Device. Select it, and you should see a drop-down list of virtual and real devices.
   2. In the VSCode status bar on the bottom-right, you should see Flutter: 3.13.0. Immediately to the right of that is the device selector, which may say No Device or macOS or Chrome depending on your setup. Click on this item, and you should receive a drop-down list of virutal and real devices.
2. Select a virtual device that you created in the previous lab. VSCode will attempt to launch the virtual device, which should appear on your screen after a minute.
3. If you had trouble setting up a real or virtual phone, pick a web browser as your device for now.

Running a Flutter project

To run a Flutter project, first ensure that you have selected a device as described in the previous section.

You generally want to run your Flutter app “in debug mode”. This will give you access to additional tools for troubleshooting your code at the expense of being a little slower to compile.

• Find lib/main.dart in the Explorer pane and left-click to open it.
• Select the Run menu at the top, then Start Debugging. The shortcut to run is F5. If prompted to select a debugger, choose the ‘Dart and Flutter’ option.
• Generally, you want to Run from lib/main.dart
• Flutter will build and run your application on your selected device. This process may take a while the first time, but should be faster after that.
• Pull up your virtual device’s window or look on your real device. You should see “Flutter Demo Home Page” along with some text and a floating “+” button. Feel free to interact with the app.
• In VSCode, you should see a pop-up with the “run controls”:
  • The red square is the Stop button. It will terminate the Flutter application on your device.
  • The green circular arrow is the Reload button. You can press this when changes aren’t showing up from the “Hot Reload”
  • You can move the Run Controls by dragging the dotted columns on the left edge.

Hot Reload

Flutter has a hot reload feature. For certain code changes, Flutter can replace the running code without needing for you to use Run->Start Debugging or hitting F5. This can be a big time saver.

If you make a change to your app, but you don’t see it in the emulator, simply re-build and re-run the application using Run->Start or hitting F5.

Try the following:

• Find lib/main.dart in the Explorer pane and left-click to open it.
• Run the Flutter application, and make sure it is showing on your device.
• Select the editor window for main.dart. Hit Control-F or Command-F to search for text. Search for the text “pushed”.
• Change the word “pushed” to “pressed”.
• Hit Control-S or Command-S to save your changes to the file.
• If your device and Flutter are running, Flutter should have “hot reloaded” your change onto the device. Does the device now show “You have pressed the button this many times”? Run the app again if you don’t see the change.
• Generally, hot reload will work. VSCode gives you a warning and tells you to re-run the app if hot reload doesn’t work.

Skills to take away

• Open the VSCode Command Palette with a key combo
• Quickly create a New flutter project
• Selecting a real or virtual device to launch
• Running the Flutter app from VSCode

Extra Info

VSCode vs. Android Studio

Visual Studio Code (VSCode or just Code) is a free Integrated Development Environment (IDE) published by Microsoft. It has many different “Extensions” to support many different programming languages, including Flutter. The “official” IDE for Flutter is Android Studio published by Google/Android. You are free to use Android Studio if you wish. I use VSCode in this course because it works well with Flutter and is lightweight, whereas Android Studio can be quite the memory hog. Running Android Studio + native build tools + emulator/simulator to compile and run a Flutter app can be a strain on your computer’s resources.