Visual Studio Code

 Create the app

Do you also want to run your Flutter app on the web? The web version of Flutter is available as an early support release, meaning that features are missing and it’s not yet ready for production use. If you want to try it out, follow these instructions.

1. Invoke View > Command Palette.
2. Type “flutter”, and select the Flutter: New Project.
3. Enter a project name, such as myapp, and press Enter.
4. Create or select the parent directory for the new project folder.
5. Wait for project creation to complete and the main.dart file to appear.

The above commands create a Flutter project directory called myapp that contains a simple demo app that uses Material Components.

Note: When creating a new Flutter app, some Flutter IDE plugins ask for a company domain name in reverse order, something like com.example. The company domain name and project name are used together as the package name for Android (the Bundle ID for iOS) when the app is released. If you think that the app might be released, it’s better to specify the package name now. The package name can’t be changed once the app is released, so make the name unique.

Tip: The code for your app is in lib/main.dart. For a high-level description of what each code block does, see the comments at the top of that file.

Run the app

1. Locate the VS Code status bar (the blue bar at the bottom of the window):
   
2. Select a device from the Device Selector area. For details, see Quickly switching between Flutter devices.
   • If no device is available and you want to use a device simulator, click No Devices and launch a simulator.
   • To setup a real device, follow the device-specific instructions on the Install page for your OS.
3. Press the Settings button - a cog icon gear on the top right (now marked with a red or orange indicator) next to the DEBUG text box that reads No Configuration. Select flutter. And choose the debug configuration: To create your emulator if it is closed or to run the emulator or device that is now connected.
4. Invoke Debug > Start Debugging or press F5.
5. Wait for the app to launch — progress is printed in the Debug Console view.

After the app build completes, you’ll see the starter app on your device.

Try hot reload

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

1. Open lib/main.dart.

2. Change the string

   		'You have pushed the button this many times'

   to

   		'You have clicked the button this many times'

   Important: Do not stop your app. Let your app run.

3. Save your changes: invoke Save All, or click Hot Reload.

You’ll see the updated string in the running app almost immediately.

Profile or release runs

Important: Do not test the performance of your app with debug and hot reload enabled.

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.

Important: If you’re concerned about the package size of your app, see Measuring your app’s size.