What is Flutter and Why everyone is talking about Flutter App Development?

Getting Started With Flutter:

You might have heard the word “Flutter”. If not, at least, you have read it by now. So what is Flutter? And why is everyone talking about Flutter App Development? Don’t worry If you haven’t heard anyone talking about it yet. I talk a lot about it, so read on as I explain how good this framework is for cross-platform mobile app development. As we all know Google doesn’t want to be left out of any trend and leave its foot marks in that. So in current times, Cross-Platform Technologies are at their peak, so Google thought of introducing its own. If you are unaware of Cross-Platform Technology you can read it from here. If you are not in the mood to go on another page or read the whole thing I’ll tell you concisely.

“The SDKs or frameworks that allow building a single application for both Android and iOS (and sometimes windows, if you care for it and in coming times may be android tv and other devices might also be supported but not right now) with a single codebase ( wait no there will be times where you might have to do some work separately but that won’t be a lot, hopefully!)”

Reader: Ok, but dude you were here to talk about Flutter.

Me: Oh!! Yeah about Flutter… What I just talked above, Flutter is one of those SDKs.

Flutter basically is a Cross-Platform Mobile App Development SDK. It allows you to build Native mobile apps for both Android and iOS. According to Google now it also gives support for Web and Desktop as well.

Reader: Ok how is it different from the existing ones, why should I pick Flutter.

Me: Easy dude, one at a time. That’s some heavy duty stuff that I’ll talk about in a later blog (very soon). If you are in a hurry you can google it there’s a lot of stuff out there. Briefly, I’ll mention a few points to cover what’s different about it:

• It gives Stateful Hot Reload which increases development velocity.
• It uses GPU for rendering purpose and doesn’t consume CPU which makes it faster.
• It compiles into ARM binary code (which makes them purely Native).
• It draws each and everything on the Platform Canvas and owns every single pixel, which gives complete freedom, how you want the look and feel of your application. No dependencies on native widgets or pre-build widgets.
• There is no JS bridge and the communication is direct with the platform which makes it faster in this aspect as well.

Above are some of the few reasons out of many others, explaining why you should choose flutter.

Reader: For the sake of Flutter! Can you now, please talk about how I can start with flutter.

Me: Dude why are you in a hurry, relax I’m doing that. The first thing is setting up your environment:

Windows:

There are 2 simple steps:

1. Download the Flutter SDK for Windows from here and extract it in the desired location.
2. Update your PATH environment variable, the following are the steps to do that:
   1. From the Start search bar, type ‘env’ and select Edit environment variables for your account.
      
   2. Under User variables check if there is an entry called Path:
      1. If the entry does exist, append the full path to flutter\bin using “;” as a separator from existing values.
      2. If the entry does not exist, create a new user variable named Path with the full path to flutter\bin as its value.

   

To verify that things are working run the following command:

C:\flutter doctor

It will show you what it needs if it has or doesn’t. I am assuming that you have the Android Studio setup on your system and the Android Emulator if not there is a detailed explanation of that here.

Mac:

There are a few steps:

1. Download the Flutter SDK for macOS from here and extract it to the desired location.
2. Update your PATH variable, which will need the following steps:
   1. Open (or create) $HOME/.bash_profile. The file path and filename might be different on your machine.
   2. Add the following line and change [PATH_TO_FLUTTER_SDK_DIRECTORY] to be the path where you extracted Flutter’s SDK:
      1. export PATH=“$PATH:[PATH_TO_FLUTTER_SDK_DIRECTORY]/flutter/bin”

      

   3. Run source $HOME/.bash_profile to refresh the current window.
   4. Verify that the flutter/bin directory is now in your PATH by running:
      1. $echo $PATH

      

Me: Looks like I have ran the source $HOME/.bash_profile multiple times, don’t worry it won’t be a problem.

Reader: Yeah right, keep making things complex for us.

To verify that things are working run the following command:

$ flutter doctor

It will show you what it needs if it has or doesn’t. I am assuming that you have the Xcode and Android Studio setup on your system and their respective emulators, if not there is a detailed explanation of how to do that, here.

Me: Don’t follow the whole procedure in the above link, at least not when you are reading my blog… Just follow the tools setup part. Or in case my content is not helpful, then you can.

Consider everything is set up perfectly and the “flutter doctor” command doesn’t give any error now lets jump in Creating our first Flutter App. Run the following command:

flutter create [project_name]

This will create your first flutter project. Containing the demo app that flutter provides you to play around with. Move to the root directory of your project and run the following command:

flutter run

This will run the project on the available options it has, either a connected device or an emulator.

We will talk in detail on what’s in the code in a later blog. For more details, you can follow the tutorial on flutter.dev available here. For more specifics click here. Peace!