Flutter

A portable UI toolkit for building natively-compiled apps across mobile, web, and desktop* from a single codebase.It was created by
Google in December 2018 Google I/O. But as an open-source project, both Google and the Flutter community contribute to its development. It
can be developed by using Dart Language.

Flutter apps look as good on the up-to-date operating systems as they do on older versions. This means that your Flutter app will look and
behave naturally on each platform, imitating their native components.

Dart is a general-purpose programming language which was developed by Google in 2011. Developers at Google and others use Dart to
create high-quality, mission-critical apps for iOS, Android, and the web. With features aimed at client-side development, Dart is a great fit for
both mobile and web apps.

Flutter App Architecture

Flutter Flux implements a unidirectional data flow pattern that consists of Actions, Stores, and StoreWatchers.
Flutter Components

Layout widgets are currently part of the application, new widgets can be included and existing ones can be modified to give
them an alternate feel and look, the trend has now changed and the UIs have become more user-friendly, easy to use, increase
user engagement, and win grants.
Flutter accompanies built-in beautiful Material Design and Cupertino like iOS-flavor widgets, rich motion APIs, smooth natural
scrolling, and platform awareness. Flutter has its own UI components, material design, adaptable widget sets and along with an
engine to render them on Android as well as an iOS platform.
Here are a few examples of Flutter Widgets:
● Drawer
● Inkwell
● GestureDetector
● DefaultTabController
Flutter Community Support

The Flutter team can be found for support in a ~4.5k user subreddit, ~30k stars on Github, ~740 users on Google Group and
on Stack Overflow. Despite Dart not receiving much love in the Stack Overflow developer survey, early blog posts have been
positive towards the use of Flutter.
Comparing react native vs flutter the flutter’s community is not as strong as the one for React Native. But support provided
by the Flutter Team at Google is really good. Their documentation is thorough enough to help you and they address the questions
posted within a reasonable time frame which help to get started with flutter with app development using Flutter.
Flutter Unit Testing
Flutter is a new framework and when it comes to testing a new framework it's somehow difficult but flutter uses Dart which
offers an excellent unit testing framework which can be utilized and Flutter provides you with a great option for testing the widgets
on a headless runtime, at unit test speeds
Advantages of using flutter for developing apps :

1. Faster Development - Flutter is a cross-platform solution, so one codebase can be run on both Android and iOS. This
saves a lot of development time.
2. Simultaneous App Updates on Android and iOS

The same codebase for both platforms allows you to release app updates simultaneously. This one is hard to achieve when
there are separated projects for both platforms. Different availability of developers, or longer implementation on one platform makes
synchronizing difficult. The problem grows when an application update also requires changes in backend infrastructure.

3. Easier to Maintain and Develop New Features

When your apps are ready and published, you can focus on expanding the user base. This often means moving the app to the
maintenance mode, in which fixing bugs is a top priority, and adding new features goes on a second track.

4. A Perfect Choice for Advanced UI

Flutter renders all parts of the interface using internal graphics engine called Skia – the same that is used in Google Chrome,
Mozilla Firefox, and Sublime Text 3. This fast and well-optimized piece of software allows Flutter to behave differently than most of
the other mobile development frameworks.
Using Flutter is closer to writing a game. From the operating system, you get a blank canvas, and all UI elements are drawn
by application. Flutter team put tremendous work to recreate Material UI components and Apple Design System elements
internally. Of course, you can also make your own components, and this is a point where Flutter will shine. Creating good looking
custom UI elements is very easy, and you will have them working on both Android and iOS. This makes a Flutter a perfect choice
for apps with advanced, custom UI designs.

5. Easy Adapting to Different Screen Dimensions

Flutter layout system and declarative nature of framework itself makes writing and fitting views to different screen
dimensions easier than in iOS SDK. Making animations is also smoother than in native iOS and Android. Moreover, looking at the
roadmap of Flutter, we shouldn’t wait long for support for desktop and web applications.

6. One UI Design

If you want an application that looks native on iOS and Android, we probably won’t recommend you Flutter. This will be explained in
the cons section, but now let’s get back to the pros.
With one codebase for both platforms, you will only need one UI design prepared by designers. The cross-platform application
usually follows Material Design principles, with only small adjustments for different platforms (which Flutter usually handles by itself)
or makes the whole UI look custom, with elements based on the best solutions taken from iOS and Android.

7. Access to Device Features

