Last year, we launched a React Native starter kit called Flat App. This kit contains a flat UI design along with Redux and NativeBase components for iOS and Android application.

Flat App is basically a style of interface design that emphasises on minimal use of stylistic elements. Developers are known to prefer a flat design as it allows interface designs to be more streamlined and efficient.

As an experiment, we were able to successfully rebuilt this app using Google’s Flutter. The result was truly amazing.

In this post I will talk about Google’s Flutter by comparing it’s Language Stack, UI, Style and other things with that of React Native. Simultaneously, I will also go into some of the challenges that we faced while rebuilding the Flat App, and the tricks that we used to overcome them.

TL;DR

• Download the Flutter Flat App from Google Play Store here:

• Check out Start Flutter! A library of free to download Flutter template by GeekyAnts.
• If you are a React Native Developer who wants to learn Flutter, check out Flutter for React Native Developers — A document that is part of the official docs of Flutter and written by Ankur Kedia and Manoj N Bisarahalli of GeekyAnts.

Dipping Our Toes Into Flutter

Back in July 2017, Sanket Sahu and Atul Ranjan had the chance to chat with Seth Ladd and Yegor Jbanov from Google’s Flutter Team.

Flutter is a platform built by Google that allows us to create extremely fast apps that can run on both Android and iOS platforms.

During this conversation, we spoke about Flutter’s operation, how it is being developed, and it’s future.

Our talks with the Flutter Team continued even after we got back to India. We regularly speak with them about our experiments with Flutter.

What makes Flutter different is that it has a thin layer of C/C++ code but most of its systems are implemented in Dart that developers can easily approach read, replace, or remove. This gives developers tremendous control over the system.

The Language Stack

While React Native is a JavaScript library, Flutter is a SDK that works on a completely different programming language called Dart.

JavaScript

Though JavaScript was initially created only for web development, today, this language with it’s numerous additional libraries has grown so huge that there are maybe a handful of areas that are without it’s presence.

React Native compiles its dynamic JavaScript code to native view at runtime. The rest of the code runs in the additional virtual machine that is packaged inside the app itself.

Dart

Dart is a general-purpose programming language that was developed by Google. It can be used to build web, server and mobile apps and for IoT devices as well.

Dart is influenced by many different languages. The strongest among these influences would be of Java. A Java programmer can easily notice similarities between these two languages.

Dart is an object-oriented programming language and supports things like abstraction, encapsulation, inheritance and polymorphism.

Dart programs can run in one of these two modes:

• In checked mode, dynamic type assertions are enabled. These type assertions can turn on if static types are provided in the code. Checked mode is recommended for development and testing as it is helpful in catching errors in your code when types do not match.
• Production mode is the default mode of all Dart programs. It provides a faster way to run your program.

Although Dart has a strong community presence, it is still overshadowed by other mainstream languages like JavaScript and hence very few developers even know about Dart.

But this changing at a very rapid pace. All thanks to Flutter’s Beta 1 launch! Already, Flutter’s GitHub Repo has gained 18K stars at the time that I was writing this post!

Flutter has a functional-reactive framework that is inspired by React. Though Flutter is written in Dart, it also takes the best features of React and helps the developers build a beautiful, cross-platform mobile app.

Style

React Native

In React Native, styles are defined using JavaScript. All of React Native’s core components accept a prop named style. Style names and values are usually similar to those of CSS on web. The only difference is that in React Native, the names are written using camel casing. So to define the background color, we will name our style as backgroundColor instead of background-color.

Our code will be cleaner if we use StyleSheet.create in order to define multiple styles in one place. This will be extremely helpful as our app grows in complexity.