Flutter Overflow : Part - 0

Imagine yourself to be the CEO of a tech startup. Now Obviously your goal would be to escalate the profit and growth while decreasing the expenses. You want a mobile application for android users,so you asked an expert about it and he would say “You would need an Android Developer. They should know the Android OS, Gradle, XML, Android Studio, and Java or Kotlin” ,and you did so. Application hit the market with a great success and sales surged markedly.

You got your attention attracted towards some feedback “App is good, but it would be better if we can have it in App store too”, you went to the expert and he said “You would need an iOS Developer. They should know iOS, Swift or Objective-C, Xcode, macOS, and CocoaPods for development.” but everything comes with a price, you hired an iOS Developer too. Sales increased and so your expenses. Now what if you require a Web Developer. I know it wouldn’t be easy and you will start thinking “Isn’t there a single codebase to make all three things work.?One codebase to maintain, make improvements and upgrades!“

Let me introduce you to the Jack of all : Flutter

---

Introduction

Flutter is a cross-platform application development framework developed by Google that allows us to create beautiful apps that run on iOS, Android, the Web, and desktop. It uses the Dart programming language for its development needs. Officially released in December of 2018, it took barely a year to gain more popularity than React Native on both GitHub and Stack Overflow.

It is:-

• Open source
• Maintained by Google and many non-Google developers around the world
• Fast

---

Why Flutter?

First, let’s talk about what are some alternatives to Flutter

• Ionic-Ionic is one of the hybrid app development frameworks that allow you to develop highly collaborative cross-platform apps that can be used on any operating system. It is basically a WebView based framework, this means app is basically a website but they lack in performance.

  The following diagram shows how a WebView-based framework works:

  

  Create by Priyam

The system uses a bridge to make the switch between MyApp to the native system. This process will be too slow, depending on the features you need.

• React Native-Facebook has built the React Native framework as open-source JavaScript programming language along with the support of React libraries. It could be considered as one of the best of the cross-platform frameworks, but it heavily relies on OEM components.

  The following diagram shows how a React Native framework works:

React Native not only uses bridge for camera, sensors, audio services but to build widgets too.

This is perilous in terms of performance; for example, a component may be built hundreds of times during an animation, but due to the extended concept of the bridge, this component may slow down significantly.

But what about flutter’s architecture?

As backend Flutter uses Dart programming language, which is developed by Google & have many advanced features. Dart uses two major ways for program compilation, the Just-In-Time and the Ahead-of-Time method. Flutter performs better in comparison to others because of the application of AOT compilers. It also eliminate the concept of “Bridge” and does not use OEM component.

The following diagram shows how a flutter framework works:

I hope I’ve subsumed the idea of “Why Flutter?” into your mind, and you are ready to work on flutter.

---

Easy-as-pie, is it?

Flutter is a framework which is built in Dart language ,and has syntax more or less similar to C programming language. Dart seems to have a lighter syntax than JavaScript which is really aesthetic and hence could be learned in no time.

UI logic in Dart and Flutter is excellent from a code readability standpoint. It has excellent documentation, tutorials, communities and overall help right on it’s website.And clearly this makes all the difference for someone who wants to learn new programming language, toolkit or some framework. Someone who has been programming for quite a long time could get frustrated by going through poor documentation and lack thereof.

I come from Machine Learning background and it took me not more than 5-6 days to get inundated into magical pool of this framework and make an app having incorporated some functionalities of firebase, even though I had no prior knowledge in App Development.

So yes,Flutter is easy-as-pie!

---

Prerequisite

• If you have worked in dart language earlier it would an upper hand, but don’t worry if you haven’t, you can still learn it while going through flutter.
• It would be good if you have some prior knowledge in Object Oriented Programming concepts, this would make you to learn about the framework effortlessly.
• Determination to flutter everyday for at least 30-45 min.

---

Installing Flutter

You can go through the guide on installing flutter SDK, they have provided it in so much detail that you wouldn’t need to hop around anywhere else on internet. You can select for which platform you want to install flutter and it would show you all the details regarding it. You would be needing Android Studio in order to get Android SDK. Along with this , you would also be needing an IDE ,personally I use VS Code since it is light and fast but you can even use Android Studio for it, there isn’t much difference among both of them while working on flutter.

After installing Flutter SDK into your system and Android Studio with its flutter and dart plugins, open your terminal where you flutter SDK is residing and run

  :-$ flutter doctor

and it would show something like this

  Doctor summary (to see all details, run flutter doctor -v):
  [✓] Flutter (Channel beta, 1.18.0-11.1.pre, on Linux, locale en_IN)
   
  [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
  [✓] Android Studio (version 3.5)
  [✓] VS Code (version 1.45.1)
  [!] Connected device
      ! No devices available
  
  ! Doctor found issues in 1 category.
  

The error you got is in Connected devices, since you were not having any emulator running in the background. Emulator can be accessed easily from AVD Manager in Android Studio.

---

What is AVD manager?

An Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android phone, tablet, Wear OS, Android TV, or Automotive OS device that you want to simulate in the Android Emulator. The AVD Manager is an interface you can launch from Android Studio that helps you create and manage AVDs.

-Android Developers

Go through the links above and it would help you to learn more about that particular component of App Development.

This is going to be indefinitely long series on flutter, where we will learn plenty of things and would build some apps along with digging into the Widgets and their properties

Widgets,what are they?

Wait for Flutter Overflow : Part - 1

---

Reviews

If You find it interesting!! we would really like to hear from you.

Ping us at Instagram/@the.blur.code

If you want articles on Any topics dm us on insta.

Thanks for reading!! Happy Coding