One of the main reasons why people are scared of cross-platform solutions is a problem with access to native features. After all,
that makes your app outstand simple webpage is the usage of camera, GPS, or haptic feedback. It could be easier, but of course,
you can use these features in Flutter as well.
You have to prepare iOS or/and Android code (in Objective-C/Swift or/and Java/Kotlin) and send data to Dart (which is the primary
language used in Flutter) by a special mechanism called platform channels. Flutter core team and community prepared channels
for most native functionalities of your phones, so you don’t have to write them on your own. If you want to use something more
unpopular (like a native library), channels are waiting for you.

8. Compiled Code: Stable Performance

Unlike ReactNative, NativeScript or Ionic Flutter code is compiled when the application is built for distribution. It won’t require to use
the JavaScript engine to communicate with native components neither web view to display its content. As mentioned earlier, the
Flutter code is drawn on system canvas. This gives the application an additional performance boost. In fact, the framework team is
proud to provide stable 60/120 FPS performance on most of the devices.

9. Same app UI, even on older devices

10. Perfect for MVPs.
Disadvantages of using flutter for developing apps

1. Platform Specific Look and Feel

Of course, in Flutter, you can check which platform the app is running and render different components on the screen.
We use this when we want to display Dialogs/Alerts that look like native ones of the system. However, making a whole
application that way will burn more time than writing two separate applications. After all, Flutter is a cross-platform
framework.

2. Young Technology
With every new technology comes a risk that it will evolve in the way we don’t want to follow, or maybe it will be
dimmed by the maintainer. The fact that Flutter is sponsored and developed in Google, and they plan to use it in their new
OS make this scenario unlikely. Nevertheless, it is good to know about this.
The second thing is, there are fewer Flutter developers on the market than native iOS and Android ones. It shows us
that mobile developers are willing to learn Flutter, and learning it turns out to be a quite enjoyable experience.

3. Platform Limitations
Flutters own UI rendering nature adds some limitations. For example, if some features are integrated into the UI on
native platforms, there must be recreated by the Flutter team.
There are two examples that we already identified:
video player – there are implementations of a video player in Flutter but they look different than the system one
(especially on iOS).
 iOS profile data completion – do you remember this email or password prompt above keyboard? This feature is not
supported in Flutter (yet). To overcome this problem you have to write native view for a text field in iOS and embed it in
Flutter (yes, this is possible and we tested it on exactly that case). NOTE: SMS code suggestion works in Flutter without any
code changes.

4. Handling of New System Features

All new features of iOS and Android will be introduced in Flutter later than in their native SDK-s. You will have to wait
until your application can support foldable screens or dark system mode. However, the truth is that in native development
we usually can’t add new system features from release day because we have to keep system compatibility.

5. Native SDK Knowledge

In every Flutter project, you will need people experienced with native development – from simple things like building
an Android version, through more complicated, like flavors and making builds on iOS, to writing native views for both
platforms.

6. Applications written in Flutter are bigger than native ones.

React Native

A framework for building native applications using React. React Native is an open-source mobile application framework that uses
JavaScript. It was created by Facebook in 2015 at F8 Conference – Official Launch of React Native.

React Native is an effective framework for:

● Cross-platform development
● Building mobile apps using JavaScript language
● Developing applications for both Android and iOS using a single codebase
● Using the same design as React.
React Native lets you build mobile apps using only JavaScript.It 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.
React Native Architecture

React Native’s application architecture is known as Flux. Facebook uses Flux to build client-side web applications. Every
framework mostly follows MVC framework. The unidirectional data flow is the main concept of Flux. here React takes care of view
part and Flux, a programming pattern takes care of the Model in the MVC.
React Native Components
Unlike Flutter’s Flat App, React Native App Development requires to use third-party libraries since React Native does not have a UI
components library of its own.We used components such as NativeBase, which is an open-source UI components library created
by geekyants. React Native Elements, React Native Material Design and Shoutem are other similar UI libraries that are available to
the user.
While comparing user Interfaces between React Native vs flutter, React Native is similar to using HTML without any CSS
framework. It is based more on the native components both for Android and iOS also better User Experience (UX) when a user
taps into the Operating System.
Unlike Flutter’s Flat App, React Native does not have a UI components library of its own it uses third-party libraries and
components like NativeBase. NativeBase which is an open-source library builds a layer on top of React Native that provides you
with the basic set of UI components .
Currently, there are 3 main UI libraries:
● Shoutem UI Components
 ● React Native Elements
● Native Base components

React Native Unit Testing

