MOBILE PROGRAMMING

Table of Contents
CHAPTER I : INTRODUCTION TO FLUTTER ..................................................................... 1

I. Introduction to cross-platform development .......................................................................... 2

II. Differences between Native App Development and Cross-Platform Development ............. 5

III. What is Flutter? .................................................................................................................... 5

IV. Features of Flutter ................................................................................................................ 5

V. Advantages of Flutter ............................................................................................................ 6

VI. Native VS Flutter VS Xamarin ............................................................................................ 7

VII. Architecture de flutter ........................................................................................................ 7

VIII. Premiers pas avec Flutter .................................................................................................. 9

Mr. NZE FOMEKONG 1

 MOBILE PROGRAMMING

CHAPTER I : INTRODUCTION TO FLUTTER

I. Introduction to cross-platform development

a. What is cross-platform app development?
Cross-platform application development is an approach that involves creating applications
that can run on multiple operating systems (OS) and devices, such as iOS, Android, and
Windows. This development technique uses a single shared code base, allowing applications
to be built, maintained, and deployed across multiple platforms with minimal code duplication
and redundancy.

In contrast, traditional native app development requires creating separate apps for each
platform. With cross-platform development, developers can write a single codebase in a
specific language or framework, which is then converted to native code or rendered in a runtime
environment on different platforms. By targeting multiple platforms and devices
simultaneously, businesses can save time, resources and costs while reaching a wider audience.

Native apps: A native mobile app is an app created for a specific platform. The native mobile
application is written in the platform's native programming language: for Android — Kotlin
and Java, for Apple iOS — Objective-C and Swift. A native mobile application has access to
all the technologies and hardware capabilities native to a particular platform.

Mr. NZE FOMEKONG 2

 MOBILE PROGRAMMING

b. Advantages and disadvantages of cross-platform development

Cross-platform app development offers various advantages and disadvantages, which
should be considered when deciding whether this approach is suitable for your project.

Benefits:

• Reduced development time: Using a single codebase saves developers time by not
having to write separate code for each platform. This speeds up the development
process and allows for faster time to market.
• Cost-effective: Developing a single cross-platform app requires fewer development
resources than building native apps for each platform separately. This reduces
development costs and can lead to significant savings.
• Easier maintenance and updates: With a shared codebase, changes and updates can be
implemented more efficiently across platforms, simplifying maintenance and reducing
the effort required.
• Wider audience: Cross-platform apps can reach more users across different device
platforms, thereby increasing the potential user base and improving the app's chances
of success.
• Single development team: Having a development team proficient in your chosen cross-
platform framework eliminates the need for separate iOS and Android developers,
simplifying team management and coordination.

Disadvantages:

• Performance Limitations: Cross-platform apps may experience lower performance than

native apps due to the runtime environment or translation layers used to render the app
on various platforms. This may affect applications that require high performance
capabilities or complex animations.
• Native Platform Feature Restrictions: Access to platform-specific features can be
problematic in cross-platform apps, leading to potential limitations in functionality and
user experience on certain devices or platforms.
• User experience inconsistency: Cross-platform frameworks and tools aim to provide a
consistent user experience across platforms, but they still differ from native
development.

Mr. NZE FOMEKONG 3

 MOBILE PROGRAMMING

c. Popular cross-platform frameworks and tools

There are many cross-platform frameworks and tools available for application developers.
Understanding their characteristics, strengths and weaknesses is essential to choose the one
that best suits your project requirements. Below are some popular cross-platform frameworks
and tools:

React Native: Developed by Facebook, React Native is one of the most popular cross-platform
frameworks. It uses JavaScript and React, allowing developers to create apps with a native look
and feel. React Native supports iOS and Android platforms and provides a large number of
libraries and components.

Xamarin: Xamarin, now part of Microsoft, enables cross-platform application development

using C# and the .NET framework. It supports Android, iOS and Windows platforms,
providing consistent performance close to native apps. Xamarin also offers comprehensive
libraries and tools for designing, testing, and distributing UI applications.

Flutter: Developed by Google, Flutter is an open-source user interface toolkit that uses the
Dart programming language. It enables rapid development of cross-platform applications for
iOS, Android and desktop platforms. Flutter offers a rich set of widgets and a responsive user
interface, ensuring a consistent user experience across all devices.

PhoneGap: Apache Cordova, also known as PhoneGap, is a cross-platform development tool

