Module 00: What Is Flutter?

Welcome to Flutter

Imagine you want to build an app. Not just a phone app — you want it on Android, iOS, the web, and maybe even desktop. Traditionally, that meant learning Swift for iOS, Kotlin for Android, React for the web, and maybe Electron for desktop. Four codebases. Four languages. Four sets of bugs to track down.

Flutter says: nah, let's just write it once.

Flutter vs. React Native — The Quick Version

You've probably heard of React Native. Both Flutter and React Native solve the same problem (cross-platform development), but they take fundamentally different approaches:

The key difference: React Native translates your components into native platform widgets (so a button is an Android button or an iOS button). Flutter draws every single pixel itself using its own rendering engine. This means your app looks exactly the same on every platform — no surprises.

The Rendering Engine: Skia and Impeller

Under the hood, Flutter uses a graphics engine to paint your UI directly onto a canvas — bypassing the platform's native widget system entirely.

• Skia is the original engine (same one Chrome uses to render web pages)
• Impeller is Flutter's newer engine, purpose-built for Flutter, with pre-compiled shaders that eliminate the "jank" you sometimes see on first animations

You don't need to interact with either engine directly. Just know that when you write a Container widget with a blue background, Flutter is literally painting blue pixels on a canvas. It's more like a game engine than a traditional app framework.

Meet Dart

Flutter apps are written in Dart, a language Google created. If you've used Java, JavaScript, C#, or Swift, Dart will feel immediately familiar.

void main() {
  var name = 'Campbell';
  print('Hello, $name! Welcome to Flutter.');
}

Why Dart and not JavaScript or Kotlin? A few reasons:

1. Hot reload — Dart supports both JIT (just-in-time) and AOT (ahead-of-time) compilation. JIT gives you instant hot reload during development. AOT gives you fast native code in production.
2. No bridge — Dart compiles directly to native ARM code. No JavaScript bridge means better performance.
3. Built for UI — Dart has features like async/await, spread operators, and collection if/for that make building UIs elegant.

We'll spend a few days learning Dart properly before diving deep into Flutter widgets. For now, just know: Dart is your new best friend.

The Widget Tree

Everything in Flutter is a widget. The button? A widget. The text? A widget. The padding around the text? Also a widget. The entire screen? A widget made of other widgets.

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('My First App'),
    ),
    body: Center(
      child: Text('Hello, Campbell!'),
    ),
  ),
)

This nesting of widgets forms a tree — the widget tree. It looks like this:

MaterialApp
  └── Scaffold
        ├── AppBar
        │     └── Text('My First App')
        └── Center
              └── Text('Hello, Campbell!')

This is the single most important concept in Flutter: composition. You build complex UIs by snapping simple widgets together like LEGO bricks.

Installing Flutter

The Flutter CLI

Flutter comes with a powerful command-line tool. Here are the commands you'll use constantly:

Step 1: Install Flutter SDK

Follow the official install guide for your OS at flutter.dev/docs/get-started/install. The process is:

1. Download the Flutter SDK
2. Extract it and add flutter/bin to your PATH
3. Run flutter doctor to verify

Step 2: Run flutter doctor

$ flutter doctor

You'll see something like:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

Every checkmark means that component is ready. An [✗] means something needs fixing — and flutter doctor will tell you exactly what to do.

Your First Flutter Project

Creating the Project

$ flutter create hello_flutter
$ cd hello_flutter

This generates a complete project. Let's look at the structure:

hello_flutter/
  ├── lib/
  │     └── main.dart          ← Your app code lives here
  ├── test/
  │     └── widget_test.dart   ← Tests go here
  ├── android/                 ← Android-specific config
  ├── ios/                     ← iOS-specific config
  ├── web/                     ← Web-specific config
  ├── linux/                   ← Linux desktop config
  ├── macos/                   ← macOS desktop config
  ├── windows/                 ← Windows desktop config
  ├── pubspec.yaml             ← Dependencies and metadata
  └── pubspec.lock             ← Locked dependency versions

