Jumpstart Your Flutter Journey: A Guide to Set Up Your Development Environment
Published: 2022-12-27 15:08:08

---
title: Jumpstart Your Flutter Journey: A Guide to Set Up Your Development Environment
published: true
date: 2021-01-25 04:31:11 UTC
tags: 
canonical_url: https://sree-gaya3.hashnode.dev/flutter-environment-setup-guide
---

Hello Guys👋.

I was thinking of writing technical articles for many months and am stuck on where to start and what to write in my first article🤔. Recently, I started learning Flutter and thought that documenting my learnings would be helpful. So finally, my first technical article is here📝😀.

## Setting up your Flutter Environment

The process of setting up the flutter environment depends on the Operating System you use.

- Windows 
- macOs
- Linux
- Chrome OS

I am showing the set up on Windows in this one. For the remaining platforms you can find the detailed instructions on Flutter official Documentation [Install on macOS/Linux/Chrome OS](https://flutter.dev/docs/get-started/install)

### 1. Get the Flutter SDK

To Install Flutter on Windows, First download the Flutter SDK from [here](https://flutter.dev/docs/get-started/install/windows)

![2021-01-23 (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611403568174/wi7Fg_xZV.png)

To download the latest stable release of the Flutter SDK, click on that blue button. A zip folder with the name similar to_flutter\_windows\_a.b.c-stable.zip_ will be downloaded. Extract this zip folder into a location in your PC where you want to store the flutter files.

**Note:** Donot place the flutter folder in a directory like **C:\Program Files\** , because this requires extra privilages.

### 2. Updating the Path

If you want to run flutter from anywhere in your PC (like windows console, terminals in editors,...), you have to update your **PATH** environment variable. You can do that by following below steps :

- In the File Explorer, got into the **flutter folder** (the one you placed in the before step) and you will see a folder named **bin** , go into bin and click on the search bar to select the **path** and copy it

![2021-01-23 (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611411551444/Kvdyyg4MD.png)

- In the start search bar, type 'env' and then select the **Edit the system environment variables.**
- Under the **user variables** , select **Path** , click on **new** , and paste the path of the bin folder.
- Click ok, ok, ok (in all the windows we opened for updating path)

To check if you have done the above step right, Go to your windows console and type **flutter** and the output should look look this.

![2021-01-23(7).jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1611411908331/G8BCSwi0r.jpeg)

### 3. Android setup

To create Flutter apps for iOS or Android you need to setup emulators which we can use to run our apps and see the changes easily. You can set up the emulators by following this [Android setup](https://developer.android.com/studio).

### 4. Setting up an Editor

You can use any editors to develop flutter apps. Most recommended editors are Android Studio, IntelliJ, VS Code, Emacs. In this, I will show how to set up VS Code for flutter development. However for other editors, there are detailed instructions given in the flutter documentation which you can follow [editor setup](https://flutter.dev/docs/get-started/editor?tab=androidstudio).

#### Steps to set up Visual Studio Code:

1. Download the latest version of Visual Studio Code from [here](https://code.visualstudio.com/).
2. Start VS Code, and go to **View -> Command Palette**.
3. Type _Install_ and then select **Extensions: Install Extensions** , an extensions tab will open on the left side.
4. In the search bar of extensions, type _flutter_ and select **Flutter** and click **Install**. 

![2021-01-24 (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611503088006/pPkDr9CeC.png)

This will also install the Dart Plugin, but if you want to be sure, you can install **Dart Plugin** by following the same steps as above (type _dart_ in the search bar and select **Dart** ).

**Note: VS Code needs Reloading whenever the plugins are downloaded.**

### 5. Check the status of your Setup:

As of now, you have downloaded and installed Flutter SDK, Set up an emulator and also set up your editor. You can check whether you have installed all these correctly or not. To check the status of you Setup :

**_Make Sure you start your emulator before checking the status of your Installation._**

#### Method 1 : Through Command Palette

1. In VS Code, go to **View -> Command Palette**.
2. Type _doctor_ , and select **Flutter: Run Flutter Doctor**.
3. You will see the output similar to the one below (in OUTPUT Pane)

![2021-01-24 (9).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611503762269/XS7hlkEX7.png)

#### Method 2 : Through Terminal in VS Code

1. In VS Code, go to **Terminal -> New Terminal**.
2. run this command
```
flutter doctor

```
3. You will see the output similar to the one below

![2021-01-24 (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611503722749/YDLJsaEOK.png)

### 6. Create and Run your first Flutter App

#### a. Create the Flutter App:

You can create Flutter App through **Command Palette** in VS Code.

1. In VS Code, go to **View -> Command Palette**.
2. Type _flutter_ and select **Flutter: New Application Project** , and then enter the name of the project and press **Enter**.
3. Now, select a folder in which you want to create your project, and wait for some time untill the project files are created.

#### b. Run the App:

1. Locate the **blue bar** at the bottom of the window.
2. You will either see **No Device** or **Name of the emulator** at the right side of the blue bar.
3. If you can see your emulator, click on emulator.
4. If you see **No Device** , Then click on no device, and you will see a prompt where you can select your emulator.
5. Next, go to **Run -> Start Debugging** or press **F5**.
6. Wait for the emulator to launch and the progress will be printed in **Debug Console** view.
7. Let the app build and you can see the app on your emulator.

The Default App is very simple. When we run it, The terminal look like this.

![2021-01-24 (10).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611505502025/sTFiPpGW7.png)

The App on the emulator looks similar to this one.

![2021-01-24 (11).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611505427751/Xp_r49NgK.png)

The app contains

1. A header portion also known as App Bar with text "Flutter Demo Home Page".
2. There are two text parts in the center of the screen 
3. A + button at the bottom right.

What this simple app does is it counts the number of times we clicked the + button.

And yeah, you have successfully created and ran your first Flutter App👏🥳.

That's all for this article. I hope this helped you in setting up your Flutter environment. Stay tuned for the next one.

If you have any comments, questions, or concerns? I am more than happy to take them💬.

Happy Learning 👍!!!