Developers have all JavaScript frameworks available for testing at a unit level. However, when it comes to UI and
automation testing, the situation is not as bright. Although a number of third-party libraries are available, there is no clear picture
there.

Advantages of using React Native for developing apps

1. Faster to Build

The major selling point of React Native is the shorter development time. The framework provides numerous ready-to-
apply components that can accelerate the process. React Native still lacks some solutions, so you would probably have to
build them from scratch, but RN is based on JavaScript, which gives access to the largest package ecosystem in the world,
npm. Having access to such an extensive base of packages, you can save much time, and it will only get better.

2. One Framework, Multiple Platforms

Developing with JavaScript also provides an opportunity to share the codebase not only between mobile platforms but
also React web applications. Active development of tools like React Native Web seems to point in this direction. This also
allows the same developers to work both on web and mobile applications, as the technologies are very similar. Whereas the
stability of such solutions still leaves a lot to be desired, the possibility of sharing non-UI dependent code might still bring
 reasonable benefits. Besides shortening the development time, it could help improve the consistency of your app’s business
logic between all supported platforms.

3. Hot Reloading
This makes changes instantly visible without the need for the developer to rebuild the app. It is a major benefit for
developers. Not only do they save time on the compilation, but they also don’t lose any state of the app while making
changes. It boosts productivity and, in effect, the whole development time is shorter.

4. Smaller Teams
Native development requires two separate teams for Android and iOS. It can hamper the communication between
developers and, accordingly, slow down the development. Native Android and iOS teams have their own projects, and they
often have different development speeds and methods. As a consequence, two projects can easily become inconsistent. It
can lead to differences in the app’s implemented features, behaviour and appearance. If you choose React Native, you will
mostly need JavaScript developer, who can write the code for both platforms. Obviously, apps with more native features will
require more help from native developers as well. That said, in most cases, the team will be smaller in size, and thus easier
to manage.

5. Simplified UI
 React Native is solidly based on creating a mobile UI. In native development, you will need to create a sequence of
actions in the application. RN employs declarative programming in which such an order of implementing actions is obsolete.
As a result, it is much easier to spot bugs on the paths a user can take.

Disadvantages of using React Native for developing apps

1. Less Smooth Navigation

React Native has already been tested in a production environment by many, including giants such as Facebook,
Bloomberg or Skype, but in fact, it's still in its beta phase. There are often breaking changes in tools and dependencies
between versions. RN developers often stumble upon many weird issues with debugging tools, hot reloading failures or the
compatibility of packages, which can slow the development significantly, especially for inexperienced developers.

2. Lack of Some Custom Modules

React Native still lacks some components. Others, in turn, are underdeveloped. The chances are you won’t have a
problem with that, as the majority of custom modules you need are available, well-documented, and working properly.
However, it might happen that you will have to build your solution from scratch or try to hack an existing one. When
developing your custom modules, you could end up with three codebases (RN, Android, and iOS) for a component instead
of only one. In each of those codebases, there can be differences in behaviour and appearance. Fortunately, those
situations don’t come about often.
 3. Native Developers Still Needed

Implementing some native features and modules necessitates having detailed knowledge of a particular platform. The
lack of out-of-the-box support for many native app functionalities (e.g. camera, push notifications) used to be a significant
issue with React Native development. As the community grows, more and more open-source libraries provide easy access
to native platform features. Nevertheless, the implementation of some more advanced features might still require help from
iOS and Android developers. Their input depends on the complexity of your project, but you need to bargain for them when
kicking off with React Native. This might be an issue for small teams, in which developers don’t have any native mobile
experience. Fortunately, we have plenty of Android and iOS developers.

4. Fragile UI - This can break the app’s UI but it happens very rarely. This can break the app’s UI but it happens very rarely.
5. Apps are bigger than native ones.

Development Time
The Web App Development Company work on very strict deadlines nowadays and if the frameworks deliver short
development time then there are major possibilities that companies would opt for that framework.
React native has many different third-party libraries, such as Calendar, Carousel, and Modal also It has ready-to-use
components, which improves the speed of cross-platform app development. In Flutter, we need to add separate files for both iOS
and Android platform. In each of these files, we need to add code that corresponds to the rules of the platform. Although Flutter has
also promised of high-speed app development.
Both Flutter and React Native support stateful hot reloading which is blazing fast compared to how true native apps recompile in
Android Studio and XCode. If your app encounters an error, you can typically fix the error and then continue on as if the error never
happened.
You can make a change to a Flutter app while it is running, and it will reload the app’s code that has changed and let it
continue from where you left off.