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 +
+
+ + $ 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