Reworked getting started experience

_includes/setup/editor-setup.md

@@ -3,6 +3,6 @@
 Using the `flutter` command-line tools, you can use any editor to develop Flutter applications.
 Type `flutter help` at a prompt to view the available tools.
 
-We recommend using our IntelliJ plug-ins for a  [rich IDE experience](/using-ide/) 
-supporting editing, running, and debugging Flutter apps. See [IDE Setup](/ide-setup/)
+We recommend using our plug-ins for a [rich IDE experience](/using-ide/) 
+supporting editing, running, and debugging Flutter apps. See [Editor Setup](/get-started/editor/)
 for detailed steps.

_includes/setup/get-sdk-win.md

@@ -54,7 +54,7 @@ itself. Subsequent runs should be much faster.
 
 The following sections describe how to perform these tasks and finish the setup process.
 You'll see in `flutter doctor` output that if you choose to use an IDE, plugins
-are available for IntelliJ IDEA. See [IntelliJ Setup](/ide-setup/)
+are available for IntelliJ IDEA, Android Studio, and VS Code. See [Editor Setup](/get-started/editor/)
 for the steps to install the Flutter and Dart plugins.
 
 Once you have installed any missing dependencies, run the `flutter doctor` command again to

_includes/setup/get-sdk.md

@@ -47,7 +47,7 @@ itself. Subsequent runs should be much faster.
 
 The following sections describe how to perform these tasks and finish the setup process.
 You'll see in `flutter doctor` output that if you choose to use an IDE, plugins
-are available for IntelliJ IDEA. See [IntelliJ Setup](/ide-setup/)
+are available for IntelliJ IDEA, Android Studio, and VS Code. See [Editor Setup](/get-started/editor/)
 for the steps to install the Flutter and Dart plugins.
 
 Once you have installed any missing dependencies, run the `flutter doctor` command again to

_includes/setup/path-mac-linux.md

@@ -8,7 +8,7 @@ The steps for modifying this variable permanently for all terminal sessions are
 Typically you add a line to a file that is executed whenever you open 
 a new window. For example:
 
-1. Determine the directory where you cloned Flutter's git repo. You will
+1. Determine the directory where you placed the Flutter SDK. You will
    need this in Step 3.
 2. Open (or create) `$HOME/.bash_profile`. The file path and filename might be
    different on your machine.

_includes/sidebar.html

@@ -3,10 +3,11 @@
   <li class="sidebar-title">Get started</li>
 
     <ul class="sidebar-items">
-      <li><a href="/setup/">Install</a></li>
-      <li><a href="/getting-started/">Create and run your first app</a></li>
-      <li><a href="/ide-setup/">Setting up the IDE</a></li>
-      <li><a href="/bootstrap-into-dart/">Bootstrap into Dart</a></li>
+      <li><a href="/get-started/install/">Install</a></li>
+      <li><a href="/get-started/editor/">Configure Editor</a></li>
+      <li><a href="/get-started/test-drive/">Test drive</a></li>
+      <li><a href="/get-started/codelab/">Write your first app</a></li>
+      <li><a href="/get-started/learn-more/">Learn more</a></li>
     </ul>
 
   <li class="sidebar-title">Build UIs</li>

_layouts/default.html

@@ -36,7 +36,8 @@
     <script src="{{ "/js/sidebar_toggle.js" }}"></script>
     <script src="{{ "/js/customscripts.js" }}"></script>
     <script src="{{ "/js/prism.js" }}"></script>
-
+    <script src="{{ "/js/tabs.js" }}"></script>
+
     <script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script>
   </body>
 </html>

_sass/_tabs.scss

