DEV Community

loading...
Cover image for Setting Up Flutter Mob App Development Environment On Windows 2021

Setting Up Flutter Mob App Development Environment On Windows 2021

hrshmistry profile image Harsh Mistry Updated on ・6 min read

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

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:

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications 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.

Flutter System Architecture:

Alt Text

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.

Files to be downloaded,

Get the Flutter SDK

Alt Text

Download Latest Flutter SDK.

The reason we ask that you setup Flutter before Dart 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

Alt Text

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Android Studio Setup

Alt Text

Download Latest Android 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
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

  • 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

Alt Text

Alt Text

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

Alt Text

  • 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

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

Alt Text

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

Alt Text

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

Click on Create Virtual Device,

Alt Text

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

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

Alt Text

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

Alt Text

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

Alt Text

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

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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

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

flutter emulators --launch Nexus_5_API_30
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

flutter run
Enter fullscreen mode Exit fullscreen mode

Alt Text

Visual Studio Code Setup

Alt Text

Download latest Visual Studio Code.

Opening our test_app in VSCode,

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

Alt Text

  • Now it's time to Flirting with Flutter😁

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

Alt Text

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

Alt Text

Here we come to the end,

We successfully set up the complete flutter mobile application development environment on Windows.

Alt Text

🔗 Way to My LinkedIn Profile

GitHub logo hrshmistry / Flirting-with-Flutter

Change branches and explore different concepts in flutter by doing projects!

Setting Up Flutter Mob App Development Environment On Windows 2020

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

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:

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

For the complete post click here.

hrshmistry image

Discussion (0)

pic
Editor guide