This page describes how to “debug run” Flutter: Create a new Flutter application from the template we provide, run it, and learn how to make changes using Hot Reload.

Flutter is a flexible toolkit, so choose your development tools first to write, build, and run your Flutter application.

Android Studio

Android Studio: Provides a complete integrated IDE experience for Flutter.

Create a new application

  1. Select File > New Flutter Project
  2. Select the Flutter Application as the project type, and then select the next step
  3. Enter the project name (e.g.myapp) and choose the next step
  4. Click Finish
  5. Wait for Android Studio to install the SDK and create the project project.

The above command creates a folder for the Flutter project called MyApp that contains an example of a simple application using Material Components.

In the project directory, your application’s code is under lib/main.dart.

Run the application

  1. Find the main Android Studio toolbar:

  1. Select an Android device in target Selector to run the application. If not listed, you can create one in Tools>Android>AVD Manager. For more information, see Managing AVD.
  2. Click the Run icon on the toolbar, or choose Run > Run from the menu.
  3. If all is well, you should see your first application on your device or emulator:

Try to reload hot

Flutter provides a very fast development cycle based on Hot Reload, reloading code in real-time applications without the need to restart and lose application state. Just make a change to the source code, tell your editor or command line tool that you need hot Reload, and see your change in the emulator, emulator, or device.

  1. The string'You have pushed the button this many times:'Change to'You have clicked the button this many times:'
  2. Do not press the “Stop” button, please let your application continue to run.
  3. To view your changes, please make sureSave all files(cmd-s / ctrl-s), or clickHot Reload button(Button with lightning icon).

You should see string updates almost immediately in your running application.

VS Code

VS Code: Lightweight editor that supports Flutter running and debugging.

Create a new application

  1. Start VS Code
  2. Call the View > Command Palette…
  3. Enter “flutter” and then select “flutter: New Project” to execute
  4. Enter a project name (for example:myapp) and press Enter
  5. Specify where to place the item, and then select the blue confirm button
  6. Wait for the project to be created and displayedmain.dartfile

The above command creates a folder for the Flutter project called MyApp that contains an example of a simple application using Material Components.

In the project directory, your application’s code is under lib/main.dart.

Run the application

  1. Make sure the target device is selected in the lower right corner of VS Code
  2. Press the F5 button on the keyboard or call Debug>Start Debugging
  3. Wait until the application loads and starts
  4. If all goes well, you should see your first application on your device or emulator after the application is built:

Try to reload hot

Flutter provides a very fast development cycle based on Hot Reload, reloading code in real-time applications without the need to restart and lose application state. Just make a change to the source code, tell your editor or command line tool that you need hot Reload, and see your change in the emulator, emulator, or device.

  1. Open the file in your favorite Dart code editorlib/main.dart
  2. The string'You have pushed the button this many times:'Change to'You have clicked the button this many times:'
  3. Do not press the “Stop” button, please let your application continue to run.
  4. To view your changes, please make sureSave all files(cmd-s / ctrl-s), or clickHot Reload button(Green circular arrow button).

You should see string updates almost immediately in your running application.

Terminal + editor

Terminal + Editor: Your editor-of-choice combined with Flutter’s Terminal tool for running and building.

Create a new application

  1. useflutter createCommand to create a new project:
$ flutter create myapp
$ cd myapp
Copy the code

The above command creates a folder for the Flutter project called MyApp that contains an example of a simple application using Material Components.

In the project directory, your application’s code is under lib/main.dart.

Run the application

  • Check to see if there is an Android device running. If not, check the Settings.
$ flutter devices
Copy the code
  • useflutter runCommand run application:
$ flutter run
Copy the code
  • If all goes well, you should see your first application on your device or emulator after the application is built:

Try to reload hot

Flutter provides a very fast development cycle based on Hot Reload, reloading code in real-time applications without the need to restart and lose application state. Just make a change to the source code, tell your editor or command line tool that you need hot Reload, and see your change in the emulator, emulator, or device.

  1. Open thelib/main.dartfile
  2. The string'You have pushed the button this many times:'Change to'You have clicked the button this many times:'
  3. Do not press the “Stop” button, please let your application continue to run.
  4. To view your changes, please make sureSave all files(cmd-s / ctrl-s), or clickHot Reload buttonButton with lightning icon.

You should see string updates almost immediately in your running application.

Next