How Flutter Works 🏗️

Before we write any code, let's understand what Flutter actually is and how it works. This will help everything else make sense.

What Is Flutter?

Flutter's Architecture — The 3 Layers

Flutter has three layers, each doing a different job. Think of it like a restaurant:

Everything is a Widget

In Flutter, every single thing you see is a Widget. A widget is just a Dart class that describes a piece of your UI.

Two Types of Widgets

Your First Widget — Hello Flutter!

Let's see a real example. Here is the smallest complete Flutter app possible:

// This imports all Flutter UI tools
import 'package:flutter/material.dart';

// main() is where your app starts — just like in other languages
void main() {
  runApp(const MyApp()); // Tell Flutter to run our app
}

// Our app is itself a Widget!
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // build() describes what this widget looks like
  @override
  Widget build(BuildContext context) {
    return MaterialApp(     // Sets up the app shell
      home: Scaffold(       // Provides the basic page structure
        appBar: AppBar(
          title: const Text('👋 My First App'),  // The top bar text
        ),
        body: const Center(   // Centers its child on screen
          child: Text(
            'Hello, GDG Jammu! 🚀',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Breaking It Down — Line by Line

Build Brew Café ☕

Now let's put everything we learned into practice! We'll build a real coffee ordering app together — from absolute zero to a working, beautiful app.

Step 1 — Create the Project

Open your terminal and run:

flutter create brew_cafe
cd brew_cafe
code .

This creates a new Flutter project and opens it in VS Code. You'll see a lib/main.dart file — that's where we start!

Step 2 — Project Structure

Good apps keep code organized. We'll create these folders inside lib/:

lib/
├── main.dart           ← App entry point + theme
├── models/
│   └── coffee.dart     ← Coffee data model
├── screens/
│   ├── home_screen.dart   ← Welcome page
│   └── menu_screen.dart   ← Menu + cart
└── widgets/
    └── coffee_card.dart   ← Reusable card UI

Step 3 — The Coffee Model

A "model" is a Dart class that represents real-world data. Our Coffee model stores everything about a single drink:

// lib/models/coffee.dart
class Coffee {
  final String name;        // e.g. "Espresso"
  final String description; // e.g. "Strong and bold"
  final double price;       // e.g. 3.99
  final String emoji;       // e.g. "☕"

  // 'const' constructor — data that never changes
  const Coffee({
    required this.name,       // 'required' means you MUST provide this
    required this.description,
    required this.price,
    required this.emoji,
  });
}

// Our menu — a list of Coffee objects
final List<Coffee> cafeMenu = [
  const Coffee(name: 'Espresso',   description: 'Strong and bold single shot',      price: 3.99, emoji: '☕'),
  const Coffee(name: 'Cappuccino', description: 'Espresso with steamed milk foam',  price: 4.99, emoji: '🥛'),
  const Coffee(name: 'Latte',      description: 'Smooth espresso with lots of milk',price: 5.49, emoji: '🧋'),
  const Coffee(name: 'Mocha',      description: 'Chocolate meets coffee heaven',    price: 5.99, emoji: '🍫'),
  const Coffee(name: 'Cold Brew',  description: 'Slow-steeped for smooth flavor',   price: 4.49, emoji: '🧊'),
  const Coffee(name: 'Matcha',     description: 'Premium Japanese green tea',       price: 5.99, emoji: '🍵'),
];

Step 4 — The Cart (State Management)

Here's the most important concept in this session: mutable state. The cart changes when users tap "Add" — so we need a StatefulWidget.

class _MenuScreenState extends State<MenuScreen> {
  // Map: coffee name → how many in cart
  // e.g. {'Espresso': 2, 'Latte': 1}
  final Map<String, int> _cart = {};

  // Getter: total number of items
  int get totalItems => _cart.values.fold(0, (sum, n) => sum + n);

  void _addToCart(Coffee coffee) {
    setState(() {
      // If not in cart yet, start at 0, then add 1
      _cart[coffee.name] = (_cart[coffee.name] ?? 0) + 1;
    });
    // setState() ← This is the MAGIC. It tells Flutter:
    //   "Something changed! Rebuild the UI!"
  }
}

Step 5 — Navigation Between Screens

Flutter uses a Navigator (like a stack of pages) to move between screens:

// PUSH — go to a new screen (adds it on top of the stack)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const MenuScreen()),
);

// POP — go back (removes the top screen from the stack)
Navigator.pop(context);

Antigravity for Flutter 🤖

Antigravity is an AI coding assistant built by Google DeepMind. It lives inside your VS Code and understands your entire project — helping you write, debug, and improve Flutter code at incredible speed.

What Can Antigravity Do?

Example Prompts to Try Right Now

During this workshop, try these exact prompts in Antigravity:

Tips for Great Results

🎯 Live Demo: Ask Antigravity to Build a Feature

Let's do this together! We'll ask Antigravity to add a Favorites feature to Brew Café:

Watch Antigravity handle multiple files, new dependencies, state management, and animations — all in one shot!