Module 1: Flutter Foundations

Why Flutter and Dart

Building separate Android and iOS apps traditionally means two codebases, two languages and often two teams. For a small business or startup, that doubles cost and slows every change. Flutter, an open-source toolkit created by Google, lets you build apps for Android, iOS, the web and desktop from one codebase written in the Dart language. Understanding how it works, and where it fits or does not, helps you choose it for the right reasons.

How Flutter works

Most cross-platform approaches either wrap a web page or translate your code into each platform's native buttons and lists. Flutter takes a different route: it draws every pixel of the interface itself using its own rendering engine, and compiles your Dart code to native machine code for release builds. The consequences:

• Consistent look and behaviour across platforms, because the same widgets are drawn the same way everywhere.
• Good performance for most app types, since release builds are compiled ahead of time.
• Full control over design, including custom animations and branded components.
• Platform features such as the camera, location or payments are accessed through plugins, packages that bridge to native Android and iOS code. Most common needs are covered by maintained packages on pub.dev, Dart's package repository.

Why Dart

Dart is a modern, typed, object-oriented language. If you know JavaScript, Java, Kotlin or C#, it will feel familiar. Two features make it especially good for Flutter:

• Hot reload: during development Dart runs in a mode that can inject changed code into the running app in about a second, keeping the current state. You change a colour or a layout and see it instantly, without restarting.
• Sound null safety: the type system distinguishes values that can be null from those that cannot, catching a common class of crashes at compile time.

Setting up

1. Install the Flutter SDK following the official installation guide on flutter.dev for your operating system.
2. Install Android Studio (for the Android SDK and emulator) and, on a Mac, Xcode for iOS builds.
3. Install an editor: VS Code with the Flutter extension, or Android Studio with the Flutter plugin.
4. Run flutter doctor in a terminal. It checks your setup and lists anything missing, such as Android licences to accept.

Worked example: your first app and hot reload

flutter create duka_app
cd duka_app
flutter run

The template is a counter app. Open lib/main.dart and replace it with this minimal app:

import 'package:flutter/material.dart';

void main() {
  runApp(const DukaApp());
}

class DukaApp extends StatelessWidget {
  const DukaApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duka App',
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: Scaffold(
        appBar: AppBar(title: const Text('Duka App')),
        body: const Center(
          child: Text('Karibu! Your shop, in your pocket.'),
        ),
      ),
    );
  }
}

With the app running, change the seed colour to Colors.deepOrange and save. The app updates almost instantly: that is hot reload. If you change something that runs only once at start, such as code in main(), use hot restart (capital R in the terminal, or the restart button in your editor), which restarts the app quickly but resets state.

Where Flutter fits, and where it may not

Flutter apps can also include native code where needed, so the choice is not all or nothing.

Common mistakes to avoid

• Skipping flutter doctor. Many confusing build errors are setup problems it would have reported.
• Expecting hot reload to apply every change. Changes to main(), global initialisers or native files need a hot restart or full rebuild.
• Adding packages without checking them. On pub.dev, look at the publisher, recent updates, platform support and popularity before depending on a package.
• Assuming you can build iOS apps on Windows. iOS builds and App Store uploads require a Mac with Xcode.