Introduction to Flutter Dev

with Dart
Mohamad Roni Hamid
 01

CROSS-PLATFORM SUPPORT
Cross-platform software is computer software that is
designed to work in several computing platforms

Image Source: https://dzuyel7n94hma.cloudfront.net/img/saas-startup-example-golang-project-website-homepage.png

 PLATFORM [COMPUTING]
Platform can refer to the type of processor (CPU) or
other hardware on which an operating system (OS)
or application runs, the type of OS, or a combination
of the two.

An example of a common platform is the Microsoft

Windows OS running on the x86 architecture. Other
well-known desktop platforms are Linux/Unix and
macOS - both of which are themselves cross-
platform.

Applications can be written to depend on the

features of a particular platform.

JAVA PLATFORM IS A COMMON VM PLATFORM WHICH RUNS ON MANY OSS AND HARDWARE TYPES
Image Source: https://dzuyel7n94hma.cloudfront.net/img/saas-startup-example-golang-project-website-homepage.png
 What is cross-platform?
A cross-platform computer product or system is a
product or system that can work across multiple
types of platforms or operating environments

Cross platform is also known as multiplatform or

platform independent

Image Source: https://dzuyel7n94hma.cloudfront.net/img/saas-startup-example-golang-project-website-homepage.png

 Benefit of developing cross-platform
• Cost-effective
Having a single code base, it provides cost-effectiveness of re-writing codes for
various platforms from time to time.

• Access Plugins
Plug-ins help to make development fluid and changes on requirement. APIs can be
used to make developmental modifications and changes easily.

• Reusable Codes
Reusable code provides an upper hand as it does not require repeated development.
Benefit of developing cross-platform (cont..)
• Uniformity
User experience must be balanced across these trajectories and inefficiency in
maintaining those would mean unproductive results.

• Quicker development time

An undeniable benefit of having a single scripting feature is quick development. The
solution/product reaches the market on time and consumer satisfaction is achieved.
 02

CROSS-PLATFORM IMPLEMENTATION
Cross-platform software is computer software that is
designed to work in several computing platforms

Image Source: https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2020/01/09185920/MCAMasters-of-Computer-

Applications.jpg
 Implementation
For software to be considered cross-platform, it
must be function on more than one computer
architecture or OS
Developing such software can be a time-consuming
task because different OSs have different
Application Programming Interfaces (API)

Software written for one OS may not automatically

work on all architectures that OS supports

Image Source: https://as2.ftcdn.net/v2/jpg/02/08/19/65/1000_F_208196560_YtcH8Ldk7enIiBQRF4X67jU4tGv9HWcg.jpg

 Implementation (cont..)
RESPONSIVE WEB DESIGN THIRD-PARTY SINGLE CODEBASE
Responsive web design (RWD) is a This strategy relies on having one codebase that may be compiled to
Web design approach aimed at
LIBRARIES
multiple platform-specific formats.
crafting the visual layout of sites to Third-party libraries
attempt to simplify cross-
provide an optimal viewing experience
across a wide range of devices platform capability
GRACEFUL
DEGRADATION
Graceful degradation attempts to provide the same
TESTING or similar functionality to all users and platforms.

Cross-platform applications need much more MULTIPLE

integration testing
CODEBASES
Some software is maintained in distinct codebases for
different (hardware and OS) platforms, with equivalent
03 functionality.
04
02
DESIGN
05 Many software systems use a layered
architecture where platform-dependent
code is restricted to the upper- and
01 06 lowermost layers.

07
 Challenges in Implementing Cross-platform
1. Testing cross-platform applications more complicated

2. Developers are often restricted to using the lowest common denominator subset of
features which are available on all platforms.

3. Different platforms often have different user interface conventions, which cross-
platform applications do not always accommodate.

4. Scripting languages and VM bytecode must be translated into native executable code
each time they are used.

5. Different platforms require the use of native package formats.

6. Cross-platform execution environments may suffer cross-platform security flaws.

 03

MOBILE APP DEVELOPMENT

The mobile phone operating system landscape was much
more diverse 10 to 15 years ago.
Image Source: https://temp-ca.s3.amazonaws.com/cdn-files/ris_ss138246326sst1654065756.jpg?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-
HMAC-SHA256&X-Amz-Credential=AKIA2YDWKLAVUAFT3HFY%2F20220601%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220601T064237Z&X-Amz-
SignedHeaders=host&X-Amz-Expires=300&X-Amz-Signature=6e07d736985ca6e56beb1bbbb052e1795ca906cd8b5d63f49c55f31d9e065e6f
 Mobile App Development
