Setting Up Flutter Mob App Development Environment On Windows 2021
Tags: flutter, dart, android, vscode
Published: 2020-07-17 07:39:27

We’ll have an overview of Flutter, the latest buzz in app development market. Flutter is gaining popularity faster than any other framework. Some say it is Google’s answer to Facebook’s React Native or any other cross platform frameworks, but that debate is for later.

##Flutter: What, How, and Why?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j0nesadfz9fifxyd15mr.gif)

What is Flutter, and how is it different? Just remember this - Flutter was built to work for any device with a screen and works with:

- [iOS](https://www.apple.com/ios/ios-13/) and [Android](https://www.android.com/)
- [Web](https://en.wikipedia.org/wiki/Web_application) and [Desktop](https://en.wikipedia.org/wiki/Application_software) (Mac, Windows, and Ubuntu) - Even support [PWA
Auto](https://en.wikipedia.org/wiki/Progressive_web_application)
- [Raspberry Pi (POC stage)](https://en.wikipedia.org/wiki/Raspberry_Pi)

> [Flutter](https://flutter.dev/) is [Google’s](https://www.google.com/) UI toolkit for building beautiful, [natively compiled applications](https://en.wikipedia.org/wiki/Native_%28computing%29) for mobile, web, and desktop from a single codebase.

Check out this video from Google; it's a great place to get a grasp - comparing Native Development, Hybrid App Development, React Native Development, and finally, Flutter App Development.

{% youtube l-YO9CmaSUM %}

###Flutter System Architecture:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lqz2lskq5gxg1ep4fb5u.png)

##Setting Up Flutter On Windows...

Flutter is relatively straightforward to set up and depending on what OS you're using, here we are using Windows 10.

for Windows System Requirement click [here](https://flutter.dev/docs/get-started/install/windows#system-requirements).

**Files to be downloaded,**

- [Flutter SDK](https://flutter.dev/docs/get-started/install/windows)
- [Git for Windows](https://git-scm.com/download/win)
- [Android Studio 4.0.1 for Windows 64-bit](https://developer.android.com/studio)
- [Visual Studio Code](https://code.visualstudio.com/docs/?dv=win)

##Get the Flutter SDK

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z0qit4611gfoffa2gzyq.png)

Download Latest [Flutter SDK](https://flutter.dev/docs/get-started/install/windows).

The reason we ask that you setup [Flutter](https://flutter.dev/) before [Dart](https://dart.dev/) is because when you install Flutter, you install Dart too, and while you can separately install dart, it would an unnecessary step. Flutter will decide which dart version will be used, so installing different dart version will be ambiguous as well.

Once you've downloaded and unzipped Flutter, you should set the correct Environment Path for flutter,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7pwlpzu4mtqjnyt23vaq.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cefb9b8dys2t9tgj4i02.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8neum8lxep34wvdzy9zq.png)

*Note:* that you will have to close and reopen any existing console windows for these changes to take effect.

From a console window which has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

```
flutter doctor
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pkj57sqccbvtz2kjlo6l.png)

*Note:* here i already installed Android Studio that's why it's green

##Android Studio Setup

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dza6aimlbt6s6rioskxy.png)

Download Latest [Android Studio](https://developer.android.com/studio).

*Note:* do not put any spaces between name of Android SDK location to avoid issues.

Now if you try to run `flutter doctor` command, maybe you face some licenses error of Android Studio.

To resolve this simply hit below command,

```
flutter doctor --android-licenses
```

Now after download finish, we have to configure few things for further process,

- Open Android Studio -> Configure -> SDK Manager.
*Note:* if any Android Project is opened, close it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9sbncajb1qe4rmz2rm18.png)

- Make sure in the SDK Tools Tab you select these below Tools,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zxbsek4age2lv60xjt9j.png)

- Before running `flutter doctor` command, we need to provide Environment Path for Android SDK Tools and Variable name must be `ANDROID_SDK_ROOT` as shown in below image.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/11rjrumi8e1hsvfk22ve.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3632lyoyc3s1ih3kzqln.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mmjjxzlvbfemlu4c24qv.png)

Running `flutter doctor` command show the resolved dependencies ticked and Android SDK turns green.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5g2fsm8hqmykskzmgrtj.png)

- Now we have to install the flutter and dart plugins for Android Studio, here in my case i have intellij Idea too so i will install both the plugins for them. this is not necessary as we will code our app in VSCode.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ct8q8a0rp2preoenvcw.png)

Flutter plugin automatically installs dart plugin, Click Yes when prompted to install the Dart plugin.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19n9mu7azyrcllckfzw6.png)

Running `flutter doctor` command show all the resolved dependencies except connected device!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/45a71yx9bmiey91r2rkc.png)

For devices you have few options either go for Android Virtual Device(AVD)/Emulator(can be from any third party software) or Connect a real Device via data cable or Wireless Android debugging in your real device or using your real device as a emulator.

Here we are setting up new Android Virtual Device(AVD)/Emulator in our Android Studio and use in to run our application on that.

AVDs allow you to test your application without having to own the physical devices.

- Open Android Studio -> Configure -> AVD Manager.
*Note:* if any Android Project is opened, close it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/as37mu716t0k1d8tp93p.png)

Click on Create Virtual Device,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/spw3ek27j2pzbj0zt2g2.png)

From category select Phone and choose your preferred device, play store symbol indicates you will have play store installed in your device and click next.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tm396dvws4hyetm8dtj0.png)

Select your preferred system image, download it and click next.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4f5f4m62xl8fodaephtf.png)

Name your Android Virtual Device(AVD) and click finish.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/80g2vy5j2qc3eaznbt7x.png)

Here you will see the list of AVDs you have created,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aek42p7yjqxs54uwhabr.png)

Running the `flutter doctor` or `flutter devices` command, still device is not connected, why? because connected devices means the running devices, we have created our AVD but not started.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uyaxar37vpyb0upkx6o4.png)

Run `flutter emulators` to list and start any available device emulators,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/le3vdz0j45wmw95nuek0.png)

Move to your preferred location where you want to create the test application, run below command and one click your application will be created.

```
flutter create test_app
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3r6v8m1764cbryfeqopa.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qo3y8o48hx4jz78u4qc2.png)

To run our test_app in emulator we have to launch the available emulator first,

```
flutter emulators --launch Nexus_5_API_30
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5c9gil90x8sv1xy35504.png)


Now it's time to run our test_app, go inside your test_app directory and hit below command

```
flutter run
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bwssf7yjthcb8p7xhioy.png)

##Visual Studio Code Setup

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0o1yot33evla2vobw2fy.png)

Download latest [Visual Studio Code](https://code.visualstudio.com/docs/?dv=win).

Opening our test_app in VSCode,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/16nlmd99hwgo38clt15g.png)

Installing required extensions is always helpful in writing code
needful extensions from marketplace are flutter and dart.

Installing flutter extension automatically installs dart extension too.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xhjyd8pptmt6bgpdxia2.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2yapsqi3xt1hj4lp2x65.png)

After installing extensions, code is highlighted, the auto code completion and many more feature come up.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14uilyut0q6g1qdrgrdu.png)

To run our test_app in VSCode, click on Run -> Start Debugging

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/erozctcis2q98q79h30k.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d7z9fwvmg7mwmh3gq7da.png)

- Now it's time to Flirting with Flutter😁

One of the most powerful feature of the flutter is Hot Reload.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w97kcnqn9s9qbtqb48r7.png)

Whenever we do changes to our code it will reflect in less than a sec, all thanks to Hot Reload.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xa4ccsim2exur4sr35kf.png)

##Here we come to the end,
We successfully set up the complete flutter mobile application development environment on Windows.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v1qxxq18t3yb1sohtpl6.gif)

🔗 Way to [My LinkedIn Profile](https://www.linkedin.com/in/hrshmistry/)

{% github hrshmistry/Flirting-with-Flutter %}

{% user hrshmistry %}