Let’s say Hello to Flutter, a Cross Platform Application Development Framework.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It uses Dart programming language to make developers build applications faster and efficient.

Widget

Widget is the basic component in Flutter framework. Every piece of UI you build using Flutter is a widget, even your application itself is also a Widget. Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets.

Flutter Installation ( Windows )

Before we code our first Flutter App, let’s make flutter up and running on our machine.

• Download flutter SDK from this link. It’s the same zip from Flutter official docs, so no issues. Go ahead and download it.
• After the zip file is downloaded, extract the zip file into C:/src/.
• After the file is extracted, click on Windows and type in Environment Variables.

• You should see the above image, click on Environment Variables, and edit the path variable, then add C:/src/flutter/bin to your path.
• Now open your command prompt and type in flutter doctor.

• If you are not able to see this check you have properly set the path in your Environment Variables.
• If you are able to see this, as it says Android SDK is missing, we need to download it. It’s better to have a complete package in the form of Android Studio.
• Go download Android Studio from this page and follow the instructions to install Android Studio on your machine.

• Take this warning into consideration, if you are facing any issues.
• If you have a PC with great specs, Android Studio runs well, else I prefer VS Code over it.

VS Code Installation

• Visit this page to download VS Code.
• After downloading VS Code, we need to make it help in developing Flutter applications.
• Let’s add Flutter extension to VS Code.

• This enables our IDE to help in developing Flutter applications by debugging and code enhancement and increase our development pace.

• For the last time, let’s check everything by running flutter doctor in a new command prompt.

• You might see Android licenses not accepted, then run flutter doctor –android-licenses and press ‘y’ for all licenses.

• If you see Flutter, Android SDK and VS Code ticked…, Yeah we are ready to go.

Let’s run our first Flutter App

Everything starts with a main function in Dart. main() is the entry point of any program written in Dart. Likewise, for every Flutter Application main.dart is the entry point.

As a first step, we need to create a new flutter project. To do that open your command prompt and type in the following command.

flutter create hello_flutter

Alternately, you can also press Ctrl+Shift+P in VS Code and Search for Flutter> Create Project and click on it.

Open your code editor preferably VS Code in the root of flutter project, i.e. in the project directory. You can see some good amount of well documented code in the main.dart file of your project.

Connect your mobile to PC through USB and enable USB Debugging in Developer Options in your android device.

• Now click on F5 in VS Code, you could see flutter starting in Debug Mode on your mobile.
• Alternately, you can open your command prompt and type flutter run in the root of your flutter project.

Now you can see this in your mobile as your first Flutter app..🙌👏🎉

Yes, we did this…!!!

We have covered Windows installation in this article, if you want to install in any other OS, visit the flutter official docs.

In this article, we have gone through the installation of Flutter and seen how to run default application in your mobile. Let’s see what the code does in our next blog, and develop our own To-Do application. You can visit our github repo of Application Development for more tech. Until then, cheers..✌✌.