The variety of operating systems was a real
challenge for software developers, who had to
build a whole new app for each platform they
wanted to support.
Developers released their apps on the operating
systems that were most popular among their target
audiences and ignored less popular OSs

Symbian, BlackBerry OS, and Windows Phone

ultimately proved less popular than iOS and
Android, and supporting them didn’t pay off.
So these platforms died, and the world of mobile
operating systems is now binary: only iOS and
Android have been competing for the last few
years.
Image Source:https://cdn.statcdn.com/Infographic/images/normal/4112.jpeg
Image Source: https://seqtek.com/wp-content/uploads/2021/06/New-Project-5.svg
 Mobile App Development
Developers can now reach both iOS and Android users with a single
cross-platform app.

And along with targeting smartphones, they can use a cross-

platform app to target other devices such as smartwatches and
smart TVs — no matter what platform they operate on. With one
app to rule them all.
 A. Native Apps
Native applications are classic apps. They’re built
specifically for each platform. Usually, developers
build native apps for iOS and Android.
• iOS — Apps for iPhones and iPads are built using the
Swift or Objective-C programming language.
• Android — Apps built for Android smartphones and
tablets are written in Java or Kotlin.
As stated above, apps for iOS and Android are built
with completely different programming languages,
which means to create apps they have to hire a
separate team of developers to build, update, and
support each of them.
Image Source: https://seqtek.com/wp-content/uploads/2021/06/New-Project-5.svg
 A. Native Apps

Image Source: https://seqtek.com/wp-content/uploads/2021/06/New-Project-5.svg

 Advantages and Disadvantages
of Native Apps
• Exceptional performance.
Native apps can handle
high-end graphics and
animations and provide
Advantages
fast response times.

• Consistent user experience. • Need to hire a separate team for each

Native apps use the same platform. Each native app is
UI elements and gestures developed from scratch, and there’s
as other platform-specific no chance to share the codebase
apps. Disadvantages across platforms. Testing and bug
fixing take twice as long

• Most startups can’t afford the cost.

The number of specialists required
and the time invested in app
development affects the cost of the
project.
Conclusion:
Developing a native app is expensive, but it’s well worth it when it comes to performance-critical apps.
When starting a business, developers likely can’t allocate the budget needed to build two separate apps. And the development time also doesn’t
look inspiring. But, there are much cheaper and faster options.

Image Source: https://seqtek.com/wp-content/uploads/2021/06/New-Project-5.svg

 B. Web apps
Web applications work in browsers. This means they can run on
any device with a browser, regardless of the particular browser
and the operating system. However, there are significant
differences between native apps and web apps. For starters, web
apps use browsers to run, and they’re usually written in CSS,
HTML5, or JavaScript. Such apps redirect the user to the URL and
then offer them the option to install the app. They simply create
a bookmark on their page. That’s why they require minimum
device memory.
Since all of the personal databases will be saved on the server,
users can only use the application if they have an internet
connection. This is the main drawback of web apps – they always
require a good internet connection. Otherwise, you risk
delivering a subpar user experience.

Image Source: https://seqtek.com/wp-content/uploads/2021/06/New-Project-5.svg

 Advantages and Disadvantages
of Web Apps
• Available on all platforms.
Build just one version of
your app and everybody
can access it from their
Advantages
smartphones, tablets,
laptops, and even smart
TVs. • Limited performance.
Web apps can’t perform
• No installation needed.
heavy calculations since
People don’t like installing
they can’t directly access
new apps without a
compelling reason. Web
Disadvantages a device’s hardware.
apps, on the contrary, are • Lack a native look and
available at a link. feel. Since there’s only
one version of a web app,
there’s no way to adjust
it to each platform’s
design guidelines
Conclusion:
Web apps can be built fast and cost much less than native apps. They’re also easy to update, which is great if developers
want to be on the edge of web development trends.
Generally, web apps are a perfect choice for startups when time to market is critical. They give a chance to test ideas
without risking a fortune.

Image Source: https://seqtek.com/wp-content/uploads/2021/06/New-Project-5.svg

 C. Cross-platform Apps

