Google’s Flutter in 10 Questions & Answers

For the past couple of months, I’ve had chance to research and practice what is capable of. I’ve read many articles about it, as well as got my hands dirty and built couple of small apps using Flutter. In this article, I want to give you a glimpse of what Flutter is with a list of questions & answers, hoping that you already have at least some of these questions in your mind, and I can answer them. Flutter 1. What is Flutter? Flutter is a cross-platform mobile app development framework which, as Google defines it, “allows you to ”. First alpha version was released on May 2017; and after 1.5 years, Flutter got its first stable 1.0 release on December 4th, 2018. open-source build beautiful native apps on iOS and Android from a single codebase In addition to support for Android and iOS platforms, Flutter will be the main framework for developing applications for Google’s upcoming operating system, . It is currently under development and will possibly and gradually replace Android. Fuchsia 2. What is Dart? And why? is the object-oriented, garbage-collected programming language that you use to develop Flutter apps. It was also created by Google, but is open-source, so it has community inside and outside Google. Dart Other than its Google origins, Dart was chosen as the language of Flutter for the following reason: It’s one of very few languages that can be compiled both AOT (ahead-of-time_)_ and JIT (just-in-time). is used during app development process since it enables hot reloads (about which I will talk more in next questions) and fast development cycles by compiling code at runtime on the fly. JIT compilation is used when you are done with development and ready for release. Code is then compiled AOT to native code, enabling fast startup and performant execution of the app. AOT compilation Personally, what I’ve experienced about Dart is that it takes only couple of days to get used to it if you are a developer who is already familiar with Java or similar languages. So, if you are an Android developer for instance, the learning curve for this language should be very low for you. With its clean but flexible syntax, Dart can be identified as a language that includes only the most wanted features of any high level programming language exists. 3. How is Flutter native? Interaction of a Flutter app with the platform — Image credit Flutter uses a graphics engine called to perform all UI rendering on the application side. It means that it doesn’t depend on OEM widgets provided by the platform. It just needs platform’s canvas to draw its own renderings. This ensures predictability and developer’s full control over the widgets and layout. Skia Flutter’s internal widget tree — Image credit In addition to that, Flutter keeps its structure as a tree of widgets. By the way, , which enables you to build your app in the structure of widgets inside widgets. This internal tree stucture allows Skia to render only the widgets that need to be updated, and retrieve unchanged or even moved widgets from cache. almost everything in Flutter is a widget 4. What is different from React Native? Interaction of a React Native app with the platform — Image credit React Native utilizes a JavaScript bridge to convert its widgets to OEM widgets. And since it does this conversion (compare & update cycle) constantly, it creates a bottleneck and causes a drop in performance as a result. While still using the advantages of reactive views, on the contrary, Flutter does not use such bridge to convert its own widgets to OEM widgets as shown in the answer of previous question. Besides fast & smooth UI performance and predictability, as a further advantage of this, what you see on an Android KitKat device will be the same as what you get on Android Pie. This compatibility is obvious because Flutter doesn’t use OEM widgets and isn’t affected by UI/UX changes between different Android version. 5. No layout preview… is this a problem? Flutter’s hot reload — Image credit Not at all!.. Flutter has a feature called which enables you to hot-swap code changes while app is running. It takes subsecond to see the effects of your changes on screen. It’s definitely fast, but also smart since it preserves app’s runtime state between hot reloads. As a result, you get something better and more useful than layout previews. “hot reload” 6. What are Flutter widgets? Widget tree of a simple Flutter app — Image credit A Flutter app is considered as a . In the widget tree given above, every node you see is a widget. Even to center a widget on screen, you wrap your widget with , which is also a widget itself. So, you build your entire UI by composing smaller widgets to create more complex widgets, even pages, and even hierarchy of pages. This is called principle in object-oriented programming. On the contrary, in Android development for instance, you create your custom views by extending a View type of class. tree of widgets Center “composition over inheritance” There are two types of widgets in Flutter: — immutable, meaning that its properties cannot change and should be final. StatelessWidget — maintains state that might change during lifetime of the widget. To change the state of a StatefulWidget, should be called. Widget is then redrawn. StatefulWidget setState() 7. How various are the widgets supported for both platforms? The provided by Flutter is extensive, especially for . Based on my hands-on experince, using complex components such as drawers, bottom navigation bars, or tab bars is much easier in Flutter compared to Android development. While you are wandering around the widgets of Flutter, you can encounter very interesting ones such as . Yes, even this comes as a ready-to-use UI component with Flutter. widget set Material components UserAccountsDrawerHeader For , I can’t say the same extensiveness applies to them. There are enough of them to cover most of the iOS widgets, but not as detailed as Material components. It’s actually not surprising when you consider that Flutter is a Google product. However, I cannot say that this is a serious issue because the widget set is so customizable that you can get whatever look you want by playing with parameters of widgets and placing almost any one of them inside any other. Cupertino (iOS-style) widgets 8. Are there any Flutter apps on app stores? According to latest numbers that were shared on December 2018 during the Flutter Live event, there are more than on Google Play Store with more than . 3,000 Flutter apps 200m users The following video is about that used Flutter to implement some of pages that particularly require high performance in UI: Alibaba’s 50m+ user Xianyu app https://medium.com/media/d91a1c4ce2ae97bbd1bcebe0c66abe30/href If you are looking for a more complete application of Flutter, check out the following video which is about the Android and iOS apps (developed using Flutter) of the Broadway musical, : Hamilton https://medium.com/media/1097dda1eac53b0c728032e04ca5bfc8/href 9. So… why flutter? I, personally, see a lot value in gaining experince in Flutter. It will definitely worth it at some point, especially when Fuchsia starts to emerge. I don’t think it will turn into a some kind of garbage framework that Google would cast aside. However, let’s be more objective and list all points which make Flutter worth consideration as you next mobile app development framework: — designed to solve common needs of today’s app development world and to be customizable Modern API — leads to predictability in UI, meaning same UI shared by all versions of Android & iOS Performs its own rendering (using Skia) and uses its own widgets — outperforms any other cross-platform framework UIs running at 60 fps — fast & smooth app startup and execution Compiles AOT to native code across Android and iOS in high percentages (most of the time higher than 90%) Code reuse for a project that is built in ~2 min for Android Full compilation of a Flutter app takes 25 sec thanks to hot reload feature Incremental compilation takes subsecond — one team that works on a single codebase instead of separate teams for Android and iOS 2x resource bandwidth and Open source backed by Google 10. Is Flutter limited to mobile world only? No, it is not!.. Althought it’s not an officially supported Google product, you can build desktop apps using Flutter. To see how to achieve that, you can take a glance at the following GitHub repo: Desktop Embedding for Flutter Image credit Furthermore, during the Flutter Live event last December (4th, 2018), it was announced that Flutter will have an officially supported version or a complementary framework for web development, which is called . “Hummingbird” If you are puzzled about how all these different environment supports are possible, the simple answer is that Flutter is not much dependant on the platform’s resources and what the platform is capable of. It just needs a canvas provided by the platform and does all UI creation and rendering using its own capabilities. That’s what makes Flutter so powerful and portable. That’s all for this article… I hope I could build up an initial picture of what Flutter is and what it is capable of. If you are already a mobile app developer or want to get into this area but looking for a cross-platform solution, I strongly suggest you to get your hands dirty and start building small applications to try Flutter on your own. You definitely won’t regret it. Resources: Flutter Official Website , article by Wm Leler Why Flutter Uses Dart , article by Wm Leler What’s Revolutionary about Flutter , article by Paulina Szklarska Flutter — 5 reasons why you may love it , article by Harshit Dwivedi What the F**tter!? Understanding Flutter as an Android Developer , article by Matthew Smith Why we chose Flutter and how it’s changed our company for the better , article by Wm Leler Pitching Flutter to your company or client , presentation by Tim Messerschmidt The Magic of Flutter , video by Google Developers Announcing Flutter 1.0 (Flutter Live, Keynote Part 1)