OLD | NEW |
1 --- | 1 --- |
2 layout: default | 2 layout: default |
3 title: "Try Dart" | 3 title: "Write Dart" |
4 description: "Write some Dart code. Learn some stuff." | 4 description: "Write some Dart code. Learn some stuff." |
5 snippet_img: images/piratemap.jpg | 5 snippet_img: images/piratemap.jpg |
6 has-permalinks: true | 6 has-permalinks: true |
7 tutorial: | 7 tutorial: |
8 id: trydart | 8 id: trydart |
9 js: | 9 js: |
10 - url: /js/os-switcher.js | 10 - url: /js/os-switcher.js |
11 defer: true | 11 defer: true |
12 - url: /js/editor-downloads-analytics.js | 12 - url: /js/editor-downloads-analytics.js |
13 defer: true | 13 defer: true |
14 - url: /js/editor-version.js | 14 - url: /js/editor-version.js |
15 defer: true | 15 defer: true |
16 header: | 16 header: |
17 css: ["/codelabs/darrrt/darrrt.css"] | 17 css: ["/codelabs/darrrt/darrrt.css"] |
18 --- | 18 --- |
19 | 19 |
20 # {{ page.title }} - Write your first Dart app | 20 # {{ page.title }} |
21 | 21 |
22 In this code lab, | 22 In this code lab, |
23 you build a pirate badge generator from a skeleton app. | 23 you build a pirate badge generator from a skeleton app. |
24 The sample app provides a brief look at some Dart language and library features. | 24 The sample app provides a brief look at some Dart language and library features. |
25 This code lab assumes that you have some programming experience. | 25 This code lab assumes that you have some programming experience. |
26 | 26 |
27 <strong>Build this app!</strong> | 27 <strong>Build this app!</strong> |
28 | 28 |
29 <iframe class="running-app-frame" | 29 <iframe class="running-app-frame" |
30 style="height:220px;width:530px;" | 30 style="height:220px;width:550px;" |
31 src="examples/6-piratebadge_json/piratebadge.html"> | 31 src="examples/6-piratebadge_json/piratebadge.html"> |
32 </iframe> | 32 </iframe> |
33 | 33 |
34 <hr> | 34 <hr> |
35 | 35 |
36 <div class="piratemap" markdown="1" style="min-height:325px"> | 36 <div class="piratemap" markdown="1" style="min-height:325px"> |
37 | 37 |
38 ## Map | 38 ## Map |
39 | 39 |
40 * [Step 0: Set up](#set-up) | 40 * [Step 0: Set up](#set-up) |
(...skipping 388 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
429 Use the Run button | 429 Use the Run button |
430 <img src="images/run.png" width="16" height="16" | 430 <img src="images/run.png" width="16" height="16" |
431 alt="Run button"> | 431 alt="Run button"> |
432 in Dart Editor to run the app. | 432 in Dart Editor to run the app. |
433 | 433 |
434 Compare your app to the one running below. | 434 Compare your app to the one running below. |
435 | 435 |
436 Type in the input field. | 436 Type in the input field. |
437 | 437 |
438 <iframe class="running-app-frame" | 438 <iframe class="running-app-frame" |
439 style="height:220px;width:530px;" | 439 style="height:220px;width:550px;" |
440 src="examples/2-inputnamebadge/piratebadge.html"> | 440 src="examples/2-inputnamebadge/piratebadge.html"> |
441 </iframe> | 441 </iframe> |
442 | 442 |
443 #### Problems? | 443 #### Problems? |
444 | 444 |
445 Check your code against the files in `2-inputbadge`. | 445 Check your code against the files in `2-inputbadge`. |
446 | 446 |
447 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/2-inputnamebadge/piratebadge.html) | 447 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/2-inputnamebadge/piratebadge.html) |
448 | 448 |
449 * [piratebadge.dart](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/2-inputnamebadge/piratebadge.dart) | 449 * [piratebadge.dart](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/2-inputnamebadge/piratebadge.dart) |
(...skipping 278 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
728 alt="Run button"> | 728 alt="Run button"> |
729 in Dart Editor to run the app. | 729 in Dart Editor to run the app. |
730 | 730 |
731 Compare your app to the one running below. | 731 Compare your app to the one running below. |
732 | 732 |
733 Type in the input field. | 733 Type in the input field. |
734 Remove the text from the input field. | 734 Remove the text from the input field. |
735 Click the button. | 735 Click the button. |
736 | 736 |
737 <iframe class="running-app-frame" | 737 <iframe class="running-app-frame" |
738 style="height:220px;width:530px;" | 738 style="height:220px;width:550px;" |
739 src="examples/3-buttonbadge/piratebadge.html"> | 739 src="examples/3-buttonbadge/piratebadge.html"> |
740 </iframe> | 740 </iframe> |
741 | 741 |
742 | 742 |
743 #### Problems? | 743 #### Problems? |
744 | 744 |
745 Check your code against the files in `3-buttonbadge`. | 745 Check your code against the files in `3-buttonbadge`. |
746 | 746 |
747 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/3-buttonbadge/piratebadge.html) | 747 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/3-buttonbadge/piratebadge.html) |
748 | 748 |
(...skipping 338 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1087 alt="Run button"> | 1087 alt="Run button"> |
1088 in Dart Editor to run the app. | 1088 in Dart Editor to run the app. |
1089 | 1089 |
1090 Compare your app to the one running below. | 1090 Compare your app to the one running below. |
1091 | 1091 |
1092 Type in the input field. | 1092 Type in the input field. |
1093 Remove the text from the input field. | 1093 Remove the text from the input field. |
1094 Click the button. | 1094 Click the button. |
1095 | 1095 |
1096 <iframe class="running-app-frame" | 1096 <iframe class="running-app-frame" |
1097 style="height:220px;width:530px;" | 1097 style="height:220px;width:550px;" |
1098 src="examples/4-classbadge/piratebadge.html"> | 1098 src="examples/4-classbadge/piratebadge.html"> |
1099 </iframe> | 1099 </iframe> |
1100 | 1100 |
1101 | 1101 |
1102 #### Problems? | 1102 #### Problems? |
1103 | 1103 |
1104 Check your code against the files in `4-classbadge`. | 1104 Check your code against the files in `4-classbadge`. |
1105 | 1105 |
1106 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/4-classbadge/piratebadge.html) | 1106 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/4-classbadge/piratebadge.html) |
1107 | 1107 |
(...skipping 235 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1343 <img src="images/run.png" width="16" height="16" | 1343 <img src="images/run.png" width="16" height="16" |
1344 alt="Run button"> | 1344 alt="Run button"> |
1345 in Dart Editor to run the app. | 1345 in Dart Editor to run the app. |
1346 | 1346 |
1347 Compare your app to the one running below. | 1347 Compare your app to the one running below. |
1348 | 1348 |
1349 Click the button to put a name on the badge. | 1349 Click the button to put a name on the badge. |
1350 Start the app again by duplicating this window. | 1350 Start the app again by duplicating this window. |
1351 | 1351 |
1352 <iframe class="running-app-frame" | 1352 <iframe class="running-app-frame" |
1353 style="height:220px;width:530px;" | 1353 style="height:220px;width:550px;" |
1354 src="examples/5-localbadge/piratebadge.html"> | 1354 src="examples/5-localbadge/piratebadge.html"> |
1355 </iframe> | 1355 </iframe> |
1356 | 1356 |
1357 | 1357 |
1358 #### Problems? | 1358 #### Problems? |
1359 | 1359 |
1360 Check your code against the files in `5-localbadge`. | 1360 Check your code against the files in `5-localbadge`. |
1361 | 1361 |
1362 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/5-localbadge/piratebadge.html) | 1362 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/5-localbadge/piratebadge.html) |
1363 | 1363 |
(...skipping 332 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1696 alt="Run button"> | 1696 alt="Run button"> |
1697 in Dart Editor to run the app. | 1697 in Dart Editor to run the app. |
1698 | 1698 |
1699 If you want to see what happens when the app can't find the `.json` file, | 1699 If you want to see what happens when the app can't find the `.json` file, |
1700 change the file name in the code and run the program again. | 1700 change the file name in the code and run the program again. |
1701 | 1701 |
1702 Compare your app to the final version running below. | 1702 Compare your app to the final version running below. |
1703 | 1703 |
1704 | 1704 |
1705 <iframe class="running-app-frame" | 1705 <iframe class="running-app-frame" |
1706 style="height:220px;width:530px;" | 1706 style="height:220px;width:550px;" |
1707 src="examples/6-piratebadge_json/piratebadge.html"> | 1707 src="examples/6-piratebadge_json/piratebadge.html"> |
1708 </iframe> | 1708 </iframe> |
1709 | 1709 |
1710 | 1710 |
1711 #### Problems? | 1711 #### Problems? |
1712 | 1712 |
1713 Check your code against the files in `6-piratebadge_json`. | 1713 Check your code against the files in `6-piratebadge_json`. |
1714 | 1714 |
1715 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/6-piratebadge_json/piratebadge.html) | 1715 * [piratebadge.html](https://github.com/dart-lang/one-hour-codelab/blob/master/w
eb/6-piratebadge_json/piratebadge.html) |
1716 | 1716 |
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1819 on our [Samples page](/samples/). | 1819 on our [Samples page](/samples/). |
1820 </div> | 1820 </div> |
1821 | 1821 |
1822 ### <i class="icon-anchor"> </i> Read the tutorials. | 1822 ### <i class="icon-anchor"> </i> Read the tutorials. |
1823 | 1823 |
1824 <div class="trydart-step-details" markdown="1"> | 1824 <div class="trydart-step-details" markdown="1"> |
1825 Learn more about Dart from | 1825 Learn more about Dart from |
1826 the [Dart tutorials](/docs/tutorials/). | 1826 the [Dart tutorials](/docs/tutorials/). |
1827 </div> | 1827 </div> |
1828 | 1828 |
OLD | NEW |