that uses HTML5, CSS, and JavaScript. PhoneGap allows developers to create hybrid mobile
apps that run within a WebView, making it suitable for simple apps with a web UI. It supports
many plugins and APIs to access native device functionality.

Ionic: Ionic is another popular cross-platform development framework that uses HTML5, CSS,
and JavaScript. It focuses on performance and user interface, providing an extensive library of
prebuilt components that resemble native application elements.

Mr. NZE FOMEKONG 4

 MOBILE PROGRAMMING

II. Differences between Native App Development and

Cross-Platform Development
The difference between cross-platform app development and native app development
is that with cross-platform app development, users only need to create the code once and it will
work on all platforms . In this case, the application will work and support a variety of operating
systems, regardless of the platform you are developing it for.

With native application development, you will need to have specialized teams for each
technology and write code specifically for a type of platform .

The market is competitive and native app development is more expensive than cross-
platform development due to the growing demand for these apps. Businesses are turning to
cross-platform application development to meet this growing demand.

III. What is Flutter?

Flutter is an open-source UI software development kit created by Google. It is used to
develop cross platform applications from a single codebase for any web browser, Fuchsia,
Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in
May 2017.

IV. Features of Flutter

Some features of Flutter include:

a. Hot reload: Hot reload makes it possible to see the changes in the code instantly reflected
on the UI. This speeds up the process to work on the outlook of the application; moreover,
it enables developers to correct errors that save cost and effort.
b. Cross-platform development: Flutter enables developers to write code that works on
different platforms. Two different applications can use the same codebase. In addition to
sharing the UI code, the UI itself is also shareable. This makes maintenance of the single
codebase much easier as opposed to different codes for different platforms.

Mr. NZE FOMEKONG 5

 MOBILE PROGRAMMING

c. Widget library: Everything in Flutter is defined as a widget. A widget can be a color,

padding, or menu. Flutter is capable of creating complex widgets that can be customized
according to the requirement of the application. Built-in widgets are also available for
usage. Some examples include Cupertino pack and Material Design, which have sets of
widgets that provide a glitch-free user experience.
d. Native Performance: In Flutter, platform-specific widgets are provided for Google Fuchsia,
Android, and iOS. These widgets can be integrated into the Flutter application to make use of the
different platform-dependent functionalities. Existing Java, Swift, and Objective-C codes can be used to
utilize native features such as camera and geolocation. Therefore, Flutter can easily incorporate third-
party integrations and APIs.
e. Open-source: Google introduced Flutter as an open-source platform. Various design options can be
explored by developers to create Flutter applications. User-friendly applications can be created with
Material Design and Cupertino widgets. Flutter is free of cost and has detailed documentation and
communities available online.

V. Advantages of Flutter
Without any doubt, Flutter has built a robust reputation as a portable and extensible UI
toolkit to build near-native apps for web, desktop, and mobile platforms. It uses Dart as its
programming language along with Cupertino widgets and Material Design. With Flutter
development services, you can now create exquisite UI that has the same look and feel like
native apps. It functions optimally across platforms while using a single codebase for every
project.

Flutter is also the only framework with a core mobile SDK that offers responsive,
stylistic elements without requiring a JavaScript bridge. This results in enhanced levels of
performance that easily outmatches its competitor, React Native. You can easily integrate
Flutter with Android, iOS, Linux, Windows, as well as Fuchsia applications for amazing and
seamless performance.

It is noteworthy that Google itself deploys Flutter for the UI of the Google Home Hub
and numerous modules of the Google Assistant. Flutter is also the platform of choice for
eCommerce businesses like eBay, Alibaba, and Groupon.

Mr. NZE FOMEKONG 6

 MOBILE PROGRAMMING

VI. Native VS Flutter VS Xamarin

As the demand for cross-platform mobile app development solutions grows, so does
the variety of available tools in the market. In this section, we will present an overview of the
most commonly used frameworks for building cross-platform mobile apps for iOS, Android,
and other platforms.

VII. Architecture de flutter

The flutter framework is a layered system that exists as a series of independent libraries
that each depend on the underlying layer. On a high level, the flutter framework’s architecture
has three main parts or layers: Embedder, Engine and Framework. Each layer further has
components that coordinate with each other for a smooth user experience.

Mr. NZE FOMEKONG 7

 MOBILE PROGRAMMING

