Eyad Alshareef - Flutter and Dart

Flutter and

EYAD ALSHAREEF
Dart
 2
Introduction

 A mobile application is a software application

designed to run on smartphones, tablet
computers and other mobile devices.

 Users on smartphones typically check the

news, weather, email or their social
networks. They have a choice between the
mobile web version or a specially-created
mobile app.

Eyad Alshareef - Flutter and Dart

 3
Introduction

 In general, creating a mobile application is a very complex and

challenging task. There are many frameworks available, which
provide excellent features to develop mobile applications.
 For developing mobile apps
 Android provides a native framework based on Java and Kotlin language.
 iOS provides a framework based on Objective-C/Swift language.
 Thus, we need two different languages and frameworks to
develop applications for both OS.

Eyad Alshareef - Flutter and Dart

Eyad Alshareef - Flutter and Dart 4
 5
Introduction

 Today, to overcome form this

complexity, there are several
frameworks have introduced
that support both OS along with
desktop apps.

 These types of the framework

are known as cross-platform
development/ Hybrid tools.
- allows developers to create apps that
run similarly on different mobile
platforms.
 6
The cross-platform development

 The Cross-platform
development
framework can write
one code and can
deploy on the various
platform

Eyad Alshareef - Flutter and Dart

 7
The cross-platform development

 It saves a lot of time and development efforts of developers.

 There are several tools available for cross-platform
development
1. Ionic from Drifty Co. in 2013,
2. Xamarin from Microsoft using C# and .Net.
3. React Native (based on JavaScript) form Facebook.
4. (originally named sky) Flutter from Google.

Eyad Alshareef - Flutter and Dart

 8

The cross-
platform
development

Eyad Alshareef - Flutter and Dart

 9
Flutter vs React Native

Eyad Alshareef - Flutter and Dart

 10
What is Flutter

 Flutter (based on dart => backend) is a UI toolkit for building fast,

beautiful, natively compiled applications for mobile, web, and desktop
with one programing language and single codebase.
 Application consists of: UI, code(for functionality)
 Flutter=> Basic building block: widgets.
 React native=> Basic building block: components.
 It is free and open-source. Initially, it was developed from Google and
now manages by an ECMA standard.
 Flutter apps use Dart programming language for creating an app.
Eyad Alshareef - Flutter and Dart
 11
What is Flutter

 The first version of Flutter was announced in the year

2015 at the Dart Developer Summit.
 It was initially known as codename Sky and can run on
the Android OS.
 On December 4, 2018, the first stable version of the
Flutter framework was released, denoting Flutter 1.0.

Eyad Alshareef - Flutter and Dart

 12
What is Flutter

 Flutter apps use Dart programming language for creating

an app.

 We can also use it to build full-featured apps, including

camera, storage, geolocation, network, third-party SDKs,
and more.
 Better performance than React native.

Eyad Alshareef - Flutter and Dart

 13

Flutter
features

Eyad Alshareef - Flutter and Dart

 14
Flutter features

 1. Cross-Platform Development
 Flutter allows you to write code once and deploy it across multiple
platforms, including iOS, Android, web, and desktop. This
significantly reduces development time and effort.

 2. Hot Reload
 One of Flutter’s most popular features is Hot Reload. It allows
developers to see the results of code changes almost instantly
without restarting the app. This speeds up the development
process and makes it easier to experiment with new ideas.
Eyad Alshareef - Flutter and Dart
 15
Flutter features

 3. Rich Widget Library

 Flutter comes with a comprehensive set of pre-
designed widgets that follow both Material
Design (for Android) and Cupertino (for iOS)
guidelines.
 These widgets are highly customizable,
allowing you to create complex UIs with ease.

Eyad Alshareef - Flutter and Dart

 16
Flutter features

 4. Beautiful UIs
 Flutter’s flexible and layered architecture allows you to control every
pixel on the screen.
 This makes it possible to create highly customized and adaptive designs
that look great on any device.

 5. Open Source
 Flutter is open source, which means it’s free to use and has a
transparent development process. You can contribute to its development
or use it to build your own projects without any licensing fees.
 17
Flutter features

 6. Access to Native Features

 Flutter provides plugins to access native device features like
camera, GPS, and storage.
 This allows you to build fully-featured apps that can leverage
the capabilities of the underlying platform.

Eyad Alshareef - Flutter and Dart

 18
Flutter Building Block

 The fundamental building block is the widget.

 Widgets are the basic elements used to
construct the user interface (UI) of a Flutter
application.
 Everythingin Flutter is a widget, from simple
elements like text and buttons to complex
layouts and entire screens

 Layered widgets, they are all related (widget

tree).
 19
Dart

 Dart is a programming language developed by Google

 Learning it isn't hard if you have experience with Java or JavaScript.
You will quickly get it.
 You can use dart pad as an online compiler of Dart
 A client-optimized language for fast apps on any platform

Eyad Alshareef - Flutter and Dart

 20
Dart

 Dart is an
object-oriented,
class-based,
language with
C-style syntax

Eyad Alshareef - Flutter and Dart

 21

Project
IDX from
google

Eyad Alshareef - Flutter and Dart

 22
Project IDX

 Project IDX is a revolutionary AI-assisted

workspace that allows developers to build full-
stack, multiplatform apps directly in the cloud.
 With it we can develop, debug, and test your
applications right from your browser
 Reduce dependency on high-end hardware.

Eyad Alshareef - Flutter and Dart

 23

Project
IDX

Eyad Alshareef - Flutter and Dart

 24
Project IDX- Get Started with Project IDX

1. Sign Up: Create an account on the Project IDX website.

2. Choose a Template: Select from a wide range of templates for web,
mobile, backend, AI/ML, databases, and miscellaneous projects.
3. Set Up Your Project: Follow the guided setup to configure your
project.
4. Develop and Test: Use the in-browser Android Emulator and iOS
Simulator to develop and test your application.
5. Deploy: Once satisfied, deploy your application directly from the
browser.

Eyad Alshareef - Flutter and Dart

 25
Project IDX- Get Started with Project IDX

• In-Browser Emulator:
• One of the standout features of Project IDX is the in-
browser Android Emulator and iOS Simulator. You can
develop, test, and debug your Flutter app on virtual
devices without needing a powerful local machine.

Eyad Alshareef - Flutter and Dart

 26

Eyad Alshareef - Flutter and Dart

 27
Project IDX- Get Started with Project IDX

Run Website in Browser:

• URL and QR Code: Easily
run your application in the
browser and obtain a unique
URL. A QR code is also
generated for quick access,
allowing you to share and
test your app effortlessly
across different devices.

Eyad Alshareef - Flutter and Dart

 28
Project IDX- Get Started with Project IDX

Manage Access:
• Access Management:
Control who can access your
project and collaborate with
team members seamlessly.
Set permissions and
manage access levels to
ensure your project remains
secure and organized.

Eyad Alshareef - Flutter and Dart

 29
DartPad

DartPad supports:
• Writing Dart code, including Flutter code.
• Running Flutter UI code with real-time visual output.
• Sharing code snippets through links.

Eyad Alshareef - Flutter and Dart

 30

Eyad Alshareef - Flutter and Dart