1
1
---
2
- title : Get started with Flutter
2
+ title : Set up and test drive Flutter
3
3
short-title : Get started
4
- description : Get started developing your first app with Flutter!
4
+ description : >-
5
+ Set up Flutter on your device and
6
+ get started developing your first multi-platform app with Flutter!
5
7
toc : false
6
8
showBanner : false
7
9
sitemap : false
@@ -249,18 +251,16 @@ it's time to create an app and try out Flutter development!
249
251
1. Choose the **Application** template.
250
252
251
253
VS Code should prompt you with **Which Flutter template?**.
252
- Depending on what type of Flutter project you want to create,
253
- you'd choose the corresponding template.
254
- For a new Flutter app and the purposes of this walkthrough,
255
- choose **Application**, which scaffolds a simple, counting app.
254
+ Choose **Application** to bootstrap a simple counter app.
256
255
257
256
1. Create or select the parent directory for your new app's folder.
258
257
259
- A file dialog will appear.
260
- Select or create the parent directory where the project will be created.
261
- Don't create the project folder itself, the Flutter tool handles that.
262
- To confirm your selection,
263
- click **Select a folder to create the project in**.
258
+ A file dialog should appear.
259
+
260
+ 1. Select or create the parent directory where
261
+ you want the project to be created.
262
+ 1. To confirm your selection,
263
+ click **Select a folder to create the project in**.
264
264
265
265
1. Enter a name for your app.
266
266
@@ -302,11 +302,10 @@ it's time to create an app and try out Flutter development!
302
302
Go to **Run** <span aria-label="and then">></span>
303
303
**Start Debugging** or press <kbd>F5</kbd>.
304
304
305
- Your app will be built, then a new instance of Chrome should open and
305
+ `flutter run` is used to build and start your app,
306
+ then a new instance of Chrome should open and
306
307
start running your newly created app.
307
308
308
- You can also run your app from the terminal with the `flutter run` command.
309
-
310
309
1. <h3>Try hot reload</h3>
311
310
312
311
Flutter offers a fast development cycle with **stateful hot reload**,
@@ -318,9 +317,7 @@ it's time to create an app and try out Flutter development!
318
317
then see the change in your running app.
319
318
320
319
1. In the running app, try adding to the counter a few times by
321
- clicking the
322
- {: .text-icon}
323
- button.
320
+ clicking the ![increment (+)][increment-button]{: .text-icon} button.
324
321
325
322
1. With your app still running, make a change in the `lib/main.dart` file.
326
323
@@ -337,16 +334,13 @@ it's time to create an app and try out Flutter development!
337
334
338
335
1. Save your changes
339
336
(**File** <span aria-label="and then">></span> **Save All**) or
340
- click the **Hot Reload**
341
- {: .text-icon}
342
- button.
337
+ click the **Hot Reload** ![hot reload icon][]{: .text-icon} button.
343
338
344
- Flutter will update the running app without losing any existing state.
339
+ Flutter updates the running app without losing any existing state.
345
340
Notice the existing value stayed the same.
346
341
347
342
1. Try clicking the
348
- {: .text-icon}
349
- button again.
343
+ ![increment (+)][increment-button]{: .text-icon} button again.
350
344
Notice the value decreases instead of increases.
351
345
352
346
1. <h3>Explore the Flutter sidebar</h3>
@@ -363,18 +357,17 @@ it's time to create an app and try out Flutter development!
363
357
364
358
1. Open the Flutter sidebar in VS Code.
365
359
366
- Either open it with the Flutter
367
- {: .text-icon}
368
- button in the VS Code sidebar or open it from the command palette by
360
+ Either open it with the Flutter ![Flutter logo][]{: .text-icon} button in
361
+ the VS Code sidebar or open it from the command palette by
369
362
running the **Flutter: Focus on Flutter Sidebar View** command.
370
363
371
- 1. If your app isn't running still , start debugging it again.
364
+ 1. If your app isn't running, start debugging it again.
372
365
373
366
Go to **Run** <span aria-label="and then">></span>
374
367
**Start Debugging** or press <kbd>F5</kbd>.
375
368
376
- 1. In the Flutter sidebar, under **DevTools**, click
377
- the **Flutter Inspector** button.
369
+ 1. In the Flutter sidebar, under **DevTools**,
370
+ click the **Flutter Inspector** button.
378
371
379
372
A separate **Widget Inspector** panel should open in VS Code.
380
373
@@ -387,10 +380,15 @@ it's time to create an app and try out Flutter development!
387
380
the VS Code editor should navigate to and focus the line where
388
381
the widget was included.
389
382
390
- 1. Try out other features in the widget inspector and Flutter sidebar.
383
+ 1. Explore and try out other features in
384
+ the widget inspector and Flutter sidebar.
391
385
392
386
{:.steps}
393
387
388
+ [increment-button]: /assets/images/docs/get-started/increment-button.png
389
+ [hot reload icon]: /assets/images/docs/get-started/hot-reload.svg
390
+ [Flutter logo]: /assets/images/branding/flutter/logo/square.svg
391
+
394
392
## Continue your Flutter journey {: #next-steps}
395
393
396
394
**Congratulations!**
0 commit comments