Flutter: Getting Started Guide 2023

Flutter is a Framework that is based on the Dart programming language that can be used to develop Cross-Platform apps from a single code base. Once you create an app in Flutter, you can easily deploy it on any Android, iOS, Linux, Windows, Mac, and Web operating system. It was released in 2017 by Google and it is completely open source. This tutorial will be a complete getting started guide to learning Flutter that you can follow and start your Flutter journey.

In this tutorial, we will be installing Flutter and all other software that is required to run it and also create a Hello World Application using it.

Why You Should Use Flutter for Your Projects

There can be several reasons why one should use Flutter but let’s make things short and quick by discussing only some of them that matter the most.

  • It is cross-platform so you can run your app on any platform and target any audience.
  • It is open source and fastly growing.
  • It has a huge community, so in case if you fall into an error then you can easily get help from the internet.
  • It has a concept of what reload and hot restart which makes it easy to see instant changes in your application while coding without even recompiling the complete app.
  • Development is fast as compared to other Technologies and frameworks.

Process of Installing Flutter

The first step is to install Flutter and set up a development environment. We will tell you how to install it on Windows as well as on Linux. Let’s first start with Windows installation.

Installing Flutter on Windows

  1. Go to this link and download the latest SDK file. It will be a Zip file with the naming convention of flutter_windows_version_stable.zip
  2. Once you have downloaded the given file simply right-click on it and extract it.
  3. It will have a flutter-named folder with complete source code.
  4. The next step is to place that folder in a secure location. We will prefer you to put it in the C drive.
  5. We have installed flutter but the only thing that is left is to tell our computer where flutter is located.
  6. So open the bin folder that is inside the Flutter folder and copy its path.
  7. Then go to the environment variables setting of your computer and there you will find the environment variables of the path, double click on it and paste the copied path there. It will let the Flutter folder globally accessible.
  8. Now you can simply open and run the following command to test if flutter is installed correctly or not.
flutter doctor

Output:

Flutter Doctor

You might see some errors but don’t worry those are because we haven’t set up our development environment once we set up our development environment then that errors will also be gone.

Installing Flutter on Linux

Installation of a flutter on Linux is very simple. One just needs to run a one-line simple command and it will be automatically installed.

sudo snap install flutter --classic

Alternative Way: There is also an alternative way and that is if you are using Ubuntu Linux then you can simply go to Ubuntu Store and download Flutter from there. But we will not recommend this.

Setting Up The Development Environment For Flutter

Just installing and configuring Flutter is not enough we also need to set up a complete development environment. The development environment includes a code editor, an android software development kit, and a Java development kit. Let’s install them one by one.

Android SDK

  1. You need to first download the latest version of Android Studio.
  2. Now run the downloaded file and it will install Android studio automatically.
  3. After installation, it will prompt you to download Android SDK.
  4. You have to download build tools, cmd line tools, tools, platform tools, and platforms.
  5. But before installation of these things first point out what is API version of your Android phone is. You can easily Google it.
  6. Now download these tools with a matching version of your mobile API version.

Java JDK

  1. We require Java JDK version 8. Because that is the only version that is compatible with Flutter.
  2. You need to download the required Java JDK
  3. Installation is very simple and easy you just need to open the downloaded file and keep clicking on the next button until installation starts.
  4. If you are using Linux based operating system then just run the below command and it will be automatically installed.
sudo apt-get install openjdk-8-jdk

Code Editor (VS Code)

If you are already from a programming background, then you must be familiar with VS Code. It is the best Code editing, debugging, and compiling software available freely. We will be using VS Code to write our Flutter code.

Go to VS Code official website and download the latest version of VS Code and install it. After installation open it and you will see an extensions panel on the left side. Open that panel and search for Flutter. Install that Flutter extension which helps us to run and debug our code.

Hello World app using Flutter

Flutter itself provides us with a starter application that is more than a hello world app. Let’s learn how we can make that.

Open a command prompt and navigate to the location where you want your app to be created and run the following command.

flutter create myawesomeapp

It will generate a lot of code and a starter application for you.

Run the App:

You can simply use the flutter run command to run your application. If your mobile is connected to your computer or laptop then you can run your app on mobile else you can run your app in chrome browser or windows or Linux executable files.

Output:

Hello World App Output

Also Read: ExpressJS Tutorial: An introduction to ExpressJS and Hello World app.

Summary

In this post we learned about what is Flutter, and why should it is recommended to use Flutter in projects. Then we directly died into the installation process and installed it in windows as well as the Linux operating system. After this part, we installed some extra and mandatory software such as Android SDK and Java JDK so that Flutter can work properly. Then finally we created a Hello world app.

Reference

https://docs.flutter.dev/get-started/install

https://docs.flutter.dev/

Sushant Dhiman
Sushant Dhiman
Articles: 14