diff --git a/css/styles.scss b/css/styles.scss new file mode 100644 index 00000000000..ef9cb1a4d06 --- /dev/null +++ b/css/styles.scss @@ -0,0 +1,16 @@ +--- +# Front matter comment to ensure Jekyll properly reads file. +--- + +// Add your styles here + +.box2 { + display: inline-block; + width: 300px; + height: 600px; + margin: 2em; +} + +figure figcaption { + text-align: center; +} \ No newline at end of file diff --git a/getting-started.md b/getting-started.md index 4a2b905e330..89c605b55d8 100644 --- a/getting-started.md +++ b/getting-started.md @@ -4,157 +4,94 @@ title: Getting Started with Flutter nav_title: Getting Started permalink: /getting-started/ --- + -Flutter currently supports developers on Mac and Linux (64-bit). -Windows support is planned but currently incomplete. +This quickstart guide describes how to create and run your first Flutter app on iOS or Android. -## Dependencies +* [Before you begin](#before_you_begin) +* [1. Create your first Flutter app](#1_create_your_first_flutter_app) +* [2. Run your Flutter app](#2_run_your_flutter_app) +* [3. View the logs](#3_view_the_logs) +* [Next steps](#next_steps) -Flutter depends on the following tools being available in your environment. These are commonly already available on Mac and Linux. +## Before you begin -* bash, mkdir, rm -* git -* curl -* unzip +To write Flutter apps, you will need to install the Flutter SDK. You also need to set up a Linux or +Mac development machine to run and test your apps on Android or iOS. See +[Flutter Setup](../setup) for instructions on how to set up your development environment. -## Getting the Flutter code +## 1. Create your first Flutter app -Clone the `alpha` branch from the Flutter repository: - -```bash -$ git clone https://github.com/flutter/flutter.git -b alpha -``` - -We update the `alpha` branch periodically as we improve Flutter. To upgrade -your Flutter clone, we recommend using the `flutter upgrade` command rather -than using `git pull` directly. (See the next section for how to set up -the `flutter` command.) - -## Configuring your PATH - -After you clone the Flutter repository, set your PATH so you can -use our scripts and tools. - -`export PATH=` _directory where you cloned the flutter repo_ `/bin:$PATH` - -Open a new shell and run `flutter --version` to ensure the `flutter` command is on your PATH. -The first time you do this will take a few seconds as Flutter will first -download the Dart SDK then compile itself. Subsequent runs should be much faster. - -## Creating your first sample app - -You can use the `flutter` command to create a starter project. +To create a starter project, open a terminal and run the `flutter` command . Here is an example: ``` -$ flutter create -o my_app +$ flutter create -o myapp ``` -The above command creates a `my_app` directory that contains a simple demo +The above command creates a Flutter project directory called `myapp` that contains a simple demo app that uses [Material Design](https://www.google.com/design/spec/material-design/introduction.html). -The code for your app is in `my_app/lib/main.dart`. -To learn more about how to build apps with Flutter, please see the -[tutorial](/tutorial/). +In the project directory, the code for your app is in `my_app/lib/main.dart`. -## Setting up your Android device +## 2. Run your Flutter app -(Don't have an Android device? You can skip down to -[Setting up your Mac for iOS development](#setting-up-your-mac-for-ios-development).) +Use the `flutter run` command to run your Flutter app on all connected +devices and simulators. (The `flutter devices` command will list connected devices and +simulators.) -Currently Flutter requires an Android device running -Jelly Bean, v16, 4.1.x or later. +To run your app from the command-line: - - Install [Android Studio](https://developer.android.com/sdk/) and run through - enough of the first-run experience to install the Android SDK. (You shouldn't - need to install a JDK.) +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. - - Enable developer mode on your device by visiting `Settings > About phone` and - tapping the `Build number` field seven times. + ``` + $ flutter run + ``` - - Enable `Android debugging` in `Settings > Developer options`. +Alternatively, if you are using the [Atom editor](https://atom.io/) with the +[Flutter package](https://atom.io/packages/flutter), you can start your Flutter app by selecting +the `/lib/main.dart` file in the project and pressing the Run App shortcut in the main editor +screen. The shortcut depends on the operating system of the development machine you are using: - - Using a USB cable, plug your phone into your computer. If prompted on your - device, authorize your computer to access your device. +* **Linux**: `Ctrl+R` +* **Mac**: `Command+R` - - Check that `adb` lists your device with `adb devices -l`. -By default, Flutter uses the version of the Android SDK where your `adb` tool is based. If -you want Flutter to use a different installation of the Android SDK, you must set the -`ANDROID_HOME` environment variable to that specific installation directory. +If everything works, you should see your starter app on your Android device or iOS Simulator. -## Running a Flutter application on Android +
+
+
+ +
Figure 1. iOS Simulator (iPhone 6s Plus)
+
+
+
+
+ +
Figure 2. Android (Nexus 6)
+
+
+
-You can use the `flutter run` command to run your Flutter app on all connected -devices and simulators. `flutter devices` will list connected devices and -simulators. -First, change directories to the root of your app (the same directory that -contains the `pubspec.yaml` file for your project). +## 3. View the logs -To run your app, use: - -``` -$ flutter run -``` +The `flutter logs` command lets you see textual output from your app, including `print` +statements and unhandled exceptions. -If everything works, you should see your starter app -on your Android device. - -![First Flutter app running on an Android phone](/images/flutter_starter_app_screenshot.png) - -## Viewing the logs - -Start streaming the logs from the device: +To start streaming the logs when your Flutter app is running on an Android device or on the iOS +Simulator, run this command: ``` $ flutter logs ``` -The `logs` command lets you see textual output from your app, including `print` -statements and unhandled exceptions. To avoid confusion from old log messages, -you might want to use `flutter logs --clear` to clear the logs between runs. - -## Setting up your Mac for iOS development - -You must use a Mac, with Xcode 7+ installed, to develop iOS apps with Flutter. - -Install the following dependencies: - -- Install Xcode 7 (via [web download](https://developer.apple.com/xcode/) or [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835)) - - Make sure the Xcode EULA is signed by either opening Xcode once and confirming or running `sudo xcodebuild -license` from the command line. -- Install `ideviceinstaller` via [homebrew](http://brew.sh/) - - `$ brew install ideviceinstaller` -- Install the `ios-deploy` tool. - - `$ brew tap flutter/flutter` - - `$ brew install ios-deploy` - -## Running your app in the iOS simulator - -We currently only support iOS development with the iOS simulator, -but you can deploy Flutter apps to iOS devices. - -- Run `Simulator.app` - - You can find Simulator.app via Spotlight or by running - `open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app` - - Ensure your simulator is using a 64-bit device (iPhone 5s or later) by checking the Simulator.app's `Hardware -> Device` menu -- Depending on your screen size, simulated high-screen-density iOS devices often overflow your screen. Set the device scale under the `Window` > `Scale` menu in the Simulator. -- Run `flutter run` from your app's directory - - This command detects the iOS simulator and starts the app - -## Getting Started with the Atom editor - -Flutter recommends [Atom](https://atom.io/) for editing, running, -and debugging Flutter apps. However, -using our command-line tools, you can use -any editor to develop Flutter applications. - -Download Atom from [atom.io](https://atom.io) -and then install the [Flutter package](https://atom.io/packages/flutter). -If you need help installing packages, consult the -[Atom documentation](https://atom.io/docs/v1.3.2/using-atom-atom-packages) -or [email us][mailinglist]. +To avoid confusion from old log messages, you can use the `flutter logs --clear` option to clear +the logs between runs. ## Next steps diff --git a/images/flutter-starter-app-android.png b/images/flutter-starter-app-android.png new file mode 100644 index 00000000000..19f91118be9 Binary files /dev/null and b/images/flutter-starter-app-android.png differ diff --git a/images/flutter-starter-app-ios.png b/images/flutter-starter-app-ios.png new file mode 100644 index 00000000000..ba9d54b46e9 Binary files /dev/null and b/images/flutter-starter-app-ios.png differ diff --git a/images/flutter_starter_app_screenshot.png b/images/flutter_starter_app_screenshot.png deleted file mode 100644 index 828547aec97..00000000000 Binary files a/images/flutter_starter_app_screenshot.png and /dev/null differ diff --git a/setup.md b/setup.md new file mode 100644 index 00000000000..37f4f8f6732 --- /dev/null +++ b/setup.md @@ -0,0 +1,130 @@ +--- +layout: page +title: Flutter Setup +nav_title: Flutter Setup +permalink: /setup/ +--- + +This guide describes how to set up your development environment to run Flutter apps on +iOS or Android. + +* [System requirements](#system_requirements) +* [iOS setup](#ios_setup) +* [Android setup](#android_setup) +* [Get the Flutter SDK](#get_the_flutter_sdk) +* [Atom editor](#atom_editor) + +## System requirements + +To install and run Flutter, your development environment must meet these minimum requirements: + +* **Operating Systems**: Mac or Linux (64-bit). Windows support is planned. +* **Tools**: Flutter depends on these command-line tools being available on your environment. + * `bash`, `mkdir`, `rm`, `git`, `curl`, `unzip` + +## iOS setup + +To develop Flutter apps for iOS, you need a Mac with Xcode 7.2 or newer: + +1. Install Xcode 7.2 or newer (via [web download](https://developer.apple.com/xcode/) or +the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835)). +2. Make sure the Xcode EULA is signed by either opening Xcode once and confirming or +running `sudo xcodebuild -license` from the command-line. + +With Xcode, you’ll be able to run Flutter apps on the iOS simulator. + +### Set up the iOS simulator ### + +To prepare to run and test your Flutter app on the iOS simulator, follow these steps: + +1. On your Mac, find the Simulator via Spotlight or by using the following command: + + ``` + $ open -a Simulator + ``` + +2. Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings +in the simulator's **Hardware > Device** menu. +3. Depending on your development machine's screen size, simulated high-screen-density iOS devices +may overflow your screen. Set the device scale under the **Window > Scale** menu in the simulator. + + +### Deploy to iOS devices + +To deploy your Flutter app to a physical iOS device, you’ll need some additional tools: + +1. Install [homebrew](http://brew.sh/). +2. Open the terminal and run these command to install the toools for deploying Flutter apps to +iOS devices. + +
+    $ brew tap flutter/flutter
+    $ brew install ideviceinstaller ios-deploy
+    
+ +## Android setup + +To develop Flutter apps for Android, you can use either a Mac or a Linux (64-bit) machine: + +1. Install [Android Studio](https//developer.android.com/sdk/index.html). +2. From Android Studio, install the latest Android SDK and Android SDK Platform-Tools, as described +in [Adding SDK Packages](https://developer.android.com/sdk/installing/adding-packages.html). + +### Set up your Android device + +To prepare to run and test your Flutter app on Android, you'll need an Android device running +Android 4.1 (API level 16) or higher. + +1. Enable developer mode on your device by visiting **`Settings > About phone`** and +tapping the **`Build number`** line seven times. +2. Enable **`Android debugging`** in **`Settings > Developer options`**. +3. Using a USB cable, plug your phone into your computer. If prompted on your +device, authorize your computer to access your device. +4. In the terminal, run the `flutter devices` command to verify that Flutter recognizes your +connected Android device. + +By default, Flutter uses the version of the Android SDK where your `adb` tool is based. If +you want Flutter to use a different installation of the Android SDK, you must set the +`ANDROID_HOME` environment variable to that specific installation directory. + +## Get the Flutter SDK + +To get Flutter, use `git` to clone the repository and then add the `flutter` tool to your path: + +
+$ git clone https://github.com/flutter/flutter.git -b alpha
+$ export PATH=`pwd`/flutter/bin:$PATH
+
+ +To complete the setup and to validate that you’ve set everything up correctly, run the following +command: + +``` +$ flutter doctor +``` + +The first time your run the `flutter` command, it will download its dependencies and compile +itself. Subsequent runs should be much faster. + +## Atom editor + +We recommend using [Atom](https://atom.io/) for editing, running, and debugging Flutter apps. +However, using our command-line tools, you can use any editor to develop Flutter applications. + +Download Atom from [atom.io](https://atom.io/) and then install the +[Flutter package](https://atom.io/packages/flutter). If you need help installing +packages, consult the [Atom documentation](https://atom.io/docs/v1.3.2/using-atom-atom-packages) +or [email us](flutter-dev@googlegroups.com). + +### Configure Atom for Flutter development + +Before creating your Flutter project in Atom, you’ll need to perform these pre-flight tasks: + +1. In the terminal window, run the `atom` command to launch the editor. + ``` + $ atom + ``` +2. Open **Packages > Flutter > Package Settings**, and set the **FLUTTER_ROOT** field to the +root directory where you installed the Flutter SDK. +3. Open **Packages > Dart > Package Settings**, and set the **Dart SDK Location** field to the +`bin/cache/dart-sdk` directory in your Flutter SDK’s root folder. \ No newline at end of file