To use the DevTools from VS Code, you need the
Dart extension
. To easily debug your application you should also install the
Flutter extension
.
Open the Command Palette.
Go to
View
>
Command Palette
or press
+
Shift
+
P
.
Type
flutter
.
Select the
Flutter: New Project
.
When prompted for
Which Flutter Project
, select
Application
.
Create or select the parent directory for the new project folder.
When prompted for a
Project Name
, enter
test_drive
.
Press
Enter
.
Wait for project creation to complete.
Open the
lib
directory, then the
main.dart
.
To learn what each code block does, check out the comments in that Dart file.
The previous commands create a Flutter project directory called
test_drive
that contains a simple demo app that uses
Material Components
.
Run your example application on your desktop platform, in the Chrome web browser, in an iOS simulator, or Android emulator.
Open the Command Palette.
Go to
View
>
Command Palette
or press
+
Shift
+
P
.
Type
flutter
.
Select the
Flutter: Select Device
.
If no devices are running, this command prompts you to enable a device.
Select a target device from
Select Device
prompt.
After you select a target, start the app. Go to
Run
>
Start Debugging
or press
F5
.
Wait for the app to launch.
You can watch the launch progress in the
Debug Console
view.
After the app build completes, your device displays your app.
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.
You can change your app source code, run the hot reload command in VS Code, and see the change in your target device.
Open
lib/main.dart
.
Change the word
pushed
to
clicked
in the following string. It is on line 109 of the
main.dart
file as of this writing.
Original
| New
|
---|
'You have pushed the button this many times:' ,
| 'You have clicked the button this many times:' ,
|
Save your changes: invoke
Save All
, or click
Hot Reload
.
Your app updates the string as you watch.
Launch the IDE.
To be able to create flutter projects on Android Studio you will need to install the
Flutter Plugin
and for smart Dart coding assistance that includes code completion, formatting, navigation, intentions, refactorings, and more install the
Dart Plugin
.
Head back to your IDE start page and Click
New Flutter Project
at the top of the
Welcome to Android Studio
dialog.
Under
Generators
, click
Flutter
.
Verify the
Flutter SDK path
value against the Flutter SDK location on your development machine.
Click
Next
.
Enter
test_drive
into the
Project name
field. Your project name should be written in
snake case
and in lowercase. This follows the Flutter best practices for naming projects.
Set the directory in the
Project location
field to
C:\dev\test_drive
on Microsoft Windows or
~/development/test_drive
on other platforms.
If you didn't create that directory before, Android Studio displays a warning that the
Directory Does Not Exist
. Click
Create
.
From
Project type
dropdown, select
Application
.
Ignore the remaining form fields. You don't need to change them for this test drive. Click
Create
.
Wait for Android Studio to create the project.
Open the
lib
directory, then the
main.dart
.
To learn what each code block does, check out the comments in that Dart file.
The previous commands create a Flutter project directory called
test_drive
that contains a simple demo app that uses
Material Components
.
Locate the main Android Studio toolbar at the top of the Android Studio edit window.
In the
target selector
, select an Android device for running the app. You created your Android target device in the
Install
section.
To run your app, make one of the following choices:
Click the run icon in the toolbar.
Go to
Run
>
Run
.
Press
Ctrl
+
R
.
After the app build completes, your device displays your app.
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.
You can change your app source code, run the hot reload command in Android Studio, and see the change in your target device.
Open
lib/main.dart
.
Change the word
pushed
to
clicked
in the following string. It is on line 109 of the
main.dart
file as of this writing.
Original
| New
|
---|
'You have pushed the button this many times:' ,
| 'You have clicked the button this many times:' ,
|
Save your changes: invoke
Save All
, or click
Hot Reload
.
Your app updates the string as you watch.
To create a new Flutter app, run the following commands in your shell or Terminal.
Run the
flutter create
command.
flutter create test_drive
The command creates a Flutter project directory called
test_drive
that contains a simple demo app that uses
Material Components
.
Change to the Flutter project directory.
To verify that you have a running target device, run the following command.
You created your target device in the
Install
section.
To run your app, run the following command.
After the app build completes, your device displays your app.
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.
You can change your app source code, run the hot reload command in VS Code, and see the change in your target device.
Open
lib/main.dart
.
Change the word
pushed
to
clicked
in the following string. It is on line 109 of the
main.dart
file as of this writing.
Original
| New
|
---|
'You have pushed the button this many times:' ,
| 'You have clicked the button this many times:' ,
|
Save your changes.
Type
r
in the terminal window.
Your app updates the string as you watch.