Mahmoud Abas, Full-Stack Software Engineer & AI

Operating Systems 2 - Lab: Introduction to Flutter Development

In the print dialog, choose "Save as PDF" as the destination.

Operating Systems 2 - Lab 2

Introduction to Flutter Development

Native vs Hybrid vs Cross-Platform, and writing your first Flutter app

Why Learn Flutter

Flutter builds high-quality iOS and Android apps from one codebase, backed long-term by Google
The job market is trending toward technologies that enable rapid multi-platform development
Flutter apps can look and perform like native apps, sometimes with more UI consistency
A solid grounding in Object-Oriented Programming is expected before going deep into Flutter

Native Development

App Code

Direct Access

OEM Widgets

Mechanism: separate apps built with each platform's own SDK, Java/Kotlin for Android, Swift/Obj-C for iOS
Pros: best possible performance, immediate access to the newest device features
Cons: expensive and slow, two codebases to build and maintain in parallel

Hybrid Development

Web App Code

Runs In

WebView

Bridge

Native Features

Mechanism: HTML/CSS/JS wrapped in a WebView; the app is effectively a website in a native shell
A bridge layer lets the web code talk to native hardware, like Bluetooth
Pros: one codebase reused across platforms
Cons: weaker performance, harder debugging, and dependence on plugins for native features, new OS features must wait for a plugin

Cross-Platform: Flutter's Approach

Dart Code

Compiled

Flutter Engine

Draws Pixels

System Canvas

Flutter skips both native widgets and WebViews, it asks the OS for a blank canvas and draws every pixel itself with its own rendering engine
Written in Dart, which compiles to native machine code
Delivers 60 FPS performance and a UI that looks identical across devices
Hot Reload shows code changes almost instantly, without restarting the app

Course Methodology: Four Pillars

User Interface (UI)

Building the visual layout

State Management

Handling data changes and app state efficiently

Networking

Connecting to APIs and server data

Animation

Adding visual polish to the experience

Project Setup

Open Android Studio, choose Start a new Flutter project → Flutter Application
Project name must be lowercase, e.g. test_app
Company domain generates the package name, e.g. com.example.myapp
Click Finish and wait for the project to index
Run on an Android Emulator, iOS Simulator, or a web browser, Hot Reload keeps state between edits

Your First Flutter App

Every app starts at main(), which calls runApp()
MaterialApp is typically the root widget, providing material design styling
Center positions its child in the middle of the screen; Container styles size and color

dart

void main() {
  runApp(
    MaterialApp(
      home: Center(
        child: Container(
          color: Colors.red,
          width: 40.0,
          height: 40.0,
          child: Text('Hi'),
        ),
      ),
    ),
  );
}

Troubleshooting Tip

Lab Task

Create a new Flutter project named lab_one_intro
Replace the default counter app with a MaterialApp
Use Center to position a Container in the middle of the screen
Set the container's color to blue, sized 100.0 by 100.0
Add a child Text widget showing your initials

Key Takeaways

Native gives best performance but doubles development cost; Hybrid reuses code but sacrifices performance
Flutter draws its own pixels via a system canvas instead of using WebViews or native widgets, that's the source of its speed and consistency
Dart compiles to native code, and Hot Reload makes iteration nearly instant
The course is organized around four pillars: UI, State Management, Networking, Animation
A Flutter app always starts with main() calling runApp(), typically rooted in MaterialApp

Open this lesson

Mahmoud AbasLab: Introduction to Flutter Development

void main() { runApp( MaterialApp( home: Center( child: Container( color: Colors.red, width: 40.0, height: 40.0, child: Text('Hi'), ), ), ), ); }