#2 — Getting Started
Tags: flutterfyi, dartlang, fluttercamp, flutter
Published: 2018-06-19 16:17:34

---
title: #2 — Getting Started
published: true
tags: flutterfyi,dartlang,fluttercamp,flutter
canonical_url: https://medium.com/flutter-camp/this-is-from-a-series-of-articles-im-putting-together-for-fluttercamp-2018-c1893b085d38
---

_This is from a series of articles I’m putting together for FlutterCamp 2018. Read more about it in the_ [_first article of the series here_](https://dev.to/devfestnyc/flutter-camp-2018-2c1k-temp-slug-4314172)_._

At this point, I am assuming you have just arrived at a FlutterCamp event (in person) or learnt about Flutter (online). So where do you go next?

### 2a. Get Flutter SDK set up.

If you haven’t already done so, [follow these instructions](https://flutter.io/setup-macos/) to get the [Flutter SDK](https://flutter.io/setup-macos/#get-sdk)installed in your development platform. I use MacOSX and I found the process fairly painless.

### 2b. Verify Flutter SDK set up.

Once installed, run flutter doctor to verify your development environment is ready. You should see recommendations to fix any missing dependencies if not. If, like me, you had installed an earlier version of flutter (e.g., alpha), run flutter upgrade and you should be set.

**For reference, this is my current flutter setup:**

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E199, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.0-rc1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.1.4)
[!] VS Code (version 1.24.1)
[✓] Connected devices (1 available)
```

_I currently have an issue with flutter doctor incorrectly reporting VSCode missing a Dart extension (hence the “!” on that line) but otherwise you should see something similar, customized to your development platform._

### 2c. Get Target Platform support set up.

Flutter can be used to develop apps for both Android and iOS devices. Have at least one of these environments available — see [these instructions for iOS setup](https://flutter.io/setup-macos/#ios-setup) and [these instructions for Android setup](https://flutter.io/setup-macos/#android-setup).

This includes ensuring that the required development SDKs are installed, but also setting up virtual targets for these environments — e.g., the iOS simulator and the Android emulator.

_In my case, since I am on MacOS I elected to get both setup. For quick prototyping and testing, I elect to use the iOS simulator using_open -a Simulator _to run it from the command line._

_To test against both devices, I have been switching over to the Android Studio IDE and using that to launch Android emulators — however, I am currently exploring VS Code. I will update this section with insights when done._

### **2d. Configure Editor.**

The [Flutter docs page](https://flutter.io/get-started/editor/#vscode) will identify Android Studio and VS Code as the two top-level tabs for editors. If you open the Android Studio tab, you can also find instructions for using the IntelliJ IDEA editor. I’ve used all three; IntelliJ IDEA and Android Studio are similar; no surprise — they’re both from JetBrains.

The Android Studio and IntelliJ IDEA installs were routine. The VS Code install also was effortless. _However I am currently facing an issue with flutter doctor that needs resolving in context. Watch this space._

Note: you don’t need all these editors installed. Just pick one.

Technically, you can get away with using just the Flutter CLI (comes with their SDK) and any text editor (no IDE needed). However the IDE provides visual tools (e.g., Flutter widget inspector) that simple text editors don’t. Tradeoffs are in speed vs. capability. Pick your lane. It’s fairly painless to switch between lanes at any point so you don’t risk much with your decision.

### 2e. Your First Test App

The Flutter docs provide instructions for [Android Studio](https://flutter.io/get-started/test-drive/#androidstudio), [VS Code ](https://flutter.io/get-started/test-drive/#vscode)— and also simple [text editor + CLI](https://flutter.io/get-started/test-drive/#terminal). I have used both the first and last options multiple times with no issues — so just jump in if you want to go that route.

_I am currently getting my feet wet with VS Code so all my notes/observations here will reflect usage of that editor._

![](https://cdn-images-1.medium.com/max/400/1*cNDZgHJxcpGdAG9jbpgKgw.png)<figcaption>Boilerplate “Hello World” app on Flutter</figcaption>

**Create the App (VS Code)**  
View-Command Palette.   
Type _flutter._   
Pick **_Flutter:New Project Action_**

**Enter project name**. _Lower-case, separate by underscores if needed._  
Select destination folder; wait for build to finish. You’ll get a “Your Flutter project is ready” notification at bottom right.

**Run the App.** Check there to see if device is selected. _I had iOS Simulator already running._

**Press F5 to launch app** in that device. _You should see a screen like the one shown here._

**Try Hot Reload.**  
Make a change to some aspect of the code e.g., the color value in “primarySwatch:Colors.blue”. Then just save the change to trigger hot reload. _You can also click the green refresh button at top of editor)_ — demonstrates hot stateful reload of Dart/Flutter.

At this point, take a deep breath and go drink some coffee. You are now ready to start exploring other tutorials, codelabs and ideas. Your environment is ready!

* * *