How to Get Started With Flutter And Build Your First App?

What Is Flutter

First up, you might be wondering what is flutter? Flutter is a very powerful open-source UI software development kit which is developed by Google. It is used to develop applications for Android, iOS and even web apps with only minimal code. You can literally design whole UI elements, even the positions of buttons and their shape and colour, just using Dart code. Sounds interesting right? Now you might ask what is Dart. Dart is an OOP based programming language also made by Google, used to build apps and the language is similar to C++ and Java syntax, so it’s easy to learn and powerful to implement in the projects. 

People started moving to flutter because of its flexibility and ease of usage. The same piece of code can be used in android, iOS and the website simultaneously by simply pressing ctrl + f5 in visual studio code. Now, enough reading about flutter, let’s see how to set it up first.

How To Setup Flutter?

All the docs and downloads are available on the official website. You can build android and web apps in any desktop operating system like Windows, macOS, Linux and even Chrome OS. But there is a catch for iOS development. You will need macOS just to develop iOS apps because Apple Xcode IDE is only compatible with Mac devices. However, you can build iOS apps using a macOS emulator (which is too unreliable and does not support 3d Metal acceleration) or even use Hackintosh (needs dual-booting and unreliable for AMD CPUs).

 

  1. Setting up Visual Studio Code
  • First things first, download and install Visual studio code (best for beginners). You can download it on the official page by clicking here. While installing, make sure you marked extra tickers like adding it to folder context menus which is a useful feature to quickly open the folder in VSCode. 
  • Now you will need to install flutter and dart extension in VSCode by clicking on respective hyperlinks. 
  • Optional tips: turn on “Auto Save” in VSCode from “File” menu and install useful extensions like Tabnine for autocompletion assistance and Live Share extension to collab with friends while coding. 

Now you have done setting up IDE, let’s install flutter development tools. 

 

  1. Installing flutter

2.0. Prerequisite

 

2.1. For Windows PC

There are 2 ways of installing flutter in windows machine. The best way is by cloning from the git repository. The alternate way will be downloading and extracting zip and setting it up. Assuming that all prerequisite things got fulfilled, here is the git way:

  • Create a folder named “src” in C drive
  • Open Powershell as administrator and enter the following commands: 

Meanwhile, while you run the above code, you have to add flutter to the environment variable. In windows search, type “environment” and choose “Edit the system environment variable”. Now, open up “Edit environment variable” and in system variables, double-click on PATH and add the following address to the path:

C:\src\flutter\bin

Now save and close it. 

Now flutter is set up successfully and you are ready to code. Do not worry if it shows a few errors or warnings while running flutter doctor. It is easier to install by downloading as zip and extracting to the folder the same way git does, but you might face problems while performing updates or switching to the beta channel. 

2.2. For Mac users

Similar to windows, mac users can also install flutter. Assuming that all prerequisite things got fulfilled, you have to follow these commands in the terminal window:

Note: this guide is meant for beginners. For more details, visit the official flutter page

Now you finally got flutter set it up, you obviously want to run it right? 

 

  1. Running flutter app

Control down your goosebumps and follow the instructions 🌚 

  • Open up VSCode and open any working directory to prepare the first app
  • Reveal up Command Palette from View > Command Palette
  • Type “flutter” and select Flutter: New Application Project. Then follow the wizard. 
  • Now navigate to main.dart in projectname/lib folder
  • Select a device or emulator to run the app on from the status bar. You can select any device like android, iPhone or Microsoft Edge. 
  • Goto Run > Start debugging and run your first application. 

The first run may take time, it will again download files. You will need lots of patience. If it is successful then congrats, you did it! If you got any problems or want to install them in other operating systems then browse through official docs from the official site

What’s next?

Now that you ran the code blindly, still, you do not understand 90% of what the hell you did (especially PowerShell or terminal part). There are lots of Udemy and Coursera courses on flutter. If you can’t afford them, you actually know how to get pirated content, you are a lot smarter than me. Thanks for reading and holding up with the patience. Have a nice coding day 😊