M.A.D with Flutter

Mobile App Development made easy with Flutter — Season 1

App Developers excitement…..!

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…?

Let’s start from basic introduction

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.

More levels will coming up in the next blogpost….

Are you ready to work the flutter without knowing anything…!

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.

Trying very Hard to crack it on how to do it…. :D

This will be the result without having any idea on how to do it and where to start….

Introduction to Flutter?

Scroll to top to know about it

Platforms available to start developing?

3 Golden options to get started….!

Types of IDEs to use?

3 Golden Eggs to start coding

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

Let’s begin the process….!

Setup for MacOS

1. Open preferences and search for plugins -> Inside plugins click browse repositories -> search for flutter and dart plugins under Languages section

You can see install option, as I already installed it. It won’t show again

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”

Congratulations initial phase completed.

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

Successfully setup 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

Follow all the above steps to deploy build to 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?

Obviously, it’s that simple to do it…..lol

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

Way to go Flutter…..lol

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

Hot reload reaction to the App changes…!

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….!

Thank you so much friends…… :)