Lecture 2

Introduction to Flutter

© Dr. Subhi Abdulrahim

Outline

1. Comparing Flutter to existing frameworks

2. Widgets: the main feature of Flutter

3. Flutter simple apps

© Dr. Subhi Abdulrahim 2|P age

1. Comparing Flutter to existing frameworks

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

1.1 Native platforms

The following figure illustrates the native app that interacts with the OS.

1. The widgets are fundamental because they give our app the capabilities to paint
the UI, use the canvas and respond to events such as finger taps.
2. There would be the need to communicate with the native API exposed by the
platform. E.g., using OS-specific APIs, you could ask for the camera service, or
for Bluetooth to send a file.

Kotlin (or Java) for Android

Swift (or Objective-C) for iOS

© Dr. Subhi Abdulrahim 3|P age

 1.2 WebView systems

Cordova-, Ionic-, PhoneGap-, and WebView-based frameworks in general are

good examples of cross-platform frameworks

 They are especially good solutions for frontend developers.

o But these lack in performance, and the app view in these approaches is
composed by a WebView rendering HTML; this means that the app is
basically a website.
1.3 Other cross-platform approaches

Xamarin is the Windows answer to cross-platform development

 React Native could be considered as one of the best of the cross-platform

frameworks
o But it heavily relies on OEM components.

© Dr. Subhi Abdulrahim 4|P age

 1.4 Flutter's approach
You’re free to control the screen and manipulate every single pixel by using the
flutter approach.

Flutter performs much better in comparison to other solutions, because:

 Flutter eliminated the bridge and the OEM platform.
 Flutter uses Widgets Rendering instead to work with the canvas and events.
 Flutter uses Platform Channels to use the services.
 So, to put it simply: code once, and use it everywhere!

2. Widgets: the main feature of Flutter

Everything in Flutter can be created using Widgets.

 Developers just picks up widgets and put them together to create an
application.
 All Widgets are cataloged in the Flutter Widget Catalog.

 [Assignment 1: Study the Widgets in detail from URLs]

[1] Flutter Gems (https://fluttergems.dev/) – A Curated List of Top Dart and Flutter

[2] Flutter Widget Catalog (https://docs.flutter.dev/) – Flutter documentation

© Dr. Subhi Abdulrahim 5|P age

3. Flutter simple apps

Example 1: Simple Text Demo.

1. import 'package:flutter/material.dart';

2. void main() {
3. runApp(const Center(
4. child: Text('‫عرض نص بسيط‬..',
5. textDirection: TextDirection.rtl,
6. style: TextStyle(
7. color: Colors. lightGreenAccent,
8. decoration: TextDecoration.underline,
9. )),
10. ));
11. }

Output:

© Dr. Subhi Abdulrahim 6|P age

Example 2: Simple Demo using Google UI: MaterialApp.
1. import 'package:flutter/material.dart';

2. void main() {
3. runApp(MaterialApp(
4. home: Scaffold(
5. appBar: AppBar(
6. title: const Text('First Flutter App..'),
7. )
8. ),
9. ));
10. }

Output:

© Dr. Subhi Abdulrahim 7|P age

Exercise 1: Fill the blanks into the following lines-code:
a) [Line 10] to remove the Debug flag.
b) [line 15-20] to show the text Hello World! With counter value at the center.
Sol.
1. import 'package:flutter/material.dart';

2. void main() {
3. runApp(const MainApp());
4. }
5. class MainApp extends StatelessWidget {
6. const MainApp({super.key});
7. @override
8. Widget build(BuildContext context) {
9. return const MaterialApp(
10. debugShowCheckedModeBanner: false,
11. home: Scaffold(
12. appBar: AppBar(
13. title: const Text('First Flutter App..'),
14. ),
15. body: Center(
16. child: Text(
17. 'Hello World! $_counter',
18. style:Theme.of(context).textTheme.headlineMedium,
19. ), //Text
20. ), //Center
21. ), //Scaffold
22. ); //MaterialApp
23. }
24. }

© Dr. Subhi Abdulrahim 8|P age

Assignment 1: [ Due two weeks ]
Study the Widgets in detail from the following:

[1] Flutter Gems (https://fluttergems.dev/) – A Curated List of Top Dart and Flutter

[2] Flutter Widget Catalog (https://docs.flutter.dev/) – Flutter documentation

© Dr. Subhi Abdulrahim 9|P age