• Android Studio and IntelliJ
• Visual Studio Code

VS Code is a code editor to build and debug apps. With the Flutter extension installed, you can compile, deploy, and debug Flutter apps.

To install the latest version of VS Code, follow Microsoft's instructions for the relevant platform:

• Install on macOS
• Install on Windows
• Install on Linux

1. StartVS Code.

2. Open a browser and go to theFlutter extension page on the Visual Studio Marketplace.

3. ClickInstall. Installing the Flutter extension also installs the Dart extension.

1. Go toView>Command Palette....

   You can also pressCtrl /Cmd +Shift +P.

2. Typedoctor.

3. SelectFlutter: Run Flutter Doctor.

   Once you select this command, VS Code does the following:

   • Opens theOutput panel.
   • Displaysflutter (flutter) in the dropdown on the upper right of this panel.
   • Displays the output offlutter doctor command.

Updates to the extensions are shipped on a regular basis. By default, VS Code automatically updates extensions when updates are available.

To install updates yourself:

1. ClickExtensions in the Side Bar.
2. If the Flutter extension has an available update, clickUpdate and thenReload.
3. Restart VS Code.

There are a couple ways to create a new project.

To create a new Flutter project from the Flutter starter app template:

1. Go toView>Command Palette....

   You can also pressCtrl /Cmd +Shift +P.

2. Typeflutter.

3. Select theFlutter: New Project.

4. PressEnter.

5. SelectApplication.

6. PressEnter.

7. Select aProject location.

8. Enter your desiredProject name.

To open an existing Flutter project:

1. Go toFile>Open.

   You can also pressCtrl /Cmd +O

2. Browse to the directory holding your existing Flutter source code files.

3. ClickOpen.

The Flutter extension performs code analysis. The code analysis can:

• Highlight language syntax

• Complete code based on rich type analysis

• Navigate to type declarations

  • Go toGo>Go to Definition.
  • You can also pressF12.

• Find type usages.

  • PressShift +F12.

• View all current source code problems.

  • Go toView>Problems.
  • You can also pressCtrl /Cmd +Shift +M.
  • The Problems pane displays any analysis issues:
    

Start debugging by clickingRun > Start Debugging from the main IDE window, or pressF5.

When a Flutter project is open in VS Code, you should see a set of Flutter specific entries in the status bar, including a Flutter SDK version and a device name (or the messageNo Devices):

Go toRun >Start Without Debugging.

You can also pressCtrl +F5.

1. If desired, set breakpoints in your source code.

2. ClickRun>Start Debugging. You can also pressF5. The status bar turns orange to show you are in a debug session.
   

   • The leftDebug Sidebar shows stack frames and variables.
   • The bottomDebug Console pane shows detailed logging output.
   • Debugging is based on a default launch configuration. To customize, click the cog at the top of theDebug Sidebar to create alaunch.json file. You can then modify the values.

Flutter offers many different build modes to run your app in. You can read more about them inFlutter's build modes.

1. Open thelaunch.json file in VS Code.

   If you don't have alaunch.json file:

   1. Go toView>Run.

      You can also pressCtrl /Cmd +Shift +D

      TheRun and Debug panel displays.

   2. Clickcreate a launch.json file.

2. In theconfigurations section, change theflutterMode property to the build mode you want to target.

   For example, if you want to run in debug mode, yourlaunch.json might look like this:

   json

   "configurations":[{"name":"Flutter","request":"launch","type":"dart","flutterMode":"debug"}]

   content_copy

3. Run the app through theRun panel.

Flutter offers a best-in-class developer cycle enabling you to see the effect of your changes almost instantly with theStateful Hot Reload feature. To learn more, check outHot reload.

You might find the following advanced debugging tips useful:

During a debug session, several additional debugging commands are added to theCommand Palette and to theFlutter inspector. When space is limited, the icon is used as the visual version of the label.

Toggle Baseline Painting

Causes each RenderBox to paint a line at each of its baselines.

Toggle Repaint Rainbow

Shows rotating colors on layers when repainting.

Toggle Slow Animations

Slows down animations to enable visual inspection.

Toggle Debug Mode Banner

Hides the debug mode banner even when running a debug build.

By default, debugging an external library is disabled in the Flutter extension. To enable:

1. SelectSettings > Extensions > Dart Configuration.
2. Check theDebug External Libraries option.

If you have additional tips we should share,let us know!

Assists are code changes related to a certain code identifier. A number of these are available when the cursor is placed on a Flutter widget identifier, as indicated by the yellow lightbulb icon. To invoke the assist, click the lightbulb as shown in the following screenshot:

You can also pressCtrl /Cmd +.

Quick fixes are similar, only they are shown with a piece of code has an error and they can assist in correcting it.

Wrap with new widget assist

This can be used when you have a widget that you want to wrap in a surrounding widget, for example if you want to wrap a widget in aRow orColumn.

Wrap widget list with new widget assist

Similar to the assist above, but for wrapping an existing list of widgets rather than an individual widget.

Convert child to children assist

Changes a child argument to a children argument, and wraps the argument value in a list.

Convert StatelessWidget to StatefulWidget assist

Changes the implementation of aStatelessWidget to that of aStatefulWidget, by creating theState class and moving the code there.

Snippets can be used to speed up entering typical code structures. They are invoked by typing their prefix, and then selecting from the code completion window:

The Flutter extension includes the following snippets:

• Prefixstless: Create a new subclass of -StatelessWidget`.
• Prefixstful: Create a new subclass ofStatefulWidget and its associated State subclass.
• Prefixstanim: Create a new subclass ofStatefulWidget, and its associated State subclass including a field initialized with anAnimationController.

The Dart extension includes the following snippets:

You can also define custom snippets by executingConfigure User Snippets from theCommand Palette.

Hot reload

To perform a hot reload during a debug session, clickHot Reload on theDebug Toolbar.

You can also pressCtrl +F5 (Cmd +F5 on macOS).

Keyboard mappings can be changed by executing theOpen Keyboard Shortcuts command from theCommand Palette.

Hot reload works by injecting updated source code files into the running Dart VM (Virtual Machine). This includes not only adding new classes, but also adding methods and fields to existing classes, and changing existing functions. A few types of code changes cannot be hot reloaded though:

• Global variable initializers
• Static field initializers
• Themain() method of the app

For these changes, restart your app without ending your debugging session. To perform a hot restart, run theFlutter: Hot Restart command from theCommand Palette.

You can also pressCtrl +Shift +F5 orCmd +Shift +F5 on macOS.

The Flutter Property Editor is a powerful tool provided by theFlutter extension that lets you view and modify widget properties directly from its visual interface.

1. Click on the Flutter Property Editoricon in the VS Code sidebar.
2. The Flutter Property Editor will load in the side panel.
3. Please refer to the Flutter Property Editordocumentation for a detailed usage guide.

All known bugs are tracked in the issue tracker:Dart and Flutter extensions GitHub issue tracker. We welcome feedback, both on bugs/issues and feature requests.

Prior to filing new issues:

• Do a quick search in the issue trackers to see if the issue is already tracked.
• Make sure you areup to date with the most recent version of the plugin.

When filing new issues, includeflutter doctor output.