Embedder layer

The embedder layer has platform-specific embedders, many of which provide an entry
point and coordinate with the underlying operating system to access services like rendering,
storage, and more. It has many embedders for possible targeted platforms.

The embedder is written in a language that is appropriate for the platform: currently
Java and C++ for Android, Objective-C/Objective-C++ for iOS and macOS, and C++ for
Windows and Linux. Using the embedder, Flutter code can be integrated into an existing
application as a module, or the code may be the entire content of the application

Engine layer

The engine layer is the core of flutter written in C/C++. It is responsible for taking care
of input, output, and rasterizing composited scenes, as flutter is a UI toolkit. It uses
the skia library for rendering graphics.

Mr. NZE FOMEKONG 8

 MOBILE PROGRAMMING

The engine layer is also responsible for service and network protocols, such as network input
and output, file management, and the core API of flutter. The flutter engine layer can be
accessed through the dart:ui library, which wraps all these functionalities in dart classes.

Framework layer

Typically, developers interact with Flutter through the Flutter framework, which
provides a modern, reactive framework written in the Dart language. It includes a rich set of
platform, layout, and foundational libraries, composed of a series of layers. Working from the
bottom to the top, we have:

• Basic foundational classes, and building block services such as animation, painting,
and gestures that offer commonly used abstractions over the underlying foundation.
• The rendering layer, This layer is responsible for converting widgets in a flutter to
pixels and showing them on the screen. It takes a tree of renderable objects called the
widgets tree. Whenever any animation, input, or state of the widget changes, this layer
is called, which updates the layout and shows them on the screen.
• The widgets layer is a composition abstraction. Each render object in the rendering
layer has a corresponding class in the widgets layer. In addition, the widgets layer
allows you to define combinations of classes that you can reuse. There are many
predefined widgets.
• The Material and Cupertino libraries offer comprehensive sets of controls that use the
widget layer’s composition primitives to implement the Material or iOS design
languages

VIII. Premiers pas avec Flutter

If you want to use the Flutter framework for mobile app development, you should know
what Flutter IDEs you can use for Flutter development. There are many impressive and highly
useful Flutter IDEs available and choosing one will be a complex task. But for this cours, we
will use the IDE introduced last year, that is Android studio, which is the official android app
IDE. Download here. After installing the IDE follow these steps to install flutter into your
system.

Mr. NZE FOMEKONG 9

 MOBILE PROGRAMMING

NOTE: To install and run Flutter, your development environment must meet these minimum
requirements:

To install and run Flutter, your development environment must meet these minimum
requirements:

WINDOWS

• Operating Systems: Windows 10 or later (64-bit), x86-64 based.

• Disk Space: 2.5 GB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these tools being available in your environment.
o Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
o Git for Windows 2.x, with the Use Git from the Windows Command
Prompt option.

If Git for Windows is already installed, make sure you can run git commands
from the command prompt or PowerShell.

MACOS

• Operating Systems: macOS, version 10.14 (Mojave) or later.

• Disk Space: 2.8 GB (does not include disk space for IDE/tools).
• Tools: Flutter uses git for installation and upgrade. We recommend installing Xcode,
which includes git, but you can also install git separately.

Important: If you’re installing on an Apple Silicon Mac, you must have the Rosetta translation
environment available for some ancillary tools. You can install this manually by running: sudo
softwareupdate --install-rosetta --agree-to-license

LINUX

• Operating System: Linux (64-bit)

• Disk Space: At least 1.6 GB (excluding disk space for IDE/tools).
• Tools: Flutter relies on these command-line tools:
o bash
o curl
o file
o git 2.x

Mr. NZE FOMEKONG 10

 MOBILE PROGRAMMING

o mkdir
o rm
o unzip
o which
o xz-utils
o zip
• Shared libraries: To utilize the flutter test command, your environment needs the
library libGLU.so.1.The mesa packages provide this library: libglu1-mesa on
Ubuntu/Debian and mesa-libGLU on Fedora.

chromeOS

To install and run Flutter on a Chromebook, your machine must have Linux enabled from
the Developers tab of Settings.

The amount of disk space required varies depending on which target platforms you enable. We
recommend that you increase the disk size for the Linux environment from the default of 10GB
to 32GB or larger, to accommodate Android Studio and other tooling.

Mr. NZE FOMEKONG 11