The Two Files That Matter Most

lib/main.dart — This is where your app starts. Every Flutter app has a main() function that calls runApp():

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello Flutter'),
        ),
        body: const Center(
          child: Text('Hello, Campbell!'),
        ),
      ),
    );
  }
}

pubspec.yaml — This is your project's configuration file (like package.json in Node.js). It declares your app's name, version, dependencies, and assets:

name: hello_flutter
description: My first Flutter app
version: 1.0.0

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

Hot Reload: The Magic Trick

This is the feature that makes Flutter developers grin. Hot reload lets you change your code and see the result in under a second — without losing your app's current state.

Here's the workflow:

1. Run your app with flutter run
2. Change some code (e.g., change 'Hello, Campbell!' to 'Flutter is amazing!')
3. Save the file
4. Press r in the terminal (or just save in VS Code with the Flutter extension)
5. Watch the change appear instantly

Hot Reload vs. Hot Restart

• Hot reload (r) — Injects changed code, preserves state. Sub-second.
• Hot restart (R) — Restarts the app from scratch, resets state. A few seconds.

Most of the time, hot reload is all you need. You'll only need hot restart when you change things like the main() function or static fields.

There Are No Dumb Questions

Q: Do I need a Mac to build Flutter apps? A: You need a Mac to build iOS apps (Apple's requirement, not Flutter's). But you can build Android, web, Linux, and Windows apps on any OS. For this course, we'll primarily target Android and web, so you're fine on any machine.

Q: Is Dart hard to learn if I know JavaScript? A: Not at all. Dart is strongly typed (which actually helps catch bugs), but it has type inference so you don't have to write types everywhere. If you can read JavaScript, you can read Dart. The main differences are: Dart uses final instead of const for immutable variables, has proper null safety, and uses classes more heavily.

Q: Why does Flutter draw its own pixels instead of using native widgets? A: Control and consistency. When you use native widgets, your app looks different on every platform and every OS version. Flutter's approach means your app looks exactly the same everywhere. You also get access to advanced animations and custom designs that would be difficult or impossible with native widgets.

Q: What's the deal with all those platform folders (android/, ios/, web/)? A: Those contain platform-specific configuration. You rarely edit them directly. They're generated by flutter create and handle things like app icons, permissions, and native build settings. Your actual app code stays in lib/.

Sharpen Your Pencil

Exercise 1: Install Flutter

1. Install the Flutter SDK following the guide at flutter.dev/docs/get-started/install
2. Run flutter doctor and make sure you get all green checkmarks (or at least Flutter, Chrome, and one editor)
3. Take a screenshot of your flutter doctor output

Exercise 2: Create Your First Project

1. Run flutter create hello_campbell
2. Open the project in VS Code
3. Explore the file structure — open lib/main.dart and pubspec.yaml
4. Read through main.dart line by line and write a comment above each widget explaining what you think it does

Exercise 3: Run and Hot Reload

1. Run the app with flutter run -d chrome (for web) or flutter run (for a connected device)
2. Find the Text widget that displays the counter number
3. Change the text 'You have pushed the button this many times:' to something funnier
4. Save and watch hot reload update instantly
5. Now change the floatingActionButton's color by wrapping it or changing the theme
6. Try both r (hot reload) and R (hot restart) — notice the difference with the counter value

Exercise 4: Explore the Counter App

The default Flutter app is a counter. Study it and answer these questions in a comment at the top of main.dart:

1. What function is called when the app starts?
2. What widget is the root of the widget tree?
3. Where is the counter value stored?
4. What method gets called when the floating action button is pressed?
5. What does setState() do?

📝 Module Quiz

Test what you learned. 45 seconds per question. Passing score is set per module. Your best attempt is saved in your browser so you can track progress -- nothing is sent to a server.

What's Next?

Before we can build real Flutter UIs, we need to get comfortable with Dart. The next three modules dive into the Dart language — variables, functions, classes, and async programming. Think of it as sharpening your tools before building the house.

See you in Module 01!