Lecture 1

Introduction to Mobile App Development

(2023/5/14)
Outline

1.1 Introduction to Mobile App Development

1.2 Introduction to Dart
1.3 Overview of Flutter

2
1.1 Introduction to Mobile App Development
 Mobile app development:- is the process of creating software applications that
run on mobile devices, such as smartphones and tablets.

 The goal of mobile app development:- is to provide users with an engaging

and intuitive experience that takes advantage of the unique capabilities of mobile
devices, such as touchscreens, cameras, and location services.

 Five-stage of Mobile app development:

 Planning: This stage involves defining the app's purpose, target
audience, features, and functionality.
 Design: This stage involves creating mockups and user interface
designs that will guide the development process.
 Development: This stage involves coding the app using a programming
language, such as Java or Swift, and integrating features like databases,
APIs, and third-party libraries.
 Testing: This stage involves testing the app for bugs, usability, and
performance.
 Deployment: This stage involves publishing the app to app stores, such
as the Apple App Store or Google Play Store, and making it available
for download to users.

3
Revenue of mobile app development:

 Tools and frameworks of Mobile App:- native development, hybrid

development, and cross-platform development.
Native development: involves building apps for a specific platform,
such as iOS or Android, using the platform's native programming
language and development tools.
Hybrid development: involves building apps using web technologies,

4
such as HTML, CSS, and JavaScript, and wrapping them in a native app
shell.
Cross-platform development: involves using a single codebase to
build apps that can run on multiple platforms, such as iOS and Android.

5
1.2 Introduction to Dart

 What is dart?

Dart is an object-oriented, class-based programming language that is developed by

Google.

It was first announced in 2011 and was designed to be used for web and mobile
development.

Dart is a garbage-collected language, which means that developers don't have to worry
about memory management.

Dart is used primarily for building web and mobile applications, but it can also be used
for server-side development and command-line scripting.

It comes with a comprehensive set of libraries and tools, including a virtual machine, a
compiler, and an integrated development environment (IDE) called DartPad.

Dart supports for both just-in-time (JIT) and ahead-of-time (AOT) compilation, which
allows developers to choose between fast development and fast execution.

6
Dart also has support for asynchronous programming, which makes it easier to write
concurrent code that can handle multiple tasks at once.

JIT stands for "just-in-time" and refers to a type of compiler that compiles code at
runtime, just before it is executed. In contrast to ahead-of-time (AOT) compilation, which
compiles code before it is run, JIT compilation can provide faster development cycles and
more flexibility in how code is executed.

JIT compilation is particularly useful for dynamic languages like Dart, which allow for
late binding and other runtime behaviors. By compiling code at runtime, the JIT compiler
can take advantage of runtime information to optimize the code and make it run faster.

One downside of JIT compilation is that it can introduce some overhead, as the
compilation process itself takes time and resources. However, this overhead is typically
outweighed by the benefits of faster development cycles and more efficient code
execution.
Dart Examples:
1) Hello world dart:
1. void main() {
2. print('Hello World!');
3. }

Output:
Hello World!

7
2) Conditional statements:
1. enum Day { sun, mon, tues }
2.
3. void main() {
4. print('1. IF and Do While');
5. print(' ===============');
6. bool football = true;
7. //input(football);
8. if (football) {
9. print('\tDo FOOTBALL');
10. } else {
11. print('Do Sport!');
12. }
13. int c = 0;
14. do {
15. c++;
16. print('\tPlayer$c --> Do FOOTBALL');
17. } while (football && c <= 5);
18.
19. print('2. Switch st.');
20. print(' ==========');
21. int myValue = 2;
22. //Char ch = pick('Enter v = (1,2) ');
23. switch (myValue) {
24. case 1:
25. print("\tSaterday");
26. break;
27. case 2:
28. print('\tSunday');
29. break;
30. }
31. print('3. Enum (grouping of constant values):-');
32. print('====');
33. List<Day> DOW = Day.values;
34. print('\t${DOW[0]}');
35. for (int i = 0; i < Day.values.length; i++) {
36. print('\tDay[0]: ${Day.values[i]}');
37. }
38. }

Output:
1. IF and Do While:-
============

8
 Do FOOTBALL
Player1 --> Do FOOTBALL
Player2 --> Do FOOTBALL
Player3 --> Do FOOTBALL
Player4 --> Do FOOTBALL
Player5 --> Do FOOTBALL
Player6 --> Do FOOTBALL
2. Switch st.:-
=======
Sunday
3. Enum (grouping of constant values):-
===========================
Day.sun
Day[0]: Day.sun
Day[1]: Day.mon
Day[2]: Day.tues

