What is Flutter? The new React Native? Google vs Facebook
This article will explain the new hybrid framework from Google, Flutter. Start from the introduction, benefits/limitations, Widget, etc. And lastly, i will compare the Flutter & React Native and create our first Flutter app.
I have developed mobile app using React Native for almost 2 years. Then, i feel that the performance of React Native is so slow. I searched from Google and other resources that say there is the framework for hybrid mobile app development and it has many excellences than React Native, it is Flutter. So, i decided to learn about it and try to code using Dart language. Yeah, there are many differences of React Native and Flutter, especially for the performance issues and component rendering. But, i will explain it in the some of sub section. Here is the Table of Contents:
Introduction
Benefits and Limitations
Material Design
Widget
Flutter vs React Native
Installation
Create our First App
Introduction
What is Flutter? Flutter is open-source mobile SDK that developer can use to build native-looking for Android and iOS application from the same code base. Flutter has been around since 2015 when Google introduced it and remained in the beta stage before its official launch in December 2018. The language used to code in Flutter is Dart, developed by Google and unique for Flutter. Developers can also use platform-specific widgets to make their app have a native-developed feel to it. Developers can save a lot of time and effort while developing because the Dart language itself is simpler than Javascript. You can also say this Google Flutter is the new React Native.
When we visit Flutter official website https://flutter.dev/, they have the tagline for Flutter excellences: Design beautiful apps, productively build apps, create faster apps and target mobile, web & desktop apps.
Then, we will find the app showcase there. Flutter is newer than React Native and i think it is still very few companies are willing to use flutter to build applications, not like React Native that already many companies that used React Native to build their mobile app, like Facebook, Instagram, Skype, Tesla, Wix, etc.
Benefits
1. Free and Open Source.
We can find Flutter repository on Github. I think for the next 5 years, Flutter will have some improvements, because it is based on community and open-source, so they will grow as long as the increasing of developer that use it.
2. Amazing Widget Catalog
Flutter is using Widget as the components for rendering the app. It can be found here. They state that it is inspired from React.
Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
3. It’s Inherent Graphic Library
Flutter uses the Skia — built-in library for rendering. This makes it more platform-independent. The SDK provides a rich set of widgets, in particular, the Material and Cupertino collections for rendering native-like widgets for Android and iOS. By combining various widgets, you get the opportunity to create a complex UI. Thanks to its own library, Flutter applications look the same on different versions of operating systems. Thus it is good to solve one of the main problems of mobile development today — the great variability of mobile devices.
4. Hot Reload
One of the drawbacks of compiled languages before scripting languages is the loss of time for building a project. With frequent edits, it can take up a substantial part of the working time. The Flutter Hot Reload feature allows you to display the effect of your edits in the code immediately.
5. It Gives You Java Feels
Dart isn’t exactly like Java but it has similar features. It makes it really easy for developers to make the shift. I think Dart is like Java + React.
Limitations
1. Lack of Third-Party Libraries and Widgets
Flutter is not too old unlike its contemporaries and lacks the presence of third-party libraries. Although, it gives an amazing UI package, yet the requirement of third-party libraries for extensive development is still awaited. If React using npm for third-party libraries installation, then Flutter using pub for third-party libraries installation.
2. Code Pushing
Code push allows developers to instantly push patches to their apps without going through the usual app store release process. Bugs can be fixed without a new release, allowing a more web-like continuous development process. It’s supported by React Native, Cordova, and Ionic. Flutter doesn’t support this.
3. TVs, Watches & Cars
You can’t use Flutter to build apps for tvOS, watchOS, CarPlay, or Android Auto. There’s some limited support for Wear OS (formerly Android Wear). Flutter has to add Bitcode support to deploy to tvOS and watchOS. You’ll have to use native code or an alternative framework to target these platforms.
Material Design
Flutter is using Material Design for the component template and uniquely, Material Design is used on the iOS platform (Cupertino design language) . So, what is Material Design?
Material design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.
Material design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
Widget
Here is the simple definition of Widget (or component in React).
Widget (in Flutter) = Thing (in Real World)
Real World => Everything consists of thing(s)
Flutter vs React Native
I created the comparison table of Flutter vs React Native. Both of them come from cross-platform development and enable hot reloading. The language and package that is used is different. The good thing is Flutter has IDE tools, Android Studio, for development and it is faster for coding (just like the example of code above). For the learning curve, i think Flutter is a bit difficult than React Native, because Dart language is still new for developer and the style of code is also different. In just 2 years, the popularity of Flutter in Github is bigger than React Native.
For the performance comparison, i grab from https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433. It explains that Flutter is better from the CPU, memory and battery consumption.
From the Stackoverflow Survey 2019, there are the comparison of Programming, Language and Framework result.
Google trend has the data trend of all frameworks. I compare between Flutter and other frameworks, including React Native for the last 5 years. The trend of Flutter is always increasing every year. Who knows in the next 5 years, probably Flutter will be the king of hybrid (lol).
Installation
Before we create our first app, there are prerequisites we have to prepare for developing using Flutter:
1. Operating systems (Windows/Mac/Linux)
2. IDE tools/code editor (Android Studio, VS Code, intellIj, Emacs)
3. Android/iOS simulator or physical android/iOS device
4. Xcode for configuring iOS native (Optional)
Then, you can go to this tutorial for the installation.
Create Our First App
After we prepare and install all the prerequisites above, we can start create our first app. We will create “Weather App”. You can go to udemy for the complete tutorial, it’s free. But, i want to explain first the basic of Dart language structure of code we have to know before start coding.
1. Material App
As i explained earlier, Flutter implement Material Design and native-looking component for the app development. So, the result will be like each platform. For example: the header position of native material app in iOS in the center, while Android is in the left as well as other widgets.
2. Scaffold
Scaffold is like the a set of props that compiles the root of widgets. A Scaffold Widget provides a framework which implements the basic material design visual layout structure of the flutter app. It provides APIs for showing drawers, snack bars and bottom sheets. Have a look at its constructor and the properties it has.
3. Multi-child Layout Widgets
After scaffold, we have to know first the layout of our widgets. There are 2 types of layout, column and row.
4. Stateless Widget vs Stateful Widget
Widget in Flutter is differentiated based on the state of components or pages. Stateless widget is the condition when the page or component is in static. It just renders 1 time and there is no changes or re-render in that page. For example the sign in page, there is just a set of widget (button, text and image) that just render 1 time, no changes. If user click that button, it will navigate to other page.
Then, stateful widget is the condition when the page or component is in dynamic condition. It can be rendered more than 1 time. For example the favorite menu. When user wants to add/remove some menu, the menu slot will re-render and add/remove the menu that user has chosen.
I think that’s all the basic we have to know first before start coding Dart. Now, our first app will be like this. There are the information of current temperature, our location (using permission for getting location) and the image that will change based on time (if night, the image will change to night image)
Here is the structure or widget tree of our app
I put all of source code to Github, because it will be long if i put all of the source code here. It is on my github repository if you have difficulty of coding.
So, the hybrid framework is the choice for mobile app developer. It aims to create and develop mobile app faster and generate it to multiple platform (Android/iOS), even Flutter can be used to web. Keep learn something new and i believe that the new technology/framework will help us leading to better productivity and more efficient time.
Source
● Flutter official website
https://flutter.dev/
● How to Build an App with Flutter — Part 1. Introduction
https://www.thedroidsonroids.com/blog/how-to-build-an-app-with-flutter-introduction
● What is Flutter? Its Benefits and Limitations
https://medium.com/flutterdevs/what-is-flutter-its-benefits-and-limitations-c795c94dfb16
● Introducing Flutter
https://www.youtube.com/watch?v=fq4N0hgOWzU
● Flutter 01. Pengenalan Flutter
https://youtu.be/sEbL9bXKI1g
● Learn Flutter & Dart by Doing — Part 1
https://www.udemy.com/course/learn-flutter-by-doing/learn/lecture/19201744?start=960#overview
● Flutter vs React Native vs Native: Deep Performance Comparison
https://medium.com/swlh/flutter-vs-react-native-vs-native-deep-performance-comparison-990b90c11433
● Flutter vs React Native: Performa Keduanya di Tahun 2020
https://ilmucoding.com/fluter-vs-react-native/
● Stackoverflow Developer Survey Results 2019
https://insights.stackoverflow.com/survey/2019
