Introduction to Flutter

What is Flutter?

Flutter is Google's open-source UI framework for building natively compiled applications for mobile (iOS, Android), web, and desktop from a single Dart codebase. Unlike React Native (which bridges to native components), Flutter draws its own pixels using the Skia/Impeller rendering engine — making it extremely performant and visually consistent across platforms.

Flutter Architecture

• Dart Layer: Your app code + Flutter framework (widgets, animation, gestures)
• Engine Layer: C++ rendering engine (Skia/Impeller), text layout, Dart runtime
• Embedder Layer: Platform-specific shell (iOS, Android, Windows, Linux, macOS, web)

Setup and Installation

# 1. Install Flutter SDK from flutter.dev
# 2. Add to PATH
export PATH="$PATH:/path/to/flutter/bin"

# 3. Check setup
flutter doctor

# 4. Create a new Flutter app
flutter create my_app
cd my_app

# 5. Run the app
flutter run

First Flutter App

// lib/main.dart
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',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hello Flutter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Welcome to Flutter!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => print('Button pressed!'),
              child: const Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Everything is a Widget

In Flutter, every UI element is a Widget — from the entire screen (Scaffold) to a single pixel of padding. Widgets are immutable descriptions of the UI. Flutter rebuilds widgets when state changes.

• StatelessWidget: Immutable widget — UI depends only on constructor parameters
• StatefulWidget: Mutable widget — has a State object that can change over time
• InheritedWidget: Passes data down the widget tree (basis of Provider, etc.)

// Common layout widgets:
// Column, Row, Stack — arrange children
// Container — box with padding, margin, decoration
// Expanded, Flexible — fill available space
// ListView, GridView — scrollable lists
// Padding, Center, Align — positioning
// Text, Image, Icon, Button — content

🧠 Quiz

Summary

Flutter is a cross-platform UI framework built on Dart. It renders its own pixels for consistent performance. Every UI element is a widget — either StatelessWidget (fixed) or StatefulWidget (dynamic). Start with flutter create, and use MaterialApp + Scaffold as the app skeleton. Your Dart knowledge transfers directly — Flutter is pure Dart.