Jumpstart Your Flutter Journey: A Guide to Set Up Your Development Environment

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

1. Get the Flutter SDK

To Install Flutter on Windows, First download the Flutter SDK from here

To download the latest stable release of the Flutter SDK, click on that blue button. A zip folder with the name similar toflutter_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

• 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.

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.

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.

Steps to set up Visual Studio Code:

1. Download the latest version of Visual Studio Code from here.
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 .

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)

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

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.

The App on the emulator looks similar to this one.

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 👍!!!