diff --git a/firebase.json b/firebase.json
index 35a80fff57..f4c702bf4b 100644
--- a/firebase.json
+++ b/firebase.json
@@ -806,6 +806,7 @@
{ "source": "/to/state-management-sample", "destination": "/data-and-backend/state-mgmt/simple", "type": 301 },
{ "source": "/to/switch-flutter-version", "destination": "/install/upgrade#switch-to-a-specific-flutter-version", "type": 301 },
{ "source": "/to/team-infra", "destination": "https://github.com/flutter/flutter/blob/main/docs/triage/Infra-Triage.md", "type": 301 },
+ { "source": "/to/test-drive", "destination": "/get-started/quick", "type": 301 },
{ "source": "/to/track-widget-creation", "destination": "/tools/devtools/inspector#track-widget-creation", "type": 301 },
{ "source": "/to/troubleshoot-devices", "destination": "/get-started/install", "type": 301 },
{ "source": "/to/unbounded-constraints", "destination": "/ui/layout/constraints#unbounded", "type": 301 },
diff --git a/src/content/assets/images/docs/get-started/increment-button.png b/src/content/assets/images/docs/get-started/increment-button.png
new file mode 100644
index 0000000000..c25b0d48a3
Binary files /dev/null and b/src/content/assets/images/docs/get-started/increment-button.png differ
diff --git a/src/content/get-started/install/index.md b/src/content/get-started/install/index.md
index fcf04de560..8df945d85d 100644
--- a/src/content/get-started/install/index.md
+++ b/src/content/get-started/install/index.md
@@ -1,7 +1,9 @@
---
title: Choose your development platform to get started
short-title: Install
-description: Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems.
+description: >-
+ Install Flutter and get started developing!
+ Downloads available for Windows, macOS, Linux, and ChromeOS operating systems.
os-list: [Windows, macOS, Linux, ChromeOS]
js: [{url: '/assets/js/page/install-current.js'}]
---
@@ -19,4 +21,13 @@ js: [{url: '/assets/js/page/install-current.js'}]
{% endfor %}
+:::tip Planning to use VS Code?
+Are you planning to use VS Code to develop Flutter apps?
+
+Try out the streamlined getting-started experience
+outlined in [Set up and test drive Flutter][]!
+
+[Set up and test drive Flutter]: /get-started/quick
+:::
+
{% render docs/china-notice.md %}
diff --git a/src/content/get-started/quick.md b/src/content/get-started/quick.md
new file mode 100644
index 0000000000..3475f86f1c
--- /dev/null
+++ b/src/content/get-started/quick.md
@@ -0,0 +1,485 @@
+---
+title: Set up and test drive Flutter
+short-title: Set up & test drive
+description: >-
+ Set up Flutter on your device with VS Code and
+ get started developing your first multi-platform app with Flutter!
+toc: false
+showBanner: false
+sitemap: false
+---
+
+Learn how to use VS Code to set up your Flutter development environment
+and test drive Flutter's developer experience.
+
+:::note What you'll achieve
+
+- Install the software prerequisites for Flutter.
+- Use VS Code to download and install Flutter.
+- Create a new Flutter app from a sample template.
+- Try out Flutter development features like stateful hot reload.
+
+:::
+
+## Confirm your development platform {: #dev-platform}
+
+The instructions on this page are configured to cover
+installing and test driving Flutter on a **Windows**{:.selected-os-text} device.
+
+If you'd like to follow the instructions for a different OS,
+please select one of the following.
+
+{% osSelector %}
+
+## Download prerequisite software {: #download-prerequisites}
+
+For the smoothest Flutter setup,
+first install the following tools.
+
+ 1. Set up Linux support
+
+ If you haven't set up Linux support on your Chromebook before,
+ [Turn on Linux support][chromeos-linux].
+
+ If you've already turned on Linux support,
+ ensure it's up to date following the
+ [Fix problems with Linux][chromeos-linux-update] instructions.
+
+ 1. Download and install prerequisite packages
+
+ Using `apt-get` or your preferred installation mechanism,
+ install the latest versions of the following packages:
+
+ - `curl`
+ - `git`
+ - `unzip`
+ - `xz-utils`
+ - `zip`
+ - `libglu1-mesa`
+
+ If you want to use `apt-get`,
+ install these packages using the following commands:
+
+ ```console
+ $ sudo apt-get update -y && sudo apt-get upgrade -y
+ $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
+ ```
+
+ 1. Download and install Visual Studio Code
+
+ To quickly install Flutter, then edit and debug your apps,
+ [install and set up Visual Studio Code][vscode-install].
+
+{: .steps .chromeos-only}
+
+ 1. Install the Xcode command-line tools
+
+ Download the Xcode command-line tools to get access to
+ the command-line tools that Flutter relies on, including Git.
+
+ To download the tools, run the following command in your preferred terminal:
+
+ ```console
+ $ xcode-select --install
+ ```
+
+ If you haven't installed the tools already,
+ a dialog should open that confirms you'd like to install them.
+ Click **Install**, then once the installation is complete, click **Done**.
+
+ 1. Download and install Visual Studio Code
+
+ To quickly install Flutter, then edit and debug your apps,
+ [install and set up Visual Studio Code][vscode-install].
+
+{: .steps .macos-only}
+
+ 1. Install Git for Windows
+
+ Download and install the latest version of [Git for Windows][].
+
+ For help installing or troubleshooting Git,
+ reference the [Git documentation][git-install].
+
+ 1. Download and install Visual Studio Code
+
+ To quickly install Flutter, then edit and debug your apps,
+ [install and set up Visual Studio Code][vscode-install].
+
+{: .steps .windows-only}
+
+ 1. Download and install prerequisite packages
+
+ Using your preferred package manager or mechanism,
+ install the latest versions of the following packages:
+
+ - `curl`
+ - `git`
+ - `unzip`
+ - `xz-utils`
+ - `zip`
+ - `libglu1-mesa`
+
+ On Debian-based distros with `apt-get`, such as Ubuntu,
+ install these packages using the following commands:
+
+ ```console
+ $ sudo apt-get update -y && sudo apt-get upgrade -y
+ $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa
+ ```
+
+ 1. Download and install Visual Studio Code
+
+ To quickly install Flutter, then edit and debug your apps,
+ [install and set up Visual Studio Code][vscode-install].
+
+{: .steps .linux-only}
+
+[chromeos-linux]: https://support.google.com/chromebook/answer/9145439
+[chromeos-linux-update]: https://support.google.com/chromebook/answer/9145439?hl=en#:~:text=Fix%20problems%20with%20Linux
+[Git for Windows]: https://git-scm.com/downloads/win
+[git-install]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+[vscode-install]: https://code.visualstudio.com/docs/setup/setup-overview
+
+## Install and set up Flutter {: #install}
+
+Now that you've installed Git and VS Code,
+follow these steps to use VS Code to install and set up Flutter.
+
+:::note Download manually
+If you prefer to manually install Flutter,
+follow the instructions in [Install Flutter manually][].
+:::
+
+ 1. Launch VS Code
+
+ If not already open, open VS Code by searching for it with Spotlight
+ or opening it manually from the directory where it's installed.
+
+ 1. Add the Flutter extension to VS Code
+
+ To add the Dart and Flutter extensions to VS Code,
+ visit the [Flutter extension's marketplace page][flutter-vscode],
+ then click **Install**.
+ If prompted by your browser, allow it to open VS Code.
+
+ 1. Install Flutter with VS Code
+
+ 1. Open the command palette in VS Code.
+
+ Go to **View** > **Command Palette**
+ or press Cmd/Ctrl +
+ Shift + P.
+
+ 1. In the command palette, type `flutter`.
+
+ 1. Select **Flutter: New Project**.
+
+ 1. VS Code prompts you to locate the Flutter SDK on your computer.
+ Select **Download SDK**.
+
+ 1. When the **Select Folder for Flutter SDK** dialog displays,
+ choose where you want to install Flutter.
+
+ 1. Click **Clone Flutter**.
+
+ While downloading Flutter, VS Code displays this pop-up notification:
+
+ ```console
+ Downloading the Flutter SDK. This may take a few minutes.
+ ```
+
+ This download takes a few minutes.
+ If you suspect that the download has hung, click **Cancel** then
+ start the installation again.
+
+ 1. Click **Add SDK to PATH**.
+
+ When successful, a notification displays:
+
+ ```console
+ The Flutter SDK was added to your PATH
+ ```
+
+ 1. VS Code might display a Google Analytics notice.
+
+ If you agree, click **OK**.
+
+ 1. To ensure that Flutter is available in all terminals:
+
+ 1. Close, then reopen all terminal windows.
+ 1. Restart VS Code.
+
+ {:type="a"}
+
+ 1. Validate your setup
+
+ To ensure you installed Flutter correctly,
+ run `flutter doctor -v` in your preferred terminal.
+
+ If the command isn't found or there's an error,
+ check out [Flutter installation troubleshooting][troubleshoot].
+
+{:.steps}
+
+[Install Flutter manually]: /install/manual
+[flutter-vscode]: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
+[troubleshoot]: /install/troubleshoot
+
+## Test drive Flutter {: #test-drive}
+
+Now that you've set up VS Code and Flutter,
+it's time to create an app and try out Flutter development!
+
+ 1. Create a new Flutter app
+
+ 1. Open the command palette in VS Code.
+
+ Go to **View** > **Command Palette**
+ or press Cmd/Ctrl +
+ Shift + P.
+
+ 1. In the command palette, start typing `flutter:`.
+
+ VS Code should surface commands from the Flutter plugin.
+
+ 1. Select the **Flutter: New Project** command.
+
+ Your OS or VS Code might ask for access to your documents,
+ agree to continue to the next step.
+
+ 1. Choose the **Application** template.
+
+ VS Code should prompt you with **Which Flutter template?**.
+ Choose **Application** to bootstrap a simple counter app.
+
+ 1. Create or select the parent directory for your new app's folder.
+
+ A file dialog should appear.
+
+ 1. Select or create the parent directory where
+ you want the project to be created.
+ 1. To confirm your selection,
+ click **Select a folder to create the project in**.
+
+ 1. Enter a name for your app.
+
+ VS Code should prompt you to enter a name for your new app.
+ Enter `trying_flutter` or a similar `lowercase_with_underscores` name.
+ To confirm your selection, press Enter.
+
+ 1. Wait for project initialization to complete.
+
+ Task progress is often surfaced as a notification in the bottom right
+ and can also be accessed from the **Output** panel.
+
+ 1. Open the `lib` directory, then the `main.dart` file.
+
+ If you're curious about what each portion of the code does,
+ check out the preceding comments throughout the file.
+
+ 1. Run your app on the web
+
+ While Flutter apps can run on many platforms,
+ try running your new app on the web.
+
+ 1. Open the command palette in VS Code.
+
+ Go to **View** > **Command Palette**
+ or press Cmd/Ctrl +
+ Shift + P.
+
+ 1. In the command palette, start typing `flutter:`.
+
+ VS Code should surface commands from the Flutter plugin.
+
+ 1. Select the **Flutter: Select Device** command.
+
+ 1. From the **Select Device** prompt, select **Chrome**.
+
+ 1. Run or start debugging your app.
+
+ Go to **Run** >
+ **Start Debugging** or press F5.
+
+ `flutter run` is used to build and start your app,
+ then a new instance of Chrome should open and
+ start running your newly created app.
+
+ 1. Try hot reload
+
+ 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's source code,
+ run the hot reload command in VS Code,
+ then see the change in your running app.
+
+ 1. In the running app, try adding to the counter a few times by
+ clicking the ![increment (+)][increment-button]{: .text-icon} button.
+
+ 1. With your app still running, make a change in the `lib/main.dart` file.
+
+ Change the `_counter++` line in the `_incrementCounter` method
+ to instead decrement the `_counter` field.
+
+ ```dart diff
+ setState(() {
+ // ...
+ - _counter++;
+ + _counter--;
+ });
+ ```
+
+ 1. Save your changes
+ (**File** > **Save All**) or
+ click the **Hot Reload** ![hot reload icon][]{: .text-icon} button.
+
+ Flutter updates the running app without losing any existing state.
+ Notice the existing value stayed the same.
+
+ 1. Try clicking the
+ ![increment (+)][increment-button]{: .text-icon} button again.
+ Notice the value decreases instead of increases.
+
+ 1. Explore the Flutter sidebar
+
+ The Flutter plugin adds a dedicated sidebar to VS Code
+ for managing Flutter debug sessions and devices,
+ viewing an outline of your code and widgets,
+ as well as accessing the Dart and Flutter DevTools.
+
+ 1. If your app isn't running, start debugging it again.
+
+ Go to **Run** >
+ **Start Debugging** or press F5.
+
+ 1. Open the Flutter sidebar in VS Code.
+
+ Either open it with the Flutter ![Flutter logo][]{: .text-icon} button in
+ the VS Code sidebar or open it from the command palette by
+ running the **Flutter: Focus on Flutter Sidebar View** command.
+
+ 1. If your app isn't running, start debugging it again.
+
+ Go to **Run** >
+ **Start Debugging** or press F5.
+
+ 1. In the Flutter sidebar, under **DevTools**,
+ click the **Flutter Inspector** button.
+
+ A separate **Widget Inspector** panel should open in VS Code.
+
+ In the widget inspector, you can view your app's widget tree,
+ view the properties and layout of each widget, and more.
+
+ 1. In the widget inspector, try clicking the top-level `MyHomePage` widget.
+
+ A view of its properties and layout should open, and
+ the VS Code editor should navigate to and focus the line where
+ the widget was included.
+
+ 1. Explore and try out other features in
+ the widget inspector and Flutter sidebar.
+
+{:.steps}
+
+[increment-button]: /assets/images/docs/get-started/increment-button.png
+[hot reload icon]: /assets/images/docs/get-started/hot-reload.svg
+[Flutter logo]: /assets/images/branding/flutter/logo/square.svg
+
+## Continue your Flutter journey {: #next-steps}
+
+**Congratulations!**
+Now that you've installed and tried out Flutter,
+explore some of the following docs to continue your Flutter learning journey.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Select a project location
- A file dialog will appear.
- Select or create the parent directory where the project will be created.
- Do not create the project folder itself, the Flutter tool will do so.
+ A file dialog should appear.
+ Select or create the parent directory where
+ you want the project to be created.
+ Don't create the project folder itself, the Flutter tool does so.
To confirm your selection,
click **Select a folder to create the project in**.
@@ -119,7 +120,7 @@ Then follow these steps:
1. Wait for project initialization
Based on the information you entered,
- VS Code will use `flutter create` to bootstrap your application.
+ VS Code uses `flutter create` to bootstrap your app.
Progress is often surfaced as a notification in the bottom right
and can also be accessed from the **Output** panel.