M.A.D with Flutter

Mobile App Development made easy with Flutter — Season 1

So, where do we start to get to know more about Flutter and how many levels are they to get better understanding as how it was different from other App development methodologies and tech-stack.

Million Dollar Question…?

What is Flutter….!

Many people used to call it as another “Cross-platform development” or “UI toolkit” e.t.c….e.t.c….e.t.c… So, what’s really Flutter is all about?

“Flutter is an open-source Mobile Application Development Framework created by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for “Google Fuchsia”.

How many levels are they? And where do we start?

To know about a person knowledge in a specific skill set, we used to ask him to rate himself on a scale of 1–10. In a similar way, if we have to learn any technology, we have to divide the learning methodology using the same way to test the knowledge from 1–10. So, we have to divide the Flutter learning on a scale of 0–9? Interesting right, check the below levels and the things to learn.

So, before learning the level 0 concept and diving into the tech-stack by surfing Google, following multiple blogposts, taking opinion from different people or trying hard on computer to know yourself will cause pain and waste of time.

Introduction to Flutter?

Scroll to top to know about it

Platforms available to start developing?

Types of IDEs to use?

SDK Setup and Installations?

1. Download Flutter SDK file which suites your Operating system from the below link
   https://flutter.dev/docs/get-started/install
2. Install latest version of Android studio, because I’m using it and good to handle the options in my opinion.
   https://developer.android.com/studio
3. After installing the Android studio follow the complete below steps to setup the Editor. I am going to explain the setup process for both Windows and MacOS.

Let’s start the installation process

Setup for MacOS

2. Once you successfully install the plugins, it will ask you to restart the IDE. Do it now, don’t hesitate to restart it. After successful installation of plugins you are about to see the option “Start a new Flutter project”

3. Setup the Flutter SDK in your OS. Once you download the file from https://flutter.dev/docs/get-started/install/macos
Keep the file location in downloads or move it to some better location, but once you fix the location of this SDK. Make sure that you should not move your file after completion of the PATH setup.

4. Open finder -> Go to Macintosh HD -> Users -> username(Home icon folder) -> click cmd+shift+. It will reveal hidden files, then check if is there any file name as .bash_profile If you can’t find then create a text file with .bash_profile, open the file and paste the below line of code by replacing the existing path with your flutter SDK file path

export PATH=$PATH:/Users/hemandroid/Downloads/flutter/bin:$PATH

Replace the existing path from the above line between $PATH: to :$PATH and save the file and close it.

5. Open terminal and enter the given commands below
echo $PATH -> This will print you the existing PATH locations which was registered in your OS. You will about to see the flutter/bin path in the results.

6. Once it was completed, just type flutter doctor It will start to scan and print you the status of successfully installed flutter SDK

Setup for Windows

1. Steps to install plugins in Android studio is all same for every OS.
2. To set up the PATH in Windows, Open Environmental Variables under User variables -> Select the existing PATH by clicking Edit and paste the flutter SDK folder PATH copied from it’s location. Save it and restart the computer to ensure it’s installation perfectly. Then try to run the flutter doctor command.
3. Congrats…! You successfully installed Flutter SDK.

Deploy the Apps on iOS devices

1. To install homebrew, click below url
   https://brew.sh/
2. Paste the below command in Terminal to start installing the homebrew.
   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
3. After installation complete follow from step 2 from the above image.
4. After completion of the above commands, run flutter doctor in terminal again. Don’t forgot to install Xcode before performing all these steps.

It looks a very simple process right?

So, finally why this Flutter is great, cool and interesting among other development platforms!

“Flutter make changes at ’60 fps’ to review your App design and functionality changes with the help of HOT Reload feature.”

So, this is the reaction of React Native developers, after flutter came into Action

This is what developer’s feel after launching their first flutter app…!

Finally…. Thank you for watching this blogpost and please be wait for the next series of posts to learn more about the remaining levels to get hands-on experience by diving into flutter….!

Please appreciate my efforts with your claps, if you like it and kindly do share this post with your friends. It may help someone to get started to learn Flutter….!

Originally published at https://medium.com on April 27, 2019.