Cross-platform applications combine the

best of two worlds: these are real apps you
install on your smartphone, and in most
cases, users can’t tell they aren’t using a
native app.
At the same time, there’s no need to hire
two separate development teams since iOS
and Android apps are built with exactly the
same toolset: one of several JavaScript
frameworks or Google’s new Flutter.
Image Source: https://temp-ca.s3.amazonaws.com/cdn-files/ris_ss847639604sst1654068744.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-
SHA256&X-Amz-Credential=AKIA2YDWKLAVUAFT3HFY%2F20220601%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20220601T073225Z&X-Amz-SignedHeaders=host&X-Amz-
Expires=300&X-Amz-Signature=e0e6c90195282de7ac9d67c4f71a794b178e20fdbd4194521b58c3651239f5e7
 Advantages and Disadvantages
of Cross-platform Apps

Advantages
• High performance. A cross-platform
mobile app demonstrates higher
performance than a web-based application
and is able to meet almost any
requirements.

• Cost-effective and fast development.

Compared to a native app, a cross- Disadvantages
platform app has a significantly shorter • Limited capabilities. Certain platform-
development time and lower cost. specific features can be accessed only
with native code. For example, you won’t
be able to employ augmented reality in a
cross-platform app.
Conclusion:
The capabilities of cross-platform apps can cover the needs of almost any small to medium-sized business.
The only cases when cross-platform apps may be insufficient are when performance is critical or you need to
access platform- or device-specific functionality. However, these issues can be solved by employing third-
party plugins or including native code in the app.
 Types of Cross-platform
Apps
There are two variations on the cross-platform approach:
• Hybrid app development (Ionic, Cordova)

• Cross-platform native mobile app development (React Native,

Flutter, NativeScript)
 Hybrid development
With the hybrid development approach, you can build a
single mobile application using web technologies: HTML,
CSS, and JavaScript, to be exact. These technologies run
within a browser embedded in a native application:
WKWebView for iOS and WebView for Android.
To make the website code available to the embedded
browser, you need a wrapper. The most popular solutions
currently are Cordova and Ionic. Both of these wrappers
support a variety of plugins that extend the capabilities of
the browser and can access most platform-specific
features. Moreover, you can make your hybrid app
available via the App Store and Google Play Market.
With a hybrid app, users never notice that they’re using a
browser since WebView and WKWebView perfectly imitate
a native application interface, gestures, and controllers.
A significant advantage of hybrid apps is that any updates
to your software are instantly available to users — there’s
no need to install updates from an app store.

Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 Hybrid development

Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 When to choose hybrid app development?
• You want to test your startup idea but are short on money
This is a classic use case for hybrid development. With this approach, you can release an
app in a short time and test it with real users without risking much money. After you prove
your idea and attract investors, you can focus on native cross-platform app development
for better results.
• You’re building a simple application but value the user experience
Weather applications, currency exchange rate apps, habit tracking apps, and similar
products are based on one simple core feature. They’re not performance-critical, so
building native apps for this purpose would be a waste of time and money. By opting for
hybrid development, you can achieve a high-level user experience in exchange for
reasonable investments.
• You have a web app and want to release a mobile version
Once you’ve developed a web app, you can reuse much of your existing code for hybrid
mobile apps. Also, hybrid apps for iOS and Android share 80% of code on average, which is
extremely attractive for software developers. Overall, code sharing is one of the best things
about hybrid app development.

Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 Cross-platform native development
When it comes to native cross-platform technologies,
there’s one clear leader: React Native based on
JavaScript. The recently released Flutter based on Dart
is a promising technology as well.
Even though these frameworks are different, they
share the same goal: to build custom apps for multiple
platforms using the same technology stack. React
Native and Flutter apps for iOS and Android may share
much of the codebase, but there’s still platform-
specific code that needs to be written from scratch for
each app.
Cross-platform native app doesn’t need an
intermediary (a browser) to run on a smartphone.
React Native compiles JavaScript into native code (Java
or Swift, depending on the platform). Developers also
have the chance to create a platform-specific UI and
ensure a native look and feel.
Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/
 Cross-platform native development

Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 When to choose native cross-platform development?
• You care for the user experience.
iPhone and Android smartphone owners are used to different user interfaces:
gestures, button styles, and controllers differ between these platforms. With
cross-platform development, you can adjust the app’s interface to each
platform and satisfy both groups of users.
• Your desired functionality requires high app performance.
An embedded mobile browser can’t handle everything. But a native
application can. Even if a feature is extremely complicated and can’t be
implemented with JavaScript, React Native enables you to use platform-
specific code (Java or Swift) to implement that specific functionality.

Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 04

