The one framework for all your app development needs— FLUTTER!
This article is about Flutter, how can one make apps with it, how it works internally, and how it differs from other cross-platform app development frameworks.
As of now, 76.8% of the total populace is digitalized. With the quick reception of smartphones and tablets, organizations are looked at with an ever-increasing number of chances each day that will profoundly change how their administration or item is conveyed and gotten to. There are more mobile devices than the aggregate number of PCs and TV units joined, which means your business needs a mobile presence to remain associated with its clients. In today's date, the mobile application is a very aggressive market, there are hundreds of platforms to choose from when designing applications. There are several platforms that currently dominate over other platforms. Google's Android platform and Apple's iOS platform are very popular these days. In a recent study, it is seen that around 72.26% of the total smartphone users use the Android platform, 27.03% use the iOS platform and the rest 0.7% use the other platforms available in the market. From this data, you may think that having an Android app for your business is enough as it will cover 70% of the smartphone users, but you will miss out on the rich and wealthy 27% of users who can afford Apple's smartphones and use the iOS platform. The android platform requires apps to be written in JAVA (or Kotlin), and the iOS platform requires Swift. This implies that you'll require two different teams who will work on the Android and iOS apps. This solution may seem efficient but it is not budget-friendly, as hiring a mobile app engineer is not cheap. Hence what's the solution then? Well, here comes Google's Flutter!
What is Flutter?
Flutter is a "tool" that allows you to build native cross-platform (iOS and Android) apps with one programming language and codebase. An important point to be noted here that using flutter we are NOT building a web app that runs in the browser, or an app that gets wrapped by native apps, we build real apps, two different kinds of apps in the end for iOS and Android, which you then distribute through the different app stores, i.e., the Apple App Store and the Google Play store. Now you get there by using one programming language so that you don't have to learn two different programming languages, one for iOS, one for Android, instead, you have one programming language called Dart and also one codebase. That implies you work in one project, you write your code once and you still get two different apps as a result. Cool isn't it?
If we have a closer look at flutter though, it is actually a combination of two things— an SDK (Software Development Kit), and a framework, a widget library for that one programming language (Dart) which you can use to build beautiful Flutter apps! The widget library gives you a vast collection of reusable UI building blocks, the so-called widgets like buttons, tabs, text inputs, dropdowns, etc all out of the box! You can style them customize them and then you build user interfaces with these tools. In addition, you get a couple of utility functions and generally, some packages that help you build what your users see and what your users interact with and then that code which you built with the help of that framework, that is then compiled native machine code with the help of the SDK.
Flutter uses a programming language called Dart. Dart is a programming language that is focused on building front-end user interfaces, front-end apps. It's not limited to building mobile apps, that's just what Flutter uses it for, but Dart is independent of Flutter and you can also build web apps with it. Dart is developed by Google, just like flutter, and these are actually two independent teams in Google but of course, they're working together to improve each other. Dart is an object-oriented and strongly typed language and its syntax is a bit like a mixture of Javascript, Java, C#.
Now besides this rough idea of how we build our apps in Flutter, it's also important to understand that Flutter apps do actually embrace platform differences, whilst being based on one codebase, so we work in one project but we will still have the ability to create different user interfaces at some points or in some parts of our app if we need it for the different platforms because Android and iOS are not exactly the same. They're not just for different phones, they do have some small differences and sometimes, that doesn't matter to you but if it does, Flutter gives you the tools to find out on which platform you're running, so that if you're on Android, you can execute code A and if you're on iOS, you can execute code B, so Flutter gives you the full flexibility there. Flutter has got it all!
Flutter Application Architecture
So now that we know what Flutter is or that we at least have a rough idea about that, let's have a look at the architecture of a Flutter application. Before we proceed, here is an important thing to note: Flutter has that idea of building user interfaces as code, that's called UI as Code, and unlike android app development in Android Studio with JAVA, there will be no visual drag and drop editor for adding widgets (however there are some third-party IDEs that still offer that, however, things become compilated when you use such services), instead we have to write everything in code. This may sound intimidating at first but you will see the Flutter has a really nice approach for that, which makes creating interfaces with this UI as Code approach a breeze!
In Flutter, everything's a widget, that's important to understand. If you had an app that looks like this, then this is a bunch of widgets. For example here, the app bar at the top with the text "iCrew Blogs" in there, the body of the app that's one huge widget with a lot of smaller widgets like buttons and text in there, all those elements on the screen are just widgets!
` 
The whole page is a widget and even the whole app is wrapped in one main widget and a widget is really just a code snippet, an instruction you placed in your code. It'll be as simple as that and your entire app is therefore built as a widget tree. You have this root widget which is your app itself, then you might have different screens there, on the different screens, you have different sections and in there you might have text inputs, text outputs, buttons, tabs, dropdowns, and a widget might hold other widgets, for example, your tabs widget might hold individual tab widgets. So that is how the architecture of a flutter application looks. Cool!
How flutter turns dart code into native apps?
By now you might be thinking, how does flutter turn my dart code into native applications? Because let's say for android, native applications will require code to be written in JAVA or Kotlin, and Dart code will simply not work! Well here's the answer—
Flutter simply compile that Dart code to native code for these different platforms and that happens with the help of the Flutter SDK and as a result, we get real apps to spit out with highly optimized high-performance code that's based on our code ut that's not our code itself, instead, it's the compiled version of that code and therefore we really ship code that runs on the different platforms and that's optimized and high performant because performance is actually a huge advantage of Flutter apps, Flutter out of the box gives us high-performance applications.
Now in case, you worked before with let's say React Native which is kind of an alternative to Flutter it's important to understand that Flutter does not use platform primitives. Now, what do I mean with that? We're having our Flutter app and we're targeting iOS and Android. Now if we want to add a button then in Flutter with this UI as Code approach, we do so by adding, let's say, a RaisedButton. Now, this is just an instruction in your Flutter code which tells Flutter to render a button in that part of your widget tree. Now you could think that what happens when the code gets compiled to that native code is that this RaisedButton is translated to the native buttons which are of course part of the native development environments and that's not what happens. Instead, Flutter has its own implementations because Flutter directly controls every pixel on the screen. So Flutter does not compile your code to some native equivalence or native alternatives, instead, Flutter ships with its own engine which controls the entire screen, everything the user sees and renders every pixel on its own and that gives Flutter a lot of control and a lot of flexibility. So, in simpler terms, flutter does not directly translate anything to native code, instead, it makes its own UI, and that's what gives us a boost in performance and fewer limitations. Interesting isn't it?
Flutter vs React Native vs Ionic— who would win?
Now if you might be thinking "Hey I've already used React Native and Ionic, does flutter differ from them in any way?" Well, my answer is yes, of course, it does!
To explain these let's see how each of these works. Flutter uses Dart and the Flutter framework and Dart is a programming language developed by Google. React Native, on the other hand, uses Javascript and the React library and Ionic uses just Javascript and any or no framework at all that you want. Now the result of Flutter is that you get compiled native apps, so you get real native apps compiled for the target platforms. For React Native, that's pretty much the same but I wrote partly compiled here because the apps are compiled to native apps but there also are parts in your code, in your Javascript code which is actually not compiled but which is basically enclosed in the native app and runs as Javascript in the native app, instead of as compiled code and that's different for Flutter, there all the code is compiled and runs as native machine code therefore and for Ionic, nothing is compiled. In Ionic, you actually have a web app that is wrapped inside of a native app, so you still get a native app that you can publish to the app stores but it's just a wrapper around your web app. Now the advantage of this Ionic approach is that you can use normal web technologies and if you're a web developer, it's particularly easy to create such apps and you can use all your normal web development skills to build cross-platform apps there. A downside of this wrapped approach, of course, could be performance. Now for Flutter, it's also important to understand that we don't compile to iOS or Android UI components but that Flutter gives you an app that controls the entire screen and every pixel on it. For React Native, that's different, there you do compile to iOS and Android UI components, so the parts of the React Native app that are compiled is, in the end, the user interface and there or example if you render a button, it is compiled to the native iOS button for iOS and to the native Android button for Android, which means you have fewer customization possibilities because for example if you can't add a drop shadow to the native iOS button, you can't add it to the React Native button because that's compiled to the iOS button. For Flutter, since it controls every pixel on its own, you can style it in whichever way you want, or Flutter lets you at least because the native button restrictions don't matter to Flutter. Now for Ionic, there is no compilation to Native equivalence, instead, you have a web app, so you can style a button as you could style it in any web app, it's not compiled to a native button. Now with Flutter, you can build cross-platform apps, mobile apps, and actually even web apps and desktop apps, though that's in very early stages. For React Native, it's pretty much only about mobile apps, though there is a project, an unofficial project if you will, which allows you to use your React Native app also to get a web app as a result. For Ionic, you by default since you build a web app that's wrapped by a native app, so you also indirectly have cross-platform support here.
To a normal user, the apps may look identical, but it is up to you who will decide which framework would win. It will depend on if you already have experience with programming languages with Javascript or you already have a team who knows Javascript but not dart or a team of web developers, well then you can use React Native or Ionic Framework. But if you have options for a fresh start, you may look into flutter as well.
Conclusion
Now, to sum up, I would like to mention a few key points again. Flutter is a "tool" that allows you to build native cross-platform apps with one programming language and one codebase. Flutter consists of two things, one is Flutter SDK and the other is the widget library and framework so that you create the best app possible. A flutter app consists of a Widget tree and every UI component in flutter is just a widget. This approach makes it easier to code and analyze it. Flutter UI does not get translated to native UI, instead, Flutter has its own UI written in native code, which makes flutter performance-friendly and gives us a whole lot of options to customize UI. Flutter has a few competitors too, but all of them work in a different way. Flutter is regularly updated to bring new functionalities, and that is why developers prefer it so much these days!