@@ -0,0 +1,34 @@
+$tab-accent-color: $brand-color;
+
+// General tabs. These are intended for instructions that vary according to user
+// selection, e.g. around editor choice in getting started.
+
+ul.tabs__top-bar {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.tabs__top-bar li {
+  background: none;
+  color: $grey-color;
+  display: inline-block;
+  padding: 5px 5px;
+  cursor: pointer;
+}
+
+ul.tabs__top-bar li.current{
+  background: $tab-accent-color;
+  color: $background-color;
+}
+
+.tabs__content{
+  display: none;
+  border: 1px solid $tab-accent-color;
+  padding: 5px;
+  margin-bottom: 20px;
+}
+
+.tabs__content.current{
+  display: inherit;
+}

animations/hero-animations/index.md

@@ -302,7 +302,7 @@ to specify the new route, the image flies along a curved path,
 as described by the [Material Design motion
 spec.](https://material.io/guidelines/motion/movement.html)
 
-[Create a new Flutter example](/getting-started/) and
+[Create a new Flutter example](/get-started/test-drive/) and
 update it using the files from the
 [GitHub directory.](https://github.com/flutter/website/tree/master/_includes/code/animation/hero_animation/)
 
@@ -521,7 +521,7 @@ rectangular clips yield a rectangle that's the same size as the hero
 widget. In other words, at the end of the transition the image is no
 longer clipped.
 
-[Create a new Flutter example](/getting-started/) and
+[Create a new Flutter example](/get-started/test-drive/) and
 update it using the files from the
 [GitHub directory.](https://github.com/flutter/website/tree/master/_includes/code/animation/radial_hero_animation)
 

css/main.scss

@@ -61,7 +61,8 @@ $on-laptop:        800px;
         "code_pre",
         "catalog",
         "homepage",
-        "responsive_embeds"
+        "responsive_embeds",
+        "tabs"
 ;
 
 aside > :not(pre) > code[class*="language-"], aside > pre[class*="language-"] {

firebase.json

@@ -69,8 +69,18 @@
         "type": 301
       },
       {
-        "source": "/get-started/",
-        "destination": "/setup/",
+        "source": "/getting-started",
+        "destination": "/get-started/",
+        "type": 301
+      },
+      {
+        "source": "/setup",
+        "destination": "/get-started/install/",
+        "type": 301
+      },
+      {
+        "source": "/ide-setup",
+        "destination": "/get-started/editor/",
         "type": 301
       }
     ]

formatting.md

@@ -20,15 +20,24 @@ developers may find it more productive to:
 The alternative is often tiring formatting debates during code reviews, where
 time may be better spent on code behavior rather than code style.
 
-### Automatically formatting code in IntelliJ
+### Automatically formatting code in Android Studio, and IntelliJ
 
-Automatic formatting of code is supported in IntelliJ if you have the
-`Dart` plugin (see [IntelliJ setup](/ide-setup/)).
+Install the the `Dart` plugin (see [Editor setup](/get-started/editor/)
+to enable automatic formatting of code in Android Studio and IntelliJ.
 
 To automatically format the code in the current source code window, right-click
 in the code window and select `Reformat with Dart style`. You can add a keyboard
 shortcut to this in Keymap section of IntelliJ Preferences.
 
+### Automatically formatting code in VS Code
+
+Install the `Dart-Code` plugin (see [Editor setup](/get-started/editor/)
+to enable automatic formatting of code in VS Code.
+
+To automatically format the code in the current source code window, right-click
+in the code window and select `Format Document`. You can add a keyboard
+shortcut to this VS Code Preferences.
+
 ### Automatically formatting code with the `flutter` command
 
 You can also automatically format code in the command line interface (CLI) using

get-started/codelab/index.md

@@ -74,15 +74,15 @@ You'll need to install the following:
 </li>
 </ul>
 
-See [Flutter Installation and Setup](/setup/) for information on how
-to set up your environment.
+See [Flutter Installation and Setup](/get-started/install/) for information on
+how to set up your environment.
 
 </div>
 
 # Step 1: Create the starting Flutter app
 
 Create a simple, templated Flutter app, using the instructions in
-[Getting Started with your first Flutter app.](/getting-started/)
+[Getting Started with your first Flutter app.](/get-started/test-drive/#create-app)
 Name the project **startup_namer** (instead of _myapp_).
 You’ll be modifying this starter app to create the finished app.
 
@@ -985,18 +985,6 @@ In this codelab, you've:
   and the new route.
 * Learned about changing the look of your app's UI using Themes.
 
-Here are some resources you might find useful:
-
-{% comment %}
-Once the "Flutter for React" doc (etc) are done, add here.
-{% endcomment %}
-
-* [Flutter API docs](https://docs.flutter.io/)
-* [Building Layouts in Flutter](/tutorials/layout/) tutorial
-* [Add Interactivity](/tutorials/interactive/) tutorial
-* [Flutter Cookbook](/cookbook/)
-* [From Java to Dart](https://codelabs.developers.google.com/codelabs/from-java-to-dart/#0) codelab
-
-You can learn more about Flutter at [flutter.io,](https://flutter.io/)
-and Dart at [www.dartlang.org.](https://www.dartlang.org/)
+## Next step
 
+[Next step: Learn More](/get-started/learn-more/)

get-started/editor.md

@@ -0,0 +1,89 @@
+---
+layout: page
+title: "Get Started: Configure Editor"
+permalink: /get-started/editor/
+---
+
+You can build apps with Flutter using any text editor combioned with our
+command-line tools. However, we recommend using one of our editor plugins for an
+even better experience. With our editor plugins, you get code completion, syntax
+highlighting, widget edditing assists, run & debug support, and more.
+
+Follow the steps before to add an editor plugin for Android Studio, IntelliJ, or
+VS Code. If you want to use a different editor, that's OK, simply skip ahead to
+[Next step: Create and run your first app](/get-started/test-drive/).
+
+<ul class="tabs__top-bar">
+    <li class="tab-link current" data-tab="tab-install-androidsstudio">Android Studio</li>
+    <li class="tab-link" data-tab="tab-install-vscode">VS Code</li>
+</ul>
+
+<div id="tab-install-androidsstudio" class="tabs__content current" markdown="1">
+
+## Android Studio setup
+
+*Android Studio:* A complete, integrated IDE experience for Flutter. 
+
+### Install Android Studio
+
+   * [Android Studio](https://developer.android.com/studio/index.html), version 3.0 or later.
+
+Alternatively, you can also use IntelliJ:
+
+   * [IntelliJ IDEA Community](https://www.jetbrains.com/idea/download/), version 2017.1 or later.
+   * [IntelliJ IDEA Ultimate](https://www.jetbrains.com/idea/download/), version 2017.1 or later.
+
+### Install the Flutter and Dart plugins
+
+Flutter is supported by two plugins:
+
+   * The `Flutter` plugin powers Flutter developer workflows (running,
+     debugging, hot reload, etc.).
+   * The `Dart` plugin offers code analysis (code validation as you type, code
+     completions, etc.).
+
+To install these:
+
+   1. Start Android Studio.
+   1. Open plugin preferences (**Preferences>Plugins** on macOS,
+      **File>Settings>Plugins** on Windows & Linux).
+   1. Select **Browse repositories…**,  select the Flutter plug-in and click
+      `install`.
+   1. Click `Yes` when prompted to install the Dart plugin.
+   1. Click `Restart` when prompted.
+
+</div>
+
+<div id="tab-install-vscode" class="tabs__content" markdown="1">
+
+## Visual Studio Code (VS Code) setup
+
+*VS Code:* A light-weight editor with Flutter run and debug support.
+
+### Install VS Code
+
+  * [VS Code](https://code.visualstudio.com/), version 1.19 or later.
+
+### Install the Dart Code plugin
+
+  1. Start VS Code
+  1. Invoke **View>Command Palette...**
+  1. Type 'install', and select the **'Extensions: Install Extension'** action
+  1. Enter `dart code` in the search field, select 'Dart Code' in the list, and
+     click **Install**
+  1. Select 'OK' to reload VS Code
+
+## Validate your setup with the Flutter Doctor
+
+  1. Invoke **View>Command Palette...**
+  1. Type 'doctor', and select the **'Flutter: Run Flutter Doctor'** action
+  1. Review the output in the 'OUTPUT' pane for any issues
+
+</div>
+
+## Next step
+
+Let's take Flutter for a test drive: create a first project, run it, and
+experiencee 'hot reload'.
+
+[Next step: Test drive Flutter](/get-started/test-drive/)

get-started/index.md

@@ -0,0 +1,17 @@
+---
+layout: page
+title: "Get Started: Overview"
+permalink: /get-started/
+---
+
+Welcome to the Flutter Get Started Experience. We will help you:
+
+* Install the Flutter framework
+* Install the dependencies of the Flutter framework
+* Create, run, and make changes to your first Flutter app
+* Learn core Flutter concepts through a small step-by-step lesson
+* Suggest some next steps
+
+## Next step
+
+[Next step: Install Flutter](/get-started/install/)

setup.md → get-started/install.md

@@ -1,7 +1,7 @@
 ---
 layout: page
-title: Flutter installation & setup
-permalink: /setup/
+title: "Get Started: Install"
+permalink: /get-started/install/
 ---
 
 This page describes how to prepare your development environment to run Flutter apps on
@@ -39,7 +39,7 @@ to test and iterate using a simulator or physical device.
    <td>Run <code>flutter doctor</code> and resolve any issues found (<a href="/setup-macos/#run-flutter-doctor">Mac</a>) (<a href="/setup-windows/#run-flutter-doctor">Windows</a>) (<a href="/setup-linux/#run-flutter-doctor">Linux</a>)</td><td align="center">Y</td>
  </tr>
  <tr>
-   <td colspan="2"><a href="/ide-setup/">Install and configure an IntelliJ IDE to develop Flutter apps</a></td>
+   <td colspan="2"><a href="/get-started/editor/">Install and configure an editor to develop Flutter apps</a></td>
  </tr>
  <tr><td class="alert-warning" colspan="2">Using an IDE is optional. However, we recommend using an IntelliJ IDE with Flutter for code completion, 
 inline error checking, and visual debugging features.</td>
@@ -52,4 +52,6 @@ inline error checking, and visual debugging features.</td>
  </tr>
 </table>
 
+## Next step
 
+[Next step: Configure Editor](/get-started/editor/)

get-started/learn-more.md

@@ -0,0 +1,29 @@
+---
+layout: page
+title: "Get Started: Learn More"
+permalink: /get-started/learn-more/
+---
+* Learn more about the Flutter framework
+
+{% comment %}
+Once the "Flutter for React" doc (etc) are done, add here.
+{% endcomment %}
+
+  * [Building Layouts in Flutter](/tutorials/layout/) tutorial
+  * [Add Interactivity](/tutorials/interactive/) tutorial
+  * [A Tour of the Flutter Widget Framework](/widgets-intro/)
+  * [Flutter for Android Developers](/flutter-for-android/)
+
+
+* Other resources
+
+  * [Flutter Cookbook](/cookbook/)
+  * [From Java to Dart](https://codelabs.developers.google.com/codelabs/from-java-to-dart/#0) codelab
+  * [Bootstrap into Dart: learn more about the language](/bootstrap-into-dart/)
+
+Please reach out to us at our [mailing list][mailinglist]. We'd love
+to hear from you!
+
+Happy Fluttering!
+
+[mailinglist]: mailto:flutter-dev@googlegroups.com

setup_linux.md → get-started/setup_linux.md

@@ -17,7 +17,6 @@ permalink: /setup-linux/
 
 {% include setup/android-setup.md %}
 
-## Next steps
+## Next step
 
-Now, follow our [Getting Started guide](/getting-started/)
-to run your first Flutter app on Android.
+[Next step: Configure Editor](/get-started/editor/)

setup_macos.md → get-started/setup_macos.md

@@ -25,7 +25,6 @@ first Flutter app.
 
 {% include setup/android-setup.md %}
 
-## Next steps
+## Next step
 
-Now, follow our [Getting Started guide](/getting-started/)
-to run your first Flutter app on iOS or Android.
+[Next step: Configure Editor](/get-started/editor/)