CROSS PLATFORM SOFTWARE

DEVELOPMENT KIT
There are many smart phones available in the market and
therefore SDK’s-Software development kit needs cross-
platform access in the mobile market.
Image Source: https://st2.depositphotos.com/25453930/42329/v/1600/depositphotos_423297978-stock-illustration-
cross-platform-software-illustration-concept.jpg
 Flutter
Developer: Google and community

Flutter is a by-product of Google , making it a sustainable software development kit [SDK] for
developing web-based applications. Its iconic 'Hot Reload' feature facilitates developers to
view live variations in the coding without saving it.
It helps build high-performance apps on Android, iOS, desktop, and web from a single
codebase. Launched in May 2017, Flutter has quickly become a favorite of developers as it
allows them to customize the apps using slick animations.
It also utilizes the programming language Dart, which can be easily understood by Java
developers. Flutter also offers many widgets that help in enhancing the look of an app. They
can help developers provide a full native-like app performance to the users — from scrolling
and navigation to changing fonts and icons.

Famous brands or apps using Flutter: Google Ads, Alibaba

Software Development Kit Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 React Native
Developer: Facebook
Written in JavaScript, React Native is one of the best mobile app development tools for
creating apps for both Android and iOS. It interprets the source code and converts it into
native elements in a shorter time frame.
It takes up little space in memory. React Native simplifies the app development process and
ensures that businesses can launch an app on both platforms promptly without
compromising quality.
Introduced by Facebook in March 2015, React Native is preferred by a whopping 42% of
developers for developing apps. It enables them to write modules in various native languages
such as Java, Swift, C++, Objective, and Python.
React Native is the perfect choice for startups, small-sized businesses, and even large
enterprises.

Famous brands using React Native: Facebook, Walmart, Uber Eats, Skype, and Instagram
Software Development Kit Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/
 NativeScript
Original author(s) : Telerik by Progress.

NativeScript is an open-source framework to develop mobile apps on the Apple iOS and
Android platforms. It was originally conceived and developed by Progress.
At the end of 2019 responsibility for the NativeScript project was taken over by long-time
Progress partner, nStudio. In December 2020 nStudio also oversaw the induction of
NativeScript into OpenJS Foundation as an Incubating Project.
NativeScript apps are built using JavaScript, or by using any programming language that
transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue
JavaScript frameworks.
Mobile applications built with NativeScript result in fully native apps, which use the same APIs
as if they were developed in Xcode or Android Studio. Additionally, software developers can
re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile
applications without the need for wrappers
Software Development Kit Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/
 Apache Cordova
Original author(s) : Joe Bowser, Michael Brooks, and co

If you are looking to create an app in real-time with the best features available, use Cordova!
It allows software programmers to build hybrid web applications for mobile devices Cordova
utilizes CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those
used in Android, iOS, or Windows.
That means you can build more compelling applications by using the properties of Native app
functionalities and features, including compass, contacts, phone camera, accelerometer,
geolocation, notifications, and networks.
Cordova also uses CSS, HTML, and JavaScript codebases depending upon the operating
platform and deploy standard web technologies and plugins to make apps as efficiently and
quickly as possible. This makes it cost-effective since it leverages multiple features during the
development process in real-time.
Famous brands using Apache Cordova: Walmart, Teleport, Hogangnono

Software Development Kit Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 Ionic
Developer: Drifty

Free and open-source, Ionic is a mobile UI toolkit that is used for building high-quality and cross-
platform native and web applications that run everywhere with JavaScript.
Ionic has a potent HTML5 SDK that allows you to develop mobile apps by utilizing advanced
technologies such as HTML, CSS, and Javascript. This SDK mainly focuses on delivering the highest-
quality UI interactions of the applications.
The cross-platform development tool provides pre-designed components, interactive paradigms, and
attractive themes. It is also easy to use, and it makes use of APIs such as Virtual DOM, async, JSX, and
TypeScript that are best suited for Progressive Web Apps.
If you want to develop highly interactive and engaging apps in a shorter period, do not hesitate to
leverage the brilliant library of mobile-optimized and reusable UI components, tools, and gestures
provided by Iconic.
Another fantastic feature of this tool is its massive community support, which helps Iconic developers
to do their job in the best possible way.
Famous brands using Iconic: McDonald's, NationWide, ChefSteps, Pacifica, Market Watch

