diff --git a/_includes/setup/editor-setup.md b/_includes/setup/editor-setup.md index 15478afacbd..d95ab2ac1a6 100644 --- a/_includes/setup/editor-setup.md +++ b/_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. diff --git a/_includes/setup/get-sdk-win.md b/_includes/setup/get-sdk-win.md index 9b5fc06d989..3cb67ec428a 100644 --- a/_includes/setup/get-sdk-win.md +++ b/_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 diff --git a/_includes/setup/get-sdk.md b/_includes/setup/get-sdk.md index 728ab89f505..5aed7ff6f1c 100644 --- a/_includes/setup/get-sdk.md +++ b/_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 diff --git a/_includes/setup/path-mac-linux.md b/_includes/setup/path-mac-linux.md index f6f7372abd5..4bd5bc4fb7b 100644 --- a/_includes/setup/path-mac-linux.md +++ b/_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. diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 184f455c4fb..96aabde86af 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -3,10 +3,11 @@
  • Get started
  • Build UIs
    • diff --git a/_layouts/default.html b/_layouts/default.html index 0c8a6733ce1..003e802956a 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -36,7 +36,8 @@ - + + diff --git a/_sass/_tabs.scss b/_sass/_tabs.scss new file mode 100644 index 00000000000..5d23687b896 --- /dev/null +++ b/_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 12px; + 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: 10px; + margin-bottom: 20px; +} + +.tabs__content.current{ + display: inherit; +} diff --git a/animations/hero-animations/index.md b/animations/hero-animations/index.md index 1b9bf7d1022..16b1242947e 100644 --- a/animations/hero-animations/index.md +++ b/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) diff --git a/css/main.scss b/css/main.scss index 741b759c8cc..d79967f47ed 100755 --- a/css/main.scss +++ b/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-"] { diff --git a/firebase.json b/firebase.json index 497ea20a09d..017fb664b51 100644 --- a/firebase.json +++ b/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 } ] diff --git a/formatting.md b/formatting.md index 5f2075e2fac..c0c615ee4fd 100644 --- a/formatting.md +++ b/formatting.md @@ -20,15 +20,27 @@ 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 get 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 get 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. + +To automatically format code whenever you save a file, set the +`editor.formatOnSave` setting to `true`. + ### Automatically formatting code with the `flutter` command You can also automatically format code in the command line interface (CLI) using diff --git a/get-started/codelab/index.md b/get-started/codelab/index.md index d0e3cd5283a..f3b71a049f6 100644 --- a/get-started/codelab/index.md +++ b/get-started/codelab/index.md @@ -74,15 +74,15 @@ You'll need to install the following: -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. # 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/) diff --git a/get-started/editor.md b/get-started/editor.md new file mode 100644 index 00000000000..f20980fc7ca --- /dev/null +++ b/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/). + + + +
    + +## 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. + +
    + +
    + +## 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.20.1 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 + +
    + +## 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/) diff --git a/get-started/index.md b/get-started/index.md new file mode 100644 index 00000000000..08c52e12358 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/get-started/install.md b/get-started/install.md new file mode 100644 index 00000000000..d3b35d1c418 --- /dev/null +++ b/get-started/install.md @@ -0,0 +1,19 @@ +--- +layout: page +title: "Get Started: Install" +permalink: /get-started/install/ +--- + +Please select the operating system on which you are installing Flutter: + +
    + Install on Windows + Install on macOS + Install on Linux +
    + +{% include note.html content="_Flutter is an alpha, open-source project_. +_If you're in China, please read +[this wiki article](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) +first_." +%} diff --git a/get-started/learn-more.md b/get-started/learn-more.md new file mode 100644 index 00000000000..23d613ee984 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/setup_linux.md b/get-started/setup_linux.md similarity index 63% rename from setup_linux.md rename to get-started/setup_linux.md index e4ae31668b5..f077ee0056f 100644 --- a/setup_linux.md +++ b/get-started/setup_linux.md @@ -1,6 +1,6 @@ --- layout: page -title: Flutter Setup for Linux +title: "Get Started: Install on Linux" permalink: /setup-linux/ --- @@ -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/) diff --git a/setup_macos.md b/get-started/setup_macos.md similarity index 76% rename from setup_macos.md rename to get-started/setup_macos.md index 4e3469d652b..d29349c9d92 100644 --- a/setup_macos.md +++ b/get-started/setup_macos.md @@ -1,6 +1,6 @@ --- layout: page -title: Flutter Setup for macOS +title: "Get Started: Install on macOS" permalink: /setup-macos/ --- @@ -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/) diff --git a/setup_windows.md b/get-started/setup_windows.md similarity index 60% rename from setup_windows.md rename to get-started/setup_windows.md index b995af063bd..b8cf6307acf 100644 --- a/setup_windows.md +++ b/get-started/setup_windows.md @@ -1,6 +1,6 @@ --- layout: page -title: Flutter Setup for Windows +title: "Get Started: Install on Windows" permalink: /setup-windows/ --- @@ -15,7 +15,6 @@ permalink: /setup-windows/ {% 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/) diff --git a/get-started/test-drive.md b/get-started/test-drive.md new file mode 100644 index 00000000000..1c9dbdb6bdc --- /dev/null +++ b/get-started/test-drive.md @@ -0,0 +1,166 @@ +--- +layout: page +title: "Get Started: Test Drive" +permalink: /get-started/test-drive/ +--- + +This page describes how to "test drive" Flutter: create a new Flutter app from +our templates, run it, and learn how to make changes with Hot Reload. + +Flutter is a flexible toolkit, so please start by selecting your development +tool of choice for writing, building, and running your Flutter app. + + + +
    + +*Android Studio:* A complete, integrated IDE experience for Flutter. + +## Create new app {#create-app} + + 1. Select **File>New Flutter Project** + 1. Select **Flutter application** as the project type, and press Next + 1. Enter a project name (e.g. `myapp`), and press Next + 1. Click **Finish** + 1. Wait for Android Studio to install the SDK, and create the project. + +The above command creates a Flutter project directory called `myapp` that contains a simple demo +app that uses [Material Components](https://material.io/guidelines/). + +In the project directory, the code for your app is in `lib/main.dart`. + +## Run the app + + 1. Locate the main Android Studio toolbar:
    + ![Main IntelliJ toolbar](/images/intellij/main-toolbar.png) + 1. In the **target selector**, select an Android device for running the app. + If none are listed as available, select **Tools>Android>AVD Manager** and + create one there. For details, see [Managing + AVDs](https://developer.android.com/studio/run/managing-avds.html). + 1. Click the **Run icon** in the toolbar, or invoke the menu item **Run > + Run**. + 1. If everything works, you should see your starter app on your device or + simulator:
    + ![Starter App on Android](/images/flutter-starter-app-android.png) + +## Try a hot reload + +Flutter offers a fast development cycle with _hot reload_, the ability to reload +the code of a live running app without restarting or losing app state. Simply +make a change to your source code, tell your IDE or command-line tool that you +want to hot reload, and see the change in your simulator, emulator, or device. + + 1. Change the string
    `'You have pushed the button this many times:'` + to
    `'You have clicked the button this many times:'` + 1. Do not press the 'Stop' button; let your app continue to run. + 1. To see your changes invoke **Save All** (`cmd-s` / `ctrl-s`), or click the + **Hot Reload button** (the button with the lightning bolt icon). + +You should see the updated string in the running app almost immediately. + +
    + +
    + +*VS Code:* A light-weight editor with Flutter run and debug support. + +## Create new app + + 1. Start VS Code + 1. Invoke **View>Command Palette...** + 1. Type 'flutter', and select the **'Flutter: New Project'** action + 1. Enter a project name (e.g. `myapp`), and press Enter + 1. Specify a location to place the project, and press the blue OK button + 1. Wait for the project creation to continue, and the `main.dart` file to appear + +The above command creates a Flutter project directory called `myapp` that contains a simple demo +app that uses [Material Components](https://material.io/guidelines/). + +In the project directory, the code for your app is in `lib/main.dart`. + +## Run the app + + 1. Make sure a target device is selected in the lower, right-hand corner of VS Code + 1. Press the F5 button on the keyboard, or invoke **Debug>Start Debugging** + 1. Wait for the app to launch + 1. If everything works, after the app has been built, you should see your + starter app on your device or simulator:
    + ![Starter App on Android](/images/flutter-starter-app-android.png) + +## Try a hot reload + +Flutter offers a fast development cycle with _hot reload_, the ability to reload +the code of a live running app without restarting or losing app state. Simply +make a change to your source code, tell your IDE or command-line tool that you +want to hot reload, and see the change in your simulator, emulator, or device. + + 1. Open the file `lib/main.dart` in your favorite Dart code editor + 1. Change the string
    `'You have pushed the button this many times:'` + to
    `'You have clicked the button this many times:'` + 1. Do not press the 'Stop' button; let your app continue to run. + 1. To see your changes invoke **Save** (`cmd-s` / `ctrl-s`), or click the + **Hot Reload button** (the green circular arrow button). + +You should see the updated string in the running app almost immediately. + +
    + +
    + +*Terminal + editor:* Your editor-of-choice combined with Flutter's terminal tool +for running and building. + +## Create new app + + 1. Use the `flutter create` command to create a new project: + {% commandline %} + flutter create myapp + cd myapp + {% endcommandline %} + +The above command creates a Flutter project directory called `myapp` that contains a simple demo +app that uses [Material Components](https://material.io/guidelines/). + +In the project directory, the code for your app is in `lib/main.dart`. + +## Run the app + + * Check that an Android device is running. If none are shown, see [setup](/get-started/install/). + {% commandline %} + flutter devices + {% endcommandline %} + * Run the app with the `flutter run` command: + {% commandline %} + flutter run + {% endcommandline %} + * If everything works, after the app has been built, you should see your + starter app on your device or simulator:
    + ![Starter App on Android](/images/flutter-starter-app-android.png) + +## Try a hot reload + +Flutter offers a fast development cycle with _hot reload_, the ability to reload +the code of a live running app without restarting or losing app state. Simply +make a change to your source code, tell your IDE or command-line tool that you +want to hot reload, and see the change in your simulator, emulator, or device. + + 1. Open the file `lib/main.dart` + 1. Change the string
    `'You have pushed the button this many times:'` + to
    `'You have clicked the button this many times:'` + 1. Do not press the 'Stop' button; let your app continue to run. + 1. To see your changes invoke **Save All** (`cmd-s` / `ctrl-s`), or click the + **Hot Reload button** (the button with the lightning bolt icon). + +You should see the updated string in the running app almost immediately. + +
    + +## Next step + +Let's learn some core Flutter concepts, by creating a small app. + +[Next step: Write your first app](/get-started/codelab/) diff --git a/getting-started.md b/getting-started.md deleted file mode 100644 index 279036993d6..00000000000 --- a/getting-started.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -layout: page -title: Getting started with your first Flutter app - -permalink: /getting-started/ ---- - -This page describes how to create and run your first Flutter app. - -{% include note.html content="The Flutter SDK is a prerequisite for the tasks on this page. -Make sure you [install the Flutter SDK](/setup/) before continuing." %} - -* Placeholder for TOC -{:toc} - -## Creating your first Flutter app - -To create a starter project, open a terminal and run the `flutter create ` command . - -Here is an example: - -{% commandline %} -flutter create myapp -{% endcommandline %} - -The above command creates a Flutter project directory called `myapp` that contains a simple demo -app that uses [Material Components](https://material.io/guidelines/). - -In the project directory, the code for your app is in `myapp/lib/main.dart`. - -## Running your Flutter app - -Use the `flutter run` command to run your Flutter app on a connected -device or simulator. - -To run your app from the command-line: - -1. Open a terminal and change directories to the root of your app (the same directory that -contains the `pubspec.yaml` file for your project). -2. Run the following command. Once the `flutter` tool is running, if you change the app's -source code, you can hit `r` to hot-reload your application (updating the source on the fly -without actually restarting the entire app). - -{% commandline %} -cd myapp -flutter run -{% endcommandline %} - - -If more than one device is connected, use the `flutter devices` command -to get their IDs, and then `flutter run -d deviceID` to run your app. - -Alternatively, if you are using the [IntelliJ -IDEA](https://www.jetbrains.com/idea/) IDE (either the free Community Edition, or the -Ultimate Edition) with the [Flutter -plugins](/ide-setup/), you can start your Flutter app from there: - -1. In IntelliJ, click **Create New Project** from the Welcome window or -**File > New > Project...** from the main IDE window. -1. Select **Flutter** in the menu, and click **Next**. -1. Under **Project location** enter, or browse to, the directory holding your new Flutter app. -1. Click **Finish**. -1. Click the **Run icon** in the toolbar, or invoke the menu item **Run > Run**. - -![Main IntelliJ toolbar](/images/intellij/main-toolbar.png) - -*Note*: If the Run & Debug buttons are disabled, and no targets are listed, Flutter -has not been able to discover any connected iOS or Android devices or simulators. -You need to connect a device, or start a simulator, to proceed. - -If everything works, you should see your starter app on your device or simulator. - -
    -
    - Starter App on iOS -
    Figure 1. iOS (iPhone 6s Plus)
    -
    -
    - Starter App on Android -
    Figure 2. Android (Nexus 6P)
    -
    -
    - -## Quickly viewing source code changes with 'hot reload' - -Flutter offers a fast development cycle with _hot reload_, -the ability to reload the code of a live running app -without restarting or losing app state. Simply make a -change to your source code, tell your IDE or command-line -tool that you want to hot reload, and see the change -in your simulator, emulator, or device. - -![Hot reload in IntelliJ](/images/intellij/hot-reload.gif) - -To edit your code and hot reload changes: - -1. Start your app with 'Run' (without breakpoints) or 'Debug' (with breakpoints). -1. Make desired changes in your source code. -1. Do not press the 'Stop' button; let your app continue to run. -1. To see your changes invoke **Save All** (`cmd-s` / `ctrl-s`), - or click the **Hot Reload button** (the button with the lightning bolt icon). - -A more detailed description on how to use the IntelliJ plugin and which -changes are supported by the hot reload feature can be found on the page -[Developing apps in the IntelliJ IDE](../using-ide/). - -## Next steps - -Please reach out to us at our [mailing list][mailinglist]. We'd love -to hear from you! - -You might also want to check out: -* [Building Beautiful UIs with Flutter - Codelab](https://codelabs.developers.google.com/codelabs/flutter/index.html#0) -* [Introduction to Flutter's Widget Framework](/widgets-intro/) - -Happy Fluttering! - - -[mailinglist]: mailto:flutter-dev@googlegroups.com diff --git a/ide-setup.md b/ide-setup.md deleted file mode 100644 index 66581696aa4..00000000000 --- a/ide-setup.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: page -title: IDE Setup - -permalink: /ide-setup/ ---- - -This page describes how to set up an IDE to develop Flutter apps. - -* TOC Placeholder -{:toc} - -## Flutter IDE plugins - -You can write Flutter apps in a text editor, but if you desire a rich IDE experience we recommend -using Android Studio or IntelliJ IDEA. Our Flutter and Dart plugins for these IDEs support -editing, running, and debugging Flutter apps. - -### Installation - -You can use the plugins with the following IntelliJ platform IDEs: - -* [IntelliJ CE](https://www.jetbrains.com/idea/download/) IDEA Community Edition (CE), version 2017.1 or later. -* [IntelliJ IDEA](https://www.jetbrains.com/idea/download/) IDEA Ultimate edition, version 2017.1 or later. -* [Android Studio](https://developer.android.com/studio/index.html), version 3.0 or later. - -Both IntelliJ CE and Android Studio are free to use and supported for Flutter development. - -### Installing the plugins - -To use these IDEs with Flutter, you need 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.). - -When you install the Flutter plugin, if the Dart plugin is not already present IntelliJ -installs it for you. - -To install the plugins: - -1. Start IntelliJ IDEA or 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. - -### Creating your first project - -1. Select **File>New Project** (in IntelliJ) and then Flutter, or **File>New Flutter Project** (in Android Studio) -1. If prompted for a **Flutter SDK path**, enter the location of your SDK directory. This is the top-level `flutter` - directory, without the `bin` subdirectory. For example, `c:\Users\obiwan\flutter` / `/Users/obiwan/flutter`. -1. Click **OK** - -### Using the IDEs for Flutter - -See our [additional documentation](/using-ide/) for tips on developing Flutter apps with -Android Studio or IntelliJ IDEA. - -## Community supported IDEs - -There are number of additional IDE & editor options available enabled by -community contributions: - -* [VS Code](https://code.visualstudio.com/) with the [Dart Code plugin for VS Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code) - offers a lightweight IDE with rich Flutter support for editing, refactoring, running, debugging, and - hot reloading Flutter code. - -* The Flutter terminal tool from the [Flutter SDK](https://flutter.io/setup/) - combined with a [Dart-enabled editor](https://www.dartlang.org/tools) - provides the flexibility of your favorite editor while maintaining support - for core Flutter development workflows. diff --git a/images/flutter-starter-app-android.png b/images/flutter-starter-app-android.png index 1f2dee0fc88..cc1d296a6de 100644 Binary files a/images/flutter-starter-app-android.png and b/images/flutter-starter-app-android.png differ diff --git a/index.md b/index.md index 1a78a263676..15ca2031cd8 100644 --- a/index.md +++ b/index.md @@ -21,7 +21,7 @@ hide_title: true
    - Get Started + Get Started {% include note.html content="_Flutter is an alpha, open-source project_." %}
    @@ -292,7 +292,7 @@ Future getBatteryLevel() async {
    Try Flutter today. Getting started is easy.
    - Get Started + Get Started {% include note.html content="_Flutter is an alpha, open-source project_." %}
    diff --git a/inspector.md b/inspector.md index 10a44bb5938..3e6ada1aa35 100644 --- a/inspector.md +++ b/inspector.md @@ -44,8 +44,8 @@ For a more complete demonstration of the Inspector, please see the recent ## Get Started with the Inspector -The Inspector is currently available in [the Flutter -plugin](https://flutter.io/ide-setup/) for Android Studio, or IntelliJ IDEA. +The Inspector is currently available in [the Flutter plugin](/get-started/editor/) +for Android Studio, or IntelliJ IDEA. ## Feedback issues diff --git a/js/tabs.js b/js/tabs.js new file mode 100644 index 00000000000..5acf25d7155 --- /dev/null +++ b/js/tabs.js @@ -0,0 +1,22 @@ +function setupToolsTabs() { + var tabs = $('.tabs__top-bar li'); + var tabContents = $('.tabs__content'); + + function clearTabsCurrent() { + tabs.removeClass('current'); + tabContents.removeClass('current'); + } + + tabs.click(function () { + clearTabsCurrent(); + + var tab_id = $(this).attr('data-tab'); + + $(this).addClass('current'); + $("#" + tab_id).addClass('current'); + }); +} + +$(document).ready(function () { + setupToolsTabs(); +}); \ No newline at end of file diff --git a/setup.md b/setup.md deleted file mode 100644 index 8437541091a..00000000000 --- a/setup.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -layout: page -title: Flutter installation & setup -permalink: /setup/ ---- - -This page describes how to prepare your development environment to run Flutter apps on -iOS or Android. - -{% include note.html content="_Flutter is an alpha, open-source project_. _If you're in China, please read [this wiki article](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) first_." %} - -
    - - -
    - -## Summary -To start coding Flutter apps, complete all the tasks marked Required Now in this checklist. -The remaining tasks can be deferred until later in the development cycle, when you're ready -to test and iterate using a simulator or physical device. - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TaskRequired Now?
    Verify your system meets the requirements for Flutter and dependencies (Mac) (Windows) (Linux)Y
    Clone the Flutter repo (Mac) (Windows) (Linux)Y
    Update your path (Mac) (Windows) (Linux)Y
    Run flutter doctor and resolve any issues found (Mac) (Windows) (Linux)Y
    Install and configure an IntelliJ IDE to develop Flutter apps
    Using an IDE is optional. However, we recommend using an IntelliJ IDE with Flutter for code completion, -inline error checking, and visual debugging features.
    Perform iOS setup tasks to develop apps for iOS (Mac)
    Perform Android setup tasks to develop apps for Android (Mac) (Windows) (Linux)
    - - diff --git a/technical-overview.md b/technical-overview.md index b02b5d191cd..1f93eecffe8 100644 --- a/technical-overview.md +++ b/technical-overview.md @@ -187,9 +187,7 @@ to start developing and iterating. Next steps: -1. [Install the Flutter SDK](/setup/). -1. [Set up IntelliJ](/ide-setup/) (optional). -1. [Get started](/getting-started/) with the development cycle in a few simple steps. +1. [Follow the Flutter Getting Started guide](/get-started/). 1. Try [Building Layouts in Flutter](/tutorials/layout/) and [Adding Interactivity to Your Flutter App](/tutorials/interactive/). 1. Follow a detailed example in [Tour of the Widget Framework](/widgets-intro/). diff --git a/tutorials/interactive/index.md b/tutorials/interactive/index.md index 1312544b047..9cce1cb1e03 100644 --- a/tutorials/interactive/index.md +++ b/tutorials/interactive/index.md @@ -45,9 +45,8 @@ If you've already build the layout in [Building Layouts in Flutter](/tutorials/layout/), skip to the next section. -* Make sure you've [set up](https://flutter.io/setup/) your environment. -* [Create a basic Flutter - app.](https://flutter.io/getting-started/#creating-your-first-flutter-app) +* Make sure you've [set up](/get-started/install/) your environment. +* [Create a basic Flutter app.](/get-started/test-drive/#create-app) * Replace the `lib/main.dart` file with [`main.dart`](https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/main.dart) from GitHub. diff --git a/tutorials/layout/index.md b/tutorials/layout/index.md index c51b0672ed1..2cfdc14fb27 100644 --- a/tutorials/layout/index.md +++ b/tutorials/layout/index.md @@ -56,9 +56,8 @@ start with [Flutter's approach to layout](#approach). First, get the code: -* Make sure you've [set up](/setup/) your environment. -* [Create a basic Flutter - app](/getting-started/#creating-your-first-flutter-app). +* Make sure you've [set up](/get-started/install/) your environment. +* [Create a basic Flutter app](/get-started/test-drive/#create-app). Next, add the image to the example: diff --git a/using-ide.md b/using-ide.md index 18052c2bcbb..0fac7670b86 100644 --- a/using-ide.md +++ b/using-ide.md @@ -5,14 +5,15 @@ title: Developing Flutter apps in an IDE permalink: /using-ide/ --- -The Flutter plugin provides a fully integrated development experience in an IDE. +The Flutter plugin provides a fully integrated development experience in the +Android Studio or IntelliJ IDEs. * TOC Placeholder {:toc} ## Installation and setup -Please follow the [IDE setup](/ide-setup/) instructions to install +Please follow the [Editor Setup](/get-started/editor/) instructions to install the Dart and Flutter plugins. ### Updating the plugins