diff --git a/firebase.json b/firebase.json index 5914c877c9..51f59c5d1e 100644 --- a/firebase.json +++ b/firebase.json @@ -125,6 +125,7 @@ { "source": "/get-started/fwe/:rest*", "destination": "/get-started/fundamentals/:rest*", "type": 301 }, { "source": "/get-started/install/null", "destination": "/get-started/install", "type": 301 }, { "source": "/get-started/learn-more", "destination": "/get-started/learn-flutter", "type": 301 }, + { "source": "/get-started/test-drive*", "destination": "/get-started/codelab", "type": 301 }, { "source": "/get-started/web", "destination": "/platform-integration/web/building", "type": 301 }, { "source": "/ios-14", "destination": "/platform-integration/ios/ios-debugging", "type": 301 }, { "source": "/ios-project-migration", "destination": "https://web.archive.org/web/20220614103526/https://docs.flutter.dev/development/ios-project-migration", "type": 301 }, diff --git a/src/_includes/docs/install/test-drive/androidstudio.md b/src/_includes/docs/install/test-drive/androidstudio.md deleted file mode 100644 index 26cd921ef3..0000000000 --- a/src/_includes/docs/install/test-drive/androidstudio.md +++ /dev/null @@ -1,78 +0,0 @@ -### Create a sample Flutter app {:#create-app-android-studio} - -1. Launch the IDE. - -2. To be able to create flutter projects on Android Studio, install the - [Flutter Plugin](https://plugins.jetbrains.com/plugin/9212-flutter) and - for smart Dart coding assistance that includes code completion, formatting, - navigation, intentions, refactorings, and more, - install the [Dart Plugin](https://plugins.jetbrains.com/plugin/6351-dart/). - -3. Head back to your IDE start page and Click **New Flutter Project** at the - top of the **Welcome to Android Studio** dialog. - -4. Under **Generators**, click **Flutter**. - -5. Verify the **Flutter SDK path** value against the Flutter SDK location - on your development machine. - -6. Click **Next**. - -7. Enter `test_drive` into the **Project name** field. - Your project name should be written in [snake case](https://developer.mozilla.org/en-US/docs/Glossary/Snake_case) and in lowercase. - This follows the Flutter best practices for naming projects. - -8. 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**. - -9. From **Project type** dropdown, select **Application**. - -10. Ignore the remaining form fields. You don't need to change them for - this test drive. Click **Create**. - -11. Wait for Android Studio to create the project. - -12. 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 sample Flutter app - -1. Locate the main Android Studio toolbar at the top of the - Android Studio edit window. - - ![Main IntelliJ toolbar][] - -1. In the **target selector**, select an Android device for running the app. - You created your Android target device in the **Install** section. - -1. To run your app, make one of the following choices: - - {:type="a"} - 1. Click the run icon in the toolbar. - - 1. Go to **Run** > **Run**. - - 1. Press Ctrl + R. - -{% capture save_changes -%} - : invoke **Save All**, or click **Hot Reload** - {% render docs/install/test-drive/hot-reload-icon.md %}. -{% endcapture %} - -{% capture ide_profile -%} - to invoke the menu item **Run > Profile** in the IDE, or -{% endcapture %} - -{% include docs/install/test-drive/try-hot-reload.md save_changes=save_changes ide="Android Studio" %} - -[Main IntelliJ toolbar]: /assets/images/docs/tools/android-studio/main-toolbar.png -[Material Components]: {{site.material}}/components diff --git a/src/_includes/docs/install/test-drive/hot-reload-icon.md b/src/_includes/docs/install/test-drive/hot-reload-icon.md deleted file mode 100644 index a9768fcff1..0000000000 --- a/src/_includes/docs/install/test-drive/hot-reload-icon.md +++ /dev/null @@ -1 +0,0 @@ -Lightning bolt icon for hot reload diff --git a/src/_includes/docs/install/test-drive/terminal.md b/src/_includes/docs/install/test-drive/terminal.md deleted file mode 100644 index 26ae3d8a0f..0000000000 --- a/src/_includes/docs/install/test-drive/terminal.md +++ /dev/null @@ -1,43 +0,0 @@ -### Create a sample Flutter app {:#create-app-terminal} - -To create a new Flutter app, run the following commands in your shell or Terminal. - -1. Run the `flutter create` command. - - ```console - flutter create test_drive - ``` - - The command creates a Flutter project directory called `test_drive` - that contains a simple demo app that uses [Material Components][]. - -1. Change to the Flutter project directory. - - ```console - cd test_drive - ``` - -### Run your sample Flutter app - -1. To verify that you have a running target device, - run the following command. - - ```console - flutter devices - ``` - - You created your target device in the **Install** section. - -2. To run your app, run the following command. - - ```console - flutter run - ``` - -{% capture save_changes -%} -. - -1. Type r in the terminal window. -{% endcapture %} - -{% include docs/install/test-drive/try-hot-reload.md save_changes=save_changes ide="VS Code" %} diff --git a/src/_includes/docs/install/test-drive/try-hot-reload.md b/src/_includes/docs/install/test-drive/try-hot-reload.md deleted file mode 100644 index c07ec5ea4e..0000000000 --- a/src/_includes/docs/install/test-drive/try-hot-reload.md +++ /dev/null @@ -1,33 +0,0 @@ -After the app build completes, your device displays your app. - -{% render docs/app-figure.md, img-class:"site-mobile-screenshot border", image:"get-started/macos/starter-app.png", caption:"Starter app on macOS" %} - -## 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 source code, run the hot reload command in -{{include.ide}}, and see the change in your target device. - -1. Open `lib/main.dart`. - -1. 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:' ,` | - - {:.table .table-striped} - - :::important - _Don't stop your app._ Let your app run. - ::: - -1. Save your changes{{include.save_changes}} - -Your app updates the string as you watch. - -{% render docs/app-figure.md, img-class:"site-mobile-screenshot border", image:"get-started/macos/starter-app-hot-reload.png", caption:"Starter app after hot reload" %} diff --git a/src/_includes/docs/install/test-drive/vscode.md b/src/_includes/docs/install/test-drive/vscode.md deleted file mode 100644 index bddced0d14..0000000000 --- a/src/_includes/docs/install/test-drive/vscode.md +++ /dev/null @@ -1,81 +0,0 @@ -### Create a sample Flutter app {:#create-app-vs-code} - -1. To use Flutter DevTools from VS Code, install the - [Flutter extension](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter). - This also automatically installs the - [Dart extension](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code). - With these extensions, you can debug your Flutter app. - -2. Open the Command Palette. - - Go to **View** > **Command Palette** or - press + Shift + P. - -3. Type `flutter`. - -4. Select **Flutter: New Project**. - -5. When prompted for **Which Flutter Project**, select **Application**. - -6. Create or select the parent directory for the new project folder. - -7. When prompted for a **Project Name**, enter `test_drive`. - -8. Press Enter. - -9. Wait for project creation to complete. - -10. 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 sample Flutter app - -Run your example application on your desktop platform, -in the Chrome web browser, in an iOS simulator, or Android emulator. - -:::note -Though you can deploy your app to the web, -the web target doesn't support -hot reload at this time. -::: - -1. Open the Command Palette. - - Go to **View** > **Command Palette** or - press + Shift + P. - -1. Type `flutter`. - -1. Select **Flutter: Select Device**. - - If no devices are running, this command prompts you to enable a device. - -1. Select a target device from **Select Device** prompt. - -1. After you select a target, start the app. - Go to **Run** > - **Start Debugging** or press F5. - -1. Wait for the app to launch. - - You can watch the launch progress in the **Debug Console** view. - -{% capture save_changes -%} -: invoke **Save All**, or click **Hot Reload** -{% render docs/install/test-drive/hot-reload-icon.md %}. -{% endcapture %} - -{% include docs/install/test-drive/try-hot-reload.md save_changes=save_changes ide="VS Code" %} - -[Material Components]: {{site.material}}/components - - diff --git a/src/content/cookbook/design/fonts.md b/src/content/cookbook/design/fonts.md index 09d8e64278..b8ee12f365 100644 --- a/src/content/cookbook/design/fonts.md +++ b/src/content/cookbook/design/fonts.md @@ -49,7 +49,7 @@ This guide makes the following presumptions: ::: [set up your Flutter environment]: /get-started/install -[new-flutter-app]: /get-started/test-drive +[new-flutter-app]: /reference/create-new-app ## Choose a font diff --git a/src/content/get-started/codelab-web.md b/src/content/get-started/codelab-web.md index 1d20f78306..d5d36ab8e7 100644 --- a/src/content/get-started/codelab-web.md +++ b/src/content/get-started/codelab-web.md @@ -1100,7 +1100,7 @@ Dart DevTools, or Flutter animations, see the following: [Animation docs]: /ui/animations [Building a form with validation]: /cookbook/forms/validation [Chrome browser]: https://www.google.com/chrome/?brand=CHBD&gclid=CjwKCAiAws7uBRAkEiwAMlbZjlVMZCxJDGAHjoSpoI_3z_HczSbgbMka5c9Z521R89cDoBM3zAluJRoCdCEQAvD_BwE&gclsrc=aw.ds -[create a new Flutter project]: /get-started/test-drive +[create a new Flutter project]: /reference/create-new-app [Dart DevTools]: /tools/devtools [DartPad]: {{site.dartpad}} [DevTools command line]: /tools/devtools/cli diff --git a/src/content/get-started/test-drive.md b/src/content/get-started/test-drive.md deleted file mode 100644 index 32aea7f26f..0000000000 --- a/src/content/get-started/test-drive.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Test drive -description: How to create a templated Flutter app and use hot reload. -prev: - title: Set up Flutter - path: /get-started/install -next: - title: Write your first Flutter app - path: /get-started/codelab -toc: false ---- - -{% case os %} -{% when 'Windows' -%} - {% assign path='C:\dev\' %} - {% assign terminal='PowerShell' %} - {% assign prompt1='D:>' %} - {% assign prompt2=path | append: '>' %} - {% assign dirdl='%CSIDL_DEFAULT_DOWNLOADS%\' %} -{% when "macOS" -%} - {% assign path='~/development/' %} - {% assign terminal='the Terminal' %} - {% assign prompt1='$' %} - {% assign prompt2='$' %} - {% assign dirdl='~/Downloads/' %} -{% else -%} - {% assign path='~/development/' %} - {% assign terminal='a shell' %} - {% assign prompt1='$' %} - {% assign prompt2='$' %} - {% assign dirdl='~/Downloads/' %} -{% endcase -%} - -## What you'll learn - -1. How to create a new Flutter app from a sample template. -1. How to run the new Flutter app. -1. How to use "hot reload" after you make changes to the app. - - -These tasks depend on which integrated development environment (IDE) you use. - -* **Option 1** explains how to code with Visual Studio Code and - its Flutter extension. - -* **Option 2** explains how to code with Android Studio or IntelliJ IDEA with - its Flutter plugin. - - Flutter supports IntelliJ IDEA Community, Educational, and Ultimate editions. - -* **Option 3** explains how to code with an editor of your choice and use - the terminal to compile and debug your code. - -## Choose your IDE - -Select your preferred IDE for Flutter apps. - -{% tabs %} -{% tab "Visual Studio Code" %} - -{% include docs/install/test-drive/vscode.md %} - -{% endtab %} -{% tab "Android Studio and IntelliJ" %} - -{% include docs/install/test-drive/androidstudio.md %} - -{% endtab %} -{% tab "Terminal & editor" %} - -{% include docs/install/test-drive/terminal.md %} - -{% endtab %} -{% endtabs %} diff --git a/src/content/perf/app-size.md b/src/content/perf/app-size.md index f5e273a41a..6e1bac1eed 100644 --- a/src/content/perf/app-size.md +++ b/src/content/perf/app-size.md @@ -16,8 +16,7 @@ features like Android instant apps. By default, launching your app with `flutter run`, or by clicking the **Play** button in your IDE -(as used in [Test drive][] and -[Write your first Flutter app][]), +(as used in [Write your first Flutter app][]), generates a _debug_ build of the Flutter app. The app size of a debug build is large due to the debugging overhead that allows for hot reload @@ -194,7 +193,6 @@ Some other things you can do to make your app smaller are: [iOS create build archive instructions]: /deployment/ios#update-the-apps-build-and-version-numbers [Model ID / Hardware number]: https://en.wikipedia.org/wiki/List_of_iOS_devices#Models [Obfuscating Dart code]: /deployment/obfuscate -[Test drive]: /get-started/test-drive [Write your first Flutter app]: /get-started/codelab [Play Console's instructions]: https://support.google.com/googleplay/android-developer/answer/9302563?hl=en [Google Play Console]: https://play.google.com/apps/publish/ diff --git a/src/content/platform-integration/desktop.md b/src/content/platform-integration/desktop.md index a1a7cd63c5..0a5f242915 100644 --- a/src/content/platform-integration/desktop.md +++ b/src/content/platform-integration/desktop.md @@ -65,13 +65,13 @@ restart your IDE so that it can detect the new device. ### Create and run Creating a new project with desktop support is no different -than [creating a new Flutter project][] for other platforms. +from [creating a new Flutter project][] for other platforms. Once you've configured your environment for desktop support, you can create and run a desktop application either in the IDE or from the command line. -[creating a new Flutter project]: /get-started/test-drive +[creating a new Flutter project]: /reference/create-new-app #### Using an IDE diff --git a/src/content/platform-integration/web/wasm.md b/src/content/platform-integration/web/wasm.md index 1a0f3b356b..e92f9a91bf 100644 --- a/src/content/platform-integration/web/wasm.md +++ b/src/content/platform-integration/web/wasm.md @@ -35,7 +35,7 @@ or choose any Flutter application that has been migrated to be [compatible with Wasm](#js-interop-wasm). -[sample app]: /get-started/test-drive +[sample app]: /reference/create-new-app ### Modify the index page diff --git a/src/content/ui/animations/hero-animations.md b/src/content/ui/animations/hero-animations.md index d181ad8a5c..9dc7e75843 100644 --- a/src/content/ui/animations/hero-animations.md +++ b/src/content/ui/animations/hero-animations.md @@ -268,7 +268,7 @@ using Flutter's hero widget. When using `MaterialPageRoute` to specify the new route, the image flies along a curved path, as described by the [Material Design motion spec][]. -[Create a new Flutter example][] and +[Create a new Flutter app][] and update it using the files from the [hero_animation][]. To run the example: @@ -481,7 +481,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][] and +[Create a new Flutter app][] and update it using the files from the [radial_hero_animation][] GitHub directory. @@ -614,7 +614,7 @@ Key information: [Building Layouts in Flutter]: /ui/layout [`ClipOval`]: {{site.api}}/flutter/widgets/ClipOval-class.html [ClipRect]: {{site.api}}/flutter/widgets/ClipRect-class.html -[Create a new Flutter example]: /get-started/test-drive +[Create a new Flutter app]: /reference/create-new-app [`createRectTween`]: {{site.api}}/flutter/widgets/CreateRectTween.html [`debugPaintSizeEnabled`]: /tools/devtools/inspector#debugging-layout-issues-visually [`Hero`]: {{site.api}}/flutter/widgets/Hero-class.html diff --git a/src/content/ui/interactivity/index.md b/src/content/ui/interactivity/index.md index b0fd7fe654..19a195a2cc 100644 --- a/src/content/ui/interactivity/index.md +++ b/src/content/ui/interactivity/index.md @@ -764,7 +764,7 @@ Wonderous app [running app][wonderous-app], [repo][wonderous-repo] [Gestures]: /cookbook/gestures [Gestures in Flutter]: /ui/interactivity/gestures [Handling gestures]: /ui#handling-gestures -[new-flutter-app]: /get-started/test-drive +[new-flutter-app]: /reference/create-new-app [`IconButton`]: {{site.api}}/flutter/material/IconButton-class.html [`Icon`]: {{site.api}}/flutter/widgets/Icon-class.html [`InkWell`]: {{site.api}}/flutter/material/InkWell-class.html diff --git a/src/content/ui/layout/tutorial.md b/src/content/ui/layout/tutorial.md index 8dadc2a85d..008c7f59d2 100644 --- a/src/content/ui/layout/tutorial.md +++ b/src/content/ui/layout/tutorial.md @@ -153,7 +153,7 @@ In this section, shell out the basic Flutter app code to start your app. ``` [Set up your Flutter environment]: /get-started/install -[new-flutter-app]: /get-started/test-drive +[new-flutter-app]: /reference/create-new-app ## Add the Title section