Software Development Kit Image Source: https://www.21twelveinteractive.com/flutter-vs-react-native-vs-ionic-vs-nativescript/

 05

Dart & Flutter

App Development
Flutter is a cross-platform development toolkit created by
Google used to create applications on Android and iOS
devices. The code for Flutter is written in Dart, which was
originally created by Google as a replacement for JavaScript.
Image Source: https://swansoftwaresolutions.com/wp-content/uploads/2019/10/What-Do-We-Think-of-
Google%E2%80%99s-New-Framework-Flutter-1.jpg
IDE Support
 Setup Dart SDK
• To install Dart SDK first you visit- https://dart.dev
Install Dart SDK
 Install Android Studio
• https://developer.android.com/studio
 Install Visual Studio Code
• https://code.visualstudio.com/
 Open Dartpad
• https://dartpad.dev
 Dart Programming
• Dart is a main programming language to develop cross platform mobile application using
flutter framework
• Dart has a declarative and programmable layout that is easy to read and visualize. Hence,
Flutter doesn't require a separate declarative layout language like XML. It is easy for
Flutter to provide advanced tooling since all the layout in one language and in a central
place
• Dart is a programming language used by flutter, flutter is used to create cross-platform
apps (for android & ios). If your plan is to only create apps for android only you should
definitely go with java, it will run and look better in almost every way.
 What is the advantage of Dart?
• Dart is an interesting programming language with features to facilitate Web, mobile and
command line apps. Its major advantages are its stability and ease of learning. In the case
of Web applications, the combination with AngularDart makes it a very powerful tool.
• There are four reasons:
• Dart enforces object-oriented programming
• Dart compilers are quick and reliable
• Dart has a clean and type-safe syntax
• Dart has a strong developer community
Dart Programming Features
 Flutter Download

• https://docs.flutter.dev/get-started/install
 Key Points to Remember
• Everything in Dart is treated as an object including, numbers, Boolean, function, etc. like
Python. All objects inherit from the Object class.
• Dart tools can report two types of problems while coding, warnings and errors. Warnings
are the indication that your code may have some problem, but it doesn't interrupt the
code's execution, whereas error can prevent the execution of code.
• Dart supports generic types, like List<int>(a list of integers) or List<dynamic> (a list of
objects of any type).
Flutter Architecture
Flow Statement
 06

Flutter State
Flutter UI is function of state

Image Source: https://swansoftwaresolutions.com/wp-content/uploads/2019/10/What-Do-We-Think-of-

Google%E2%80%99s-New-Framework-Flutter-1.jpg
Flutter - State
 Key Points to Remember
• Widgets are immutable – they get destroyed and replaced by new ones.
• Dart’s functions are first class objects, so you can pass callbacks around.

@override
Widget build(BuildContext context) {
return SomeWidget(
// Construct the widget, passing it a reference to the method above.
MyListItem(myTapCallback),
);
}

void myTapCallback(Item item) {

print('user tapped on $item');
}
Everything is a Widget
Everything is a Widget
Everything is a Widget
Everything is a Widget
Layout
Dialog, Alerts, and Panels
 Key Points to Remember
• State - data needed to rebuild UI at any moment in time
• Ephemeral state - state contained in a single widget
• setState()
• App state – state shared across many parts of app (sometimes also called shared state)
• Package “provider”
• Keep the state above the widgets that use it (lifting state up)
 Key Points to Remember
• State - data needed to rebuild UI at any moment in time
• Ephemeral state - state contained in a single widget
• setState()
• App state – state shared across many parts of app (sometimes also called shared state)
• Package “provider”
• Keep the state above the widgets that use it (lifting state up)
 CONCLUSION
Cross-platform development used to be a
low-cost yet poor quality compromise
solution that only startups with no initial
investment would choose. However, these
times are over.

Image Source: https://blog.adengage.in/wp-content/uploads/2020/10/business-insights-analytics-455.png

References
• https://www.intuz.com/blog/cross-platform-development-tools
• https://clockwise.software/blog/cross-platform-app-development/