3) Using functions:

1. import 'dart:math'; // Importing a package

2. void main() {
3. print('1. simple function:-');
4. print(' ===============');
5. getCurrentDateaTime(-7);
6. print('2. Anonymous function:-');
7. print(' ==================');
8. int val = 9;
9. print('\t val = $val');
10. double intSquare(val) => sqrt(val); //val * val;
11. num intCube(val) => pow(val, 3); //val * val * val;
12. print('\tsquare is ${intSquare(val)}');
13. print('\tcube is ${intCube(val)}');
14. print('Rand($val) = ${Random().nextInt(val)}');
15. }

16. void getCurrentDateaTime(int hourdiff) {

17. var timeNow = DateTime.now();
18. var timeDifference = timeNow.add(Duration(hours:
hourdiff));
19. print('\tLondon: $timeNow');
20. print('\tNew York: $timeDifference');
21. }

9
 Output:
1. simple function:-
===============
London: 2023-05-22 13:23:36.579201
New York: 2023-05-22 06:23:36.579201
2. Anonymous function:-
==================
val = 9
square is 3.0
cube is 729
Rand(9) = 1

4) Null variable:
1. int? value;
2. void main() {
3. int count = 0;
4. while (true) {
5. increment(value);
6. count++;
7. if (count >= 9) break;
8. }
9. }

10. void increment(int? d) {

11. d = d ?? 0;
12. value = d + 1;
13. print(value);
14. }

1.3 Overview of Flutter

 What is Flutter?

According to Flutter’s official site, “Flutter is Google’s UI toolkit for building beautiful,
natively compiled applications for mobile, web, and desktop from a single codebase.”

In other words, it is a free and open-source mobile user interface framework that Google
created and released in May 2017.

Flutter is an UI toolkit for building natively compiled applications for mobile, desktop
and web with a single codebase.

10
  Which IDE/editor should you choose?

You can download VS Code from https://code.visualstudio.com

- Install the flutter extentions in vs code:
o Dart-Code.dart-code : Dart language support and debugger for Visual
Studio Code.

o Dart-Code.flutter: Flutter support and debugger for Visual Studio Code.

o Flutter-Snippets : Supercharge your Flutter workflow with handy

Snippets for VS Code

 Hello world Flutter app

You can create and run Flutter apps offline in either one of the following:

in command line CMD:

 flutter create –offline helloflutter
 cd helloflutter
 flutter devices
You have several options for your target:
• Connecting a device to your computer
• Starting an emulator/simulator
• Running the app on a Chrome or Edge web browser
• Running the app on your desktop
 flutter run -d [your_device_name]

in VS Code:

 Ctrl+, to open the VS Code Settings

11
  Search for offline and Enable the Dart: Offline

 Ctrl+Shift+P to open the Command Pallet

 Click on Flutter New Project

 Click on Application

 Click on the button: Select a folder to create the project in

 Enter a name of the flutter project, e.g., flutter_hello_app

This will create flutter application as shown in the VS Code Editor

12
 The output terminal is shown as follows:
[flutter_hello_app] flutter create --offline --template app --overwrite .
Waiting for another flutter command to release the startup lock...
Creating project ....
Running "flutter pub get" in flutter_hello_app...
Resolving dependencies...
+ async 2.10.0 (2.11.0 available)
+ boolean_selector 2.1.1
+ characters 1.2.1
+ clock 1.1.1
+ collection 1.17.0 (1.17.2 available)
+ cupertino_icons 1.0.5
+ fake_async 1.3.1
+ flutter 0.0.0 from sdk flutter
+ flutter_lints 2.0.2
+ flutter_test 0.0.0 from sdk flutter
+ js 0.6.5 (0.6.7 available)
+ lints 2.0.1
+ matcher 0.12.13 (0.12.16 available)
+ material_color_utilities 0.2.0
+ meta 1.8.0 (1.9.1 available)
+ path 1.8.2 (1.8.3 available)
+ sky_engine 0.0.99 from sdk flutter
+ source_span 1.9.1 (1.10.0 available)

13
+ stack_trace 1.11.0 (1.11.1 available)
+ stream_channel 2.1.1 (2.1.2 available)
+ string_scanner 1.2.0
+ term_glyph 1.2.1
+ test_api 0.4.16 (0.6.0 available)
+ vector_math 2.1.4
Changed 24 dependencies!
Wrote 128 files.

All done!

 Select the device to use

 Run your app on one of the available devices

14