MOBILE PROGRAMMING-Week 1: Introduction to Flutter and Widgets, Slides of Programming Languages

Download MOBILE PROGRAMMING-Week 1: Introduction to Flutter and Widgets and more Slides Programming Languages in PDF only on Docsity!

Week 1 : Introduction to Flutter and Widgets Assist. Prof. Dr. Wisam ELMASRY

Engineering Faculty

Software Engineering Department

2025 / 2026 Spring Semester

SEN 0412 MOBILE PROGRAMMING I

Flutter

What is Flutter?

 Flutter is Google’s portable UI framework

for building modern, native, and reactive

applications for iOS and Android

platforms.

 Flutter is a set of tooling that allows us to

create beautiful apps that run on iOS,

Android, the Web, and desktop.

 Flutter = Cross-Platform Application

Development (CPAD).

Flutter Advantages  Free.  Open source.  Backed by and originated at Google.  Being enhanced and maintained by a team of developers at Google and hundreds of non- Google contributors around the globe.  Widely-used across the world.  Robust because it compiles to truly native apps.  Written one place and compiled to a web app for billions of browsers, an iOS app for iPhones and iPads, and an Android app for all of the rest of the phones and tablets out there. 5

The Flutter SDK

 The Flutter Software Development Kit

(SDK) is the only indispensable tool.

 It includes the Flutter compiler, project

creator, device manager, test runner, and

tools that diagnose – and even correct –

problems with the Flutter configuration.

The Flutter IDEs  Flutter can be written using any editor and then compiled and run using the flutter SDK that you installed earlier.  But it is very hard to do that.  The solution is to use an Integrated Development Environment (IDE).  You can use one of the following IDEs: ◦ Microsoft Visual Studio Code (VS Code) ◦ Android Studio ◦ InetlliJ 8

Installing Flutter on Windows  You can find in detail all steps of installing Flutter in your computer on https://docs.flutter.dev/install/quick?gl= 1 % 2 Ahpjouy% 2 A_ga% 2 AMTQ 1 OTczMzkzNC 4 x NzcxMzUxMjU 0 % 2 A_ga 04 YGWK 0175 % 2 AczE 3 NzEzNTEyNTUkbzEkZzEkdDE 3 NzEz NTEzNDAkajYwJGwwJGgw  It consists of four major phases: ◦ Installing Flutter SDK. ◦ Installing Android Studio. ◦ Installing Android Emulator. ◦ Installing Flutter and Dart Plug-in. 10

Widgets

What are Flutter Widgets?  In Flutter Application, there are two parts: ◦ Behavioral: What the software does. All of the business logic goes here: the data reading, writing and processing (Dart). ◦ Presentation or User Interface (UI): How the software looks. The user interface: the buttons, textboxes, labels (Widgets).  Widgets are the building blocks of a Flutter app, and each widget is an immutable declaration of the user interface. In other words, widgets are configurations (instructions) for different parts of the UI. 13

Flutter Widgets Examples

Types of Widgets

 Two main types:

◦ Stateless Widgets: is built based on its own configuration and does not change dynamically. For example, the screen displays an image with a description and will not change. ◦ Stateful Widgets: is built based on its own configuration but can change dynamically. For example, the screen displays an icon with a description, but values can change based on the user’s interaction, like choosing a different icon or description. 16

Stateless Widgets life cycle

 It is declared with one class

( StatelessWidget).

17

Stateful Widgets (Cont.)

Widget Tree

 After finishing the application

development using Flutter widgets, a

widget tree will be constructed.

 Top-down tree in Parent-Child

presentation.