Flutter Fundamentals

Flutter builds user interfaces from widgets — small, composable pieces of UI described in Dart. It draws every pixel itself, so an app looks and behaves the same on Android, iOS, web, and desktop.

Install Flutter (docs.flutter.dev), then create and run an app:

flutter create hello_flutter
cd hello_flutter
flutter run

A first app

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(colorSchemeSeed: Colors.indigo),
      home: const GreetingPage(name: 'Ada'),
    );
  }
}

class GreetingPage extends StatelessWidget {
  const GreetingPage({super.key, required this.name});

  final String name;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Welcome')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.waving_hand, size: 48),
            const SizedBox(height: 12),
            Text('Hello, $name!', style: Theme.of(context).textTheme.headlineMedium),
          ],
        ),
      ),
    );
  }
}

• runApp starts the app with a root widget.
• A StatelessWidget has a build method that returns other widgets. It has no changing data of its own.
• Widgets are configured with named parameters (title:, child:, children:) — everything you learned about constructors applies.
• MaterialApp and Scaffold provide Material Design structure: theme, app bar, and page body.
• Layout is itself done with widgets: Center, Column, Row, Padding, SizedBox, Expanded, Stack.
• const constructors let Flutter reuse widgets that never change, skipping work when the screen rebuilds.

The widget tree

An app is a tree of widgets: MaterialApp → Scaffold → Center → Column → Icon, Text... When data changes, Flutter calls build again and efficiently updates only what changed on screen. Because build can run often — even every frame during an animation — keep it fast and free of side effects: no network calls or heavy work inside it.

Hot reload

With the app running, change the greeting text and save. Hot reload injects the new code into the running app in about a second, keeping its current state — the fastest way to build and tweak interfaces.

Accessibility comes built in

Standard widgets work with screen readers (TalkBack, VoiceOver), respect the user's text size, and support dark themes. Add semanticLabel or a Semantics widget for icons and images that convey meaning.