DEV Community: Nayden Gochev

Flutter Widgets Guide — Part 2: Every Other Widget

Nayden Gochev — Tue, 07 Jul 2026 10:16:44 +0000

Flutter Widgets Guide — Part 2: Every Other Widget

This continues https://dev.to/gochev/flutter-core-widgets-part-1-4pdh (the 50 core widgets). This part covers the rest of the widget catalog: advanced layout, Slivers, advanced Material components, animation, gestures, painting, async builders, theming/media, and the full Cupertino (iOS-style) set.

**NOTE: if you are using "Open in DartPad" do not foreget to hit RUN and give it time to load, it takes about 10-15 seconds to load.

9. Advanced Layout & Slivers

LayoutBuilder

Rebuilds based on the parent's constraints — for responsive layouts.

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(
      home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 400) {
              return Container(
                color: Colors.blue,
                child: const Center(child: Text('Wide layout (>400px)', style: TextStyle(color: Colors.white, fontSize: 20))),
              );
            }
            return Container(
              color: Colors.orange,
              child: const Center(child: Text('Narrow layout', style: TextStyle(color: Colors.white, fontSize: 20))),
            );
          },
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Not visible itself — it silently picks which child layout to draw based on available space, e.g. switching from a single column to a two-column layout.

ConstrainedBox

Applies extra min/max size constraints to its child.

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(
      home: Scaffold(
        body: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(minHeight: 100, minWidth: 200),
            child: Container(
              color: Colors.teal,
              child: const Text('At least 100px tall', style: TextStyle(color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The child text sits inside an invisible box that's at least 100px tall, even though the text itself is much shorter — you'd notice the extra space around/below it if the parent highlights bounds.

UnconstrainedBox

Removes constraints imposed on a child, letting it size to its natural size (can overflow).

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(
      home: Scaffold(
        body: Center(
          child: UnconstrainedBox(
            child: Container(width: 500, height: 50, color: Colors.red,
              child: const Center(child: Text('500px wide — overflows!', style: TextStyle(color: Colors.white)))),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A wide red bar that ignores the parent's width limit and can visually overflow/clip beyond the screen edge.

OverflowBox

Lets a child be larger than its parent without triggering overflow warnings/clipping.

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(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 100, height: 50,
            child: OverflowBox(
              maxWidth: 300,
              child: Container(width: 300, height: 50, color: Colors.blue,
                child: const Center(child: Text('300px inside 100px box', style: TextStyle(color: Colors.white)))),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A blue bar that visually extends past its parent's boundary as if the parent weren't there.

IntrinsicHeight / IntrinsicWidth

Sizes a child to match the intrinsic (natural) height/width of its siblings.

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(
      home: Scaffold(
        body: Center(
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(width: 4, color: Colors.blue),
                const SizedBox(width: 8),
                const Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Line one', style: TextStyle(fontSize: 18)),
                    Text('Line two is longer', style: TextStyle(fontSize: 14)),
                    Text('Line three', style: TextStyle(fontSize: 22)),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Two dividers that stretch to exactly match the tallest text/content beside them, rather than being an arbitrary fixed height.

Baseline

Aligns a child based on its text baseline rather than its box edges.

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(
      home: Scaffold(
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
            children: const [
              Text('Small', style: TextStyle(fontSize: 14)),
              SizedBox(width: 8),
              Text('BIG', style: TextStyle(fontSize: 48, color: Colors.blue)),
              SizedBox(width: 8),
              Text('Medium', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Text that sits so its letters' baseline lines up with neighboring text of a different font size, rather than lining up by box top/bottom (subtle — noticeable when mixing font sizes in a row).

Spacer

Fills empty space in a Row/Column, like an invisible Expanded.

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(
      home: Scaffold(
        appBar: AppBar(title: "const Text('Spacer Demo')),"
        body: Column(
          children: [
            Row(children: const [Text('Left'), Spacer(), Text('Right')]),
            const Divider(),
            Row(children: const [Text('A'), Spacer(flex: 1), Text('B'), Spacer(flex: 2), Text('C')]),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: "Left" pinned to the left edge and "Right" pinned to the right edge, with all empty space between them.

Table

Lays out children in a grid with rows/columns, supporting column-width strategies.

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(
      home: Scaffold(
        body: Center(
          child: Table(
            border: TableBorder.all(),
            columnWidths: const {0: FlexColumnWidth(), 1: FlexColumnWidth()},
            children: const [
              TableRow(children: [
                Padding(padding: EdgeInsets.all(8), child: Text('Name', style: TextStyle(fontWeight: FontWeight.bold))),
                Padding(padding: EdgeInsets.all(8), child: Text('Score', style: TextStyle(fontWeight: FontWeight.bold))),
              ]),
              TableRow(children: [
                Padding(padding: EdgeInsets.all(8), child: Text('Alice')),
                Padding(padding: EdgeInsets.all(8), child: Text('95')),
              ]),
              TableRow(children: [
                Padding(padding: EdgeInsets.all(8), child: Text('Bob')),
                Padding(padding: EdgeInsets.all(8), child: Text('87')),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A classic spreadsheet-style grid with thin border lines separating each cell, columns auto-sized to their widest content.

DataTable

A Material-styled data grid with sortable column headers and row selection.

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(
      home: Scaffold(
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: const [
              DataColumn(label: Text('Name')),
              DataColumn(label: Text('Age')),
              DataColumn(label: Text('City')),
            ],
            rows: const [
              DataRow(cells: [DataCell(Text('Ann')), DataCell(Text('29')), DataCell(Text('London'))]),
              DataRow(cells: [DataCell(Text('Bob')), DataCell(Text('34')), DataCell(Text('Paris'))]),
              DataRow(cells: [DataCell(Text('Cal')), DataCell(Text('22')), DataCell(Text('Tokyo'))]),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A clean white table with bold column headers ("Name," "Age"), light divider lines between rows, and checkboxes on the left if selection is enabled — like a simplified spreadsheet UI.

IndexedStack

Like Stack, but only the child at the given index is actually visible/hit-testable (others stay laid out but hidden).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: IndexedStackDemo());
}

class IndexedStackDemo extends StatefulWidget {
  const IndexedStackDemo({super.key});
  @override
  State<IndexedStackDemo> createState() => _IndexedStackDemoState();
}

class _IndexedStackDemoState extends State<IndexedStackDemo> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _index,
        children: const [
          Center(child: Icon(Icons.home, size: 80, color: Colors.blue)),
          Center(child: Icon(Icons.search, size: 80, color: Colors.green)),
          Center(child: Icon(Icons.settings, size: 80, color: Colors.orange)),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        onTap: (i) => setState(() => _index = i),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Only the search icon is visible; the other two are present in the tree (keeping their state alive) but invisible — commonly used for tab content that shouldn't rebuild on switch.

CustomScrollView + Slivers

A scroll container composed of "sliver" pieces for advanced scroll effects (collapsing headers, mixed lists/grids).

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(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            const SliverAppBar(
              title: "Text('Collapsing Header'),"
              expandedHeight: 200,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: ColoredBox(color: Colors.indigo),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, i) => ListTile(title: "Text('Row \$i')),"
                childCount: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A tall header image/title area that shrinks and sticks as a compact app bar once you scroll down past it, with an ordinary list continuing underneath — the classic "collapsing toolbar" effect.

SliverGrid / SliverList / SliverToBoxAdapter / SliverFillRemaining / SliverPadding

The grid/list/single-widget/padding building blocks used inside a CustomScrollView.

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(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            const SliverToBoxAdapter(
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Text('Grid section', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
              ),
            ),
            SliverPadding(
              padding: const EdgeInsets.all(8),
              sliver: SliverGrid.count(
                crossAxisCount: 3,
                children: List.generate(6, (i) => Container(
                  margin: const EdgeInsets.all(4),
                  color: Colors.teal[100 * ((i % 8) + 1)],
                  child: Center(child: Text('\$i')),
                )),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, i) => ListTile(title: "Text('List item \$i')),"
                childCount: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Functionally identical to GridView/ListView/Padding, but as a scrollable "slice" that composes with other slivers in one continuous scroll view instead of being its own independent scrollable.

10. Advanced Input & Forms

TextFormField

A TextField wired for use inside a Form, with built-in validation support.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: TextFormFieldDemo());
}

class TextFormFieldDemo extends StatefulWidget {
  const TextFormFieldDemo({super.key});
  @override
  State<TextFormFieldDemo> createState() => _TextFormFieldDemoState();
}

class _TextFormFieldDemoState extends State<TextFormFieldDemo> {
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                decoration: const InputDecoration(labelText: 'Name', border: OutlineInputBorder()),
                validator: (v) => v!.isEmpty ? 'Required' : null,
              ),
              const SizedBox(height: 12),
              TextFormField(
                decoration: const InputDecoration(labelText: 'Email', border: OutlineInputBorder()),
                validator: (v) => v!.contains('@') ? null : 'Invalid email',
              ),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () => _formKey.currentState!.validate(),
                child: const Text('Validate'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Identical to TextField visually, but shows a red error line and message beneath the box when validation fails.

Autocomplete

A text field that suggests matching options as the user types.

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(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Autocomplete<String>(
            optionsBuilder: (v) => ['Apple', 'Apricot', 'Banana', 'Blueberry', 'Cherry', 'Grape']
                .where((o) => o.toLowerCase().startsWith(v.text.toLowerCase())),
            onSelected: (s) {},
            fieldViewBuilder: (ctx, ctrl, fn, onSubmit) => TextField(
              controller: ctrl,
              focusNode: fn,
              decoration: const InputDecoration(labelText: 'Type a fruit…', border: OutlineInputBorder()),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A normal text box; as you type "Ap," a small dropdown card appears beneath it listing "Apple" as a tappable suggestion.

RangeSlider

Like Slider, but selects a min/max range with two thumbs.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: RangeSliderDemo());
}

class RangeSliderDemo extends StatefulWidget {
  const RangeSliderDemo({super.key});
  @override
  State<RangeSliderDemo> createState() => _RangeSliderDemoState();
}

class _RangeSliderDemoState extends State<RangeSliderDemo> {
  RangeValues _values = const RangeValues(20, 80);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RangeSlider(
              values: _values,
              min: 0, max: 100,
              labels: RangeLabels('\${_values.start.round()}', '\${_values.end.round()}'),
              onChanged: (v) => setState(() => _values = v),
            ),
            Text('\${_values.start.round()} – \${_values.end.round()}'),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A horizontal track with two circular thumbs; the segment between them is filled in the theme color, while the segments outside are grey.

showDatePicker / CalendarDatePicker

A modal calendar for picking a date.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: DatePickerDemo());
}

class DatePickerDemo extends StatefulWidget {
  const DatePickerDemo({super.key});
  @override
  State<DatePickerDemo> createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  DateTime? _picked;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_picked == null ? 'No date selected' : 'Picked: \${_picked!.toLocal()}'.split(' ')[0],
                style: const TextStyle(fontSize: 18)),
            const SizedBox(height: 16),
            ElevatedButton(
              child: const Text('Pick a date'),
              onPressed: () async {
                final date = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2020),
                  lastDate: DateTime(2030),
                );
                if (date != null) setState(() => _picked = date);
              },
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A card-style calendar month grid pops up centered on screen, with the current day highlighted and a header showing month/year plus "Cancel"/"OK" buttons at the bottom.

showTimePicker

A modal clock-face (or dial input) for picking a time.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: TimePickerDemo());
}

class TimePickerDemo extends StatefulWidget {
  const TimePickerDemo({super.key});
  @override
  State<TimePickerDemo> createState() => _TimePickerDemoState();
}

class _TimePickerDemoState extends State<TimePickerDemo> {
  TimeOfDay? _picked;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_picked == null ? 'No time selected' : _picked!.format(context),
                style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              child: const Text('Pick a time'),
              onPressed: () async {
                final time = await showTimePicker(
                  context: context,
                  initialTime: TimeOfDay.now(),
                );
                if (time != null) setState(() => _picked = time);
              },
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A circular analog clock face pops up with draggable hour/minute hands, and large digital hour:minute numerals above it that you can also tap to type directly.

SegmentedButton (Material 3)

A row of mutually-exclusive selectable segments (replaces the older CupertinoSegmentedControl look in Material).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const SegmentedButtonDemo(),
  );
}

class SegmentedButtonDemo extends StatefulWidget {
  const SegmentedButtonDemo({super.key});
  @override
  State<SegmentedButtonDemo> createState() => _SegmentedButtonDemoState();
}

class _SegmentedButtonDemoState extends State<SegmentedButtonDemo> {
  Set<int> _selected = {0};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SegmentedButton<int>(
          segments: const [
            ButtonSegment(value: 0, label: Text('Day')),
            ButtonSegment(value: 1, label: Text('Week')),
            ButtonSegment(value: 2, label: Text('Month')),
          ],
          selected: _selected,
          onSelectionChanged: (s) => setState(() => _selected = s),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A single pill-shaped bar divided into "Day" | "Week" sections, with the selected segment shown filled in the theme color and the other left outlined/plain.

Chip / ActionChip / ChoiceChip / FilterChip / InputChip

Small pill-shaped elements representing an input, attribute, or action.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ChipsDemo());
}

class ChipsDemo extends StatefulWidget {
  const ChipsDemo({super.key});
  @override
  State<ChipsDemo> createState() => _ChipsDemoState();
}

class _ChipsDemoState extends State<ChipsDemo> {
  bool _choice = true;
  bool _filter = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Wrap(
          spacing: 8, runSpacing: 8,
          children: [
            const Chip(label: Text('Plain Chip')),
            ActionChip(label: const Text('ActionChip'), onPressed: () {}),
            ChoiceChip(label: const Text('ChoiceChip'), selected: _choice,
                onSelected: (v) => setState(() => _choice = v)),
            FilterChip(label: const Text('FilterChip'), selected: _filter,
                onSelected: (v) => setState(() => _filter = v)),
            InputChip(label: const Text('InputChip'), onDeleted: () {}, onPressed: () {}),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Rounded-pill shaped tags in a row — plain grey for Chip, tappable with a ripple for ActionChip, and highlighted in the theme color when selected: true for ChoiceChip/FilterChip. InputChip additionally shows a small "x" to delete it.

ExpansionTile

A ListTile that expands/collapses to reveal nested children when tapped.

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(
      home: Scaffold(
        body: ListView(
          children: const [
            ExpansionTile(
              title: Text('Settings'),
              children: [
                ListTile(title: Text('Notifications')),
                ListTile(title: Text('Privacy')),
                ListTile(title: Text('Storage')),
              ],
            ),
            ExpansionTile(
              title: Text('Account'),
              children: [
                ListTile(title: Text('Profile')),
                ListTile(title: Text('Billing')),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A row with a downward chevron on the right; tapping it rotates the chevron and smoothly slides open additional rows beneath it.

ExpansionPanelList

Like ExpansionTile but for a whole list of collapsible panels with elevation.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ExpansionPanelDemo());
}

class ExpansionPanelDemo extends StatefulWidget {
  const ExpansionPanelDemo({super.key});
  @override
  State<ExpansionPanelDemo> createState() => _ExpansionPanelDemoState();
}

class _ExpansionPanelDemoState extends State<ExpansionPanelDemo> {
  final _expanded = [false, true, false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          expansionCallback: (i, open) => setState(() => _expanded[i] = !open),
          children: List.generate(3, (i) => ExpansionPanel(
            headerBuilder: (c, e) => ListTile(title: Text('Panel \${i + 1}')),
            body: ListTile(title: Text('Details for panel \${i + 1}')),
            isExpanded: _expanded[i],
          )),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A stack of card-like panels, each with a header row and a chevron; expanded ones show extra content beneath with a subtle shadow separating panels.

Stepper

A multi-step, numbered wizard/form flow.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: StepperDemo());
}

class StepperDemo extends StatefulWidget {
  const StepperDemo({super.key});
  @override
  State<StepperDemo> createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo> {
  int _step = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        currentStep: _step,
        onStepContinue: () => setState(() => _step = (_step + 1).clamp(0, 2)),
        onStepCancel: () => setState(() => _step = (_step - 1).clamp(0, 2)),
        steps: const [
          Step(title: Text('Account'), content: Text('Enter your account info.')),
          Step(title: Text('Profile'), content: Text('Set up your profile.')),
          Step(title: Text('Review'), content: Text('Confirm and submit.')),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A vertical (or horizontal) sequence of numbered circles connected by lines, each with a title; the active step's content is expanded below it, with "Continue"/"Cancel" buttons at the bottom.

RadioListTile / CheckboxListTile / SwitchListTile

Combine a ListTile row with a Radio/Checkbox/Switch control baked in.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ListTileControlsDemo());
}

class ListTileControlsDemo extends StatefulWidget {
  const ListTileControlsDemo({super.key});
  @override
  State<ListTileControlsDemo> createState() => _ListTileControlsDemoState();
}

class _ListTileControlsDemoState extends State<ListTileControlsDemo> {
  int _radio = 1;
  bool _check = true;
  bool _sw = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          RadioListTile<int>(title: const Text('Option A'), value: 1, groupValue: _radio,
              onChanged: (v) => setState(() => _radio = v!)),
          RadioListTile<int>(title: const Text('Option B'), value: 2, groupValue: _radio,
              onChanged: (v) => setState(() => _radio = v!)),
          const Divider(),
          CheckboxListTile(title: const Text('Accept terms'), value: _check,
              onChanged: (v) => setState(() => _check = v!)),
          SwitchListTile(title: const Text('Enable notifications'), value: _sw,
              onChanged: (v) => setState(() => _sw = v)),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A standard list row with the label on the left and the switch/checkbox/radio control aligned to the right edge — the whole row is tappable, not just the control.

11. Advanced Material Components

Tooltip

Shows a short text hint on long-press/hover.

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(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Tooltip(message: 'Delete this item', child: Icon(Icons.delete, size: 48)),
              SizedBox(width: 24),
              Tooltip(message: 'Share with others', child: Icon(Icons.share, size: 48)),
              SizedBox(width: 24),
              Tooltip(message: 'Add to favourites', child: Icon(Icons.favorite_border, size: 48)),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Normally invisible; long-pressing or hovering over the icon pops up a small dark rounded rectangle with white text just above it, disappearing after a moment.

Badge

A small dot or count overlay, usually on an icon (e.g., notification counts).

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(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Badge(label: Text('3'), child: Icon(Icons.notifications, size: 40)),
              SizedBox(width: 32),
              Badge(label: Text('99+'), child: Icon(Icons.mail, size: 40)),
              SizedBox(width: 32),
              Badge(child: Icon(Icons.shopping_cart, size: 40)),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A bell icon with a small red circle in its top-right corner containing the white numeral "3."

Divider / VerticalDivider

A thin line separating content.

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(
      home: Scaffold(
        body: Column(
          children: [
            const ListTile(title: Text('Above the divider')),
            const Divider(thickness: 2),
            const ListTile(title: Text('Below the divider')),
            Expanded(
              child: Row(
                children: const [
                  Center(child: Text('Left')),
                  VerticalDivider(thickness: 2),
                  Center(child: Text('Right')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A thin horizontal grey line running the width of its container, with a small margin, visually separating "Above" from "Below."

MaterialBanner

A persistent, non-modal message bar anchored to the top of the content area.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: MaterialBannerDemo());
}

class MaterialBannerDemo extends StatefulWidget {
  const MaterialBannerDemo({super.key});
  @override
  State<MaterialBannerDemo> createState() => _MaterialBannerDemoState();
}

class _MaterialBannerDemoState extends State<MaterialBannerDemo> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ScaffoldMessenger.of(context).showMaterialBanner(MaterialBanner(
        content: const Text('Your session is expiring soon'),
        leading: const Icon(Icons.warning, color: Colors.orange),
        actions: [
          TextButton(
            onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
            child: const Text('Dismiss'),
          ),
        ],
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MaterialBanner')),
      body: const Center(child: Text('Banner appears at the top')),
    );
  }
}

▶ Open in DartPad

Looks like: A pale-colored horizontal bar just under the app bar spanning the full width, with text on the left and one or more text buttons on the right — stays on screen until dismissed (unlike a SnackBar).

LinearProgressIndicator

A horizontal loading/progress bar.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Determinate (40%)'),
              const SizedBox(height: 8),
              const LinearProgressIndicator(value: 0.4),
              const SizedBox(height: 24),
              const Text('Indeterminate (loading)'),
              const SizedBox(height: 8),
              const LinearProgressIndicator(),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A thin horizontal track, 40% filled from the left in the theme color, the rest a lighter grey.

RefreshIndicator

Wraps a scrollable to add pull-to-refresh behavior.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: RefreshDemo());
}

class RefreshDemo extends StatefulWidget {
  const RefreshDemo({super.key});
  @override
  State<RefreshDemo> createState() => _RefreshDemoState();
}

class _RefreshDemoState extends State<RefreshDemo> {
  int _count = 5;
  Future<void> _refresh() async {
    await Future.delayed(const Duration(seconds: 1));
    setState(() => _count += 5);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          itemCount: _count,
          itemBuilder: (c, i) => ListTile(title: Text('Item \$i')),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Pulling down past the top of the list reveals a small circular spinner that stretches/snaps into place, spins while refreshing, then retracts.

NavigationRail

A vertical, icon-based navigation strip for tablet/desktop layouts.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: NavRailDemo());
}

class NavRailDemo extends StatefulWidget {
  const NavRailDemo({super.key});
  @override
  State<NavRailDemo> createState() => _NavRailDemoState();
}

class _NavRailDemoState extends State<NavRailDemo> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: _index,
            onDestinationSelected: (i) => setState(() => _index = i),
            labelType: NavigationRailLabelType.all,
            destinations: const [
              NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),
              NavigationRailDestination(icon: Icon(Icons.search), label: Text('Search')),
              NavigationRailDestination(icon: Icon(Icons.settings), label: Text('Settings')),
            ],
          ),
          const VerticalDivider(thickness: 1, width: 1),
          Expanded(child: Center(child: Text(['Home', 'Search', 'Settings'][_index], style: const TextStyle(fontSize: 24)))),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A narrow vertical bar on the left edge of the screen with stacked icon+label destinations; the selected one has a colored background "pill" behind its icon.

NavigationBar (Material 3)

The modern replacement for BottomNavigationBar, with a pill-style selection indicator.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const NavigationBarDemo(),
  );
}

class NavigationBarDemo extends StatefulWidget {
  const NavigationBarDemo({super.key});
  @override
  State<NavigationBarDemo> createState() => _NavigationBarDemoState();
}

class _NavigationBarDemoState extends State<NavigationBarDemo> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text(['Home', 'Explore', 'Profile'][_index], style: const TextStyle(fontSize: 24))),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _index,
        onDestinationSelected: (i) => setState(() => _index = i),
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Same bottom bar position as BottomNavigationBar, but the selected icon sits inside a rounded pill-shaped highlight instead of just changing color.

NavigationDrawer (Material 3)

The M3-styled version of Drawer, with rounded selection indicators.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const NavigationDrawerDemo(),
  );
}

class NavigationDrawerDemo extends StatefulWidget {
  const NavigationDrawerDemo({super.key});
  @override
  State<NavigationDrawerDemo> createState() => _NavigationDrawerDemoState();
}

class _NavigationDrawerDemoState extends State<NavigationDrawerDemo> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('NavigationDrawer')),
      drawer: NavigationDrawer(
        selectedIndex: _index,
        onDestinationSelected: (i) { setState(() => _index = i); Navigator.pop(context); },
        children: const [
          Padding(padding: EdgeInsets.fromLTRB(28, 16, 16, 10), child: Text('Menu', style: TextStyle(fontSize: 14))),
          NavigationDrawerDestination(icon: Icon(Icons.home), label: Text('Home')),
          NavigationDrawerDestination(icon: Icon(Icons.bookmark), label: Text('Bookmarks')),
          NavigationDrawerDestination(icon: Icon(Icons.settings), label: Text('Settings')),
        ],
      ),
      body: Center(child: Text(['Home', 'Bookmarks', 'Settings'][_index], style: const TextStyle(fontSize: 24))),
    );
  }
}

▶ Open in DartPad

Looks like: Same slide-in side panel as Drawer, but list items use pill-shaped highlight backgrounds for the selected destination, matching Material 3's rounder aesthetic.

SearchBar / SearchAnchor

A Material 3 search input that can anchor a suggestions view.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const SearchBarDemo(),
  );
}

class SearchBarDemo extends StatelessWidget {
  const SearchBarDemo({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            SearchBar(
              hintText: 'Search...',
              leading: const Icon(Icons.search),
              padding: const MaterialStatePropertyAll(EdgeInsets.symmetric(horizontal: 16)),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A tall, fully rounded (pill-shaped) input box with a search icon on the left and placeholder text "Search..." — taller and rounder than a standard TextField.

CircleAvatar

A circular image or initials, commonly for profile pictures.

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(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: const [
              CircleAvatar(
                radius: 36,
                backgroundImage: NetworkImage('https://picsum.photos/100'),
              ),
              SizedBox(width: 16),
              CircleAvatar(radius: 36, backgroundColor: Colors.indigo, child: Text('AB', style: TextStyle(color: Colors.white, fontSize: 20))),
              SizedBox(width: 16),
              CircleAvatar(radius: 36, backgroundColor: Colors.orange, child: Icon(Icons.person, size: 36, color: Colors.white)),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A perfectly circular cropped photo, 60px across, often used at the leading edge of a ListTile or app bar.

12. Animation & Transitions

AnimatedContainer

A Container that automatically animates changes to its properties (size, color, padding, etc.).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedContainerDemo());
}

class AnimatedContainerDemo extends StatefulWidget {
  const AnimatedContainerDemo({super.key});
  @override
  State<AnimatedContainerDemo> createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  bool _expanded = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () => setState(() => _expanded = !_expanded),
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeInOut,
            width: _expanded ? 250 : 100,
            height: _expanded ? 250 : 100,
            color: _expanded ? Colors.blue : Colors.red,
            child: Center(child: Text(_expanded ? 'Tap to shrink' : 'Tap', style: const TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A colored box that smoothly grows/shrinks and fades between colors over 300ms whenever expanded toggles, rather than jumping instantly.

AnimatedOpacity

Smoothly fades a child in/out.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedOpacityDemo());
}

class AnimatedOpacityDemo extends StatefulWidget {
  const AnimatedOpacityDemo({super.key});
  @override
  State<AnimatedOpacityDemo> createState() => _AnimatedOpacityDemoState();
}

class _AnimatedOpacityDemoState extends State<AnimatedOpacityDemo> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedOpacity(
              opacity: _visible ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 500),
              child: const FlutterLogo(size: 120),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () => setState(() => _visible = !_visible),
              child: Text(_visible ? 'Fade Out' : 'Fade In'),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The Flutter logo gradually fades to fully transparent (and back) over half a second instead of blinking on/off instantly.

AnimatedAlign / AnimatedPadding / AnimatedPositioned

Animate alignment, padding, or Stack position changes respectively.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedAlignDemo());
}

class AnimatedAlignDemo extends StatefulWidget {
  const AnimatedAlignDemo({super.key});
  @override
  State<AnimatedAlignDemo> createState() => _AnimatedAlignDemoState();
}

class _AnimatedAlignDemoState extends State<AnimatedAlignDemo> {
  Alignment _align = Alignment.topLeft;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          AnimatedAlign(
            alignment: _align,
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            child: const FlutterLogo(size: 80),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          final options = [Alignment.topLeft, Alignment.topRight, Alignment.bottomLeft, Alignment.bottomRight, Alignment.center];
          _align = options[(options.indexOf(_align) + 1) % options.length];
        }),
        child: const Icon(Icons.swap_horiz),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The logo glides smoothly downward to a new vertical position over 400ms rather than teleporting there.

AnimatedDefaultTextStyle

Animates changes to a text's style (size, color, weight).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedTextStyleDemo());
}

class AnimatedTextStyleDemo extends StatefulWidget {
  const AnimatedTextStyleDemo({super.key});
  @override
  State<AnimatedTextStyleDemo> createState() => _AnimatedTextStyleDemoState();
}

class _AnimatedTextStyleDemoState extends State<AnimatedTextStyleDemo> {
  bool _big = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedDefaultTextStyle(
              duration: const Duration(milliseconds: 400),
              style: TextStyle(
                fontSize: _big ? 48 : 16,
                color: _big ? Colors.blue : Colors.black,
                fontWeight: _big ? FontWeight.bold : FontWeight.normal,
              ),
              child: const Text('Grow me'),
            ),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: () => setState(() => _big = !_big), child: const Text('Toggle')),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The words "Grow me" smoothly scale up/down in size over 300ms rather than snapping between sizes.

AnimatedCrossFade

Cross-fades between two children, animating the size difference too.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedCrossFadeDemo());
}

class AnimatedCrossFadeDemo extends StatefulWidget {
  const AnimatedCrossFadeDemo({super.key});
  @override
  State<AnimatedCrossFadeDemo> createState() => _AnimatedCrossFadeDemoState();
}

class _AnimatedCrossFadeDemoState extends State<AnimatedCrossFadeDemo> {
  bool _showFirst = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedCrossFade(
              firstChild: const Icon(Icons.add_circle, size: 100, color: Colors.green),
              secondChild: const Icon(Icons.remove_circle, size: 100, color: Colors.red),
              crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
              duration: const Duration(milliseconds: 400),
            ),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: () => setState(() => _showFirst = !_showFirst), child: const Text('Switch')),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A "+" icon smoothly dissolves into a "−" icon (and the surrounding box resizes to fit) rather than an abrupt swap.

AnimatedSwitcher

Animates the transition whenever its child widget is swapped for a different one.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedSwitcherDemo());
}

class AnimatedSwitcherDemo extends StatefulWidget {
  const AnimatedSwitcherDemo({super.key});
  @override
  State<AnimatedSwitcherDemo> createState() => _AnimatedSwitcherDemoState();
}

class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 300),
              child: Text('\$_count', key: ValueKey(_count), style: const TextStyle(fontSize: 80, fontWeight: FontWeight.bold)),
            ),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: () => setState(() => _count++), child: const Text('Increment')),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Each time the number changes, the old digit fades/slides out while the new one fades/slides in, rather than the text just changing instantly.

AnimatedBuilder / TweenAnimationBuilder

Rebuild a widget tree on every tick of an Animation or Tween, for custom animations.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: TweenBuilderDemo());
}

class TweenBuilderDemo extends StatefulWidget {
  const TweenBuilderDemo({super.key});
  @override
  State<TweenBuilderDemo> createState() => _TweenBuilderDemoState();
}

class _TweenBuilderDemoState extends State<TweenBuilderDemo> {
  double _target = 1.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TweenAnimationBuilder<double>(
              tween: Tween(begin: 0, end: _target),
              duration: const Duration(milliseconds: 600),
              curve: Curves.easeInOut,
              builder: (c, v, child) => Transform.scale(scale: v, child: child),
              child: const FlutterLogo(size: 120),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () => setState(() => _target = _target == 1.0 ? 0.2 : 1.0),
              child: const Text('Animate'),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The Flutter logo fades in from fully invisible to fully visible over one second when the widget first builds.

Hero

Animates a shared element seamlessly flying between two screens during navigation.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: HeroListPage());
}

class HeroListPage extends StatelessWidget {
  const HeroListPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tap to expand')),
      body: Center(
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => const HeroDetailPage())),
          child: Hero(
            tag: 'flutter-logo',
            child: const FlutterLogo(size: 80),
          ),
        ),
      ),
    );
  }
}

class HeroDetailPage extends StatelessWidget {
  const HeroDetailPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detail')),
      body: Center(
        child: Hero(
          tag: 'flutter-logo',
          child: const FlutterLogo(size: 250),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The logo visually "flies" from its position on screen A to its (possibly different size/position) placement on screen B during the page transition, rather than just disappearing and reappearing.

FadeTransition / ScaleTransition / SlideTransition / RotationTransition / SizeTransition

Lower-level, explicitly-controlled animation widgets typically driven by an AnimationController.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: TransitionsDemo());
}

class TransitionsDemo extends StatefulWidget {
  const TransitionsDemo({super.key});
  @override
  State<TransitionsDemo> createState() => _TransitionsDemoState();
}

class _TransitionsDemoState extends State<TransitionsDemo> with SingleTickerProviderStateMixin {
  late final AnimationController _ctrl = AnimationController(vsync: this, duration: const Duration(seconds: 2))..repeat(reverse: true);

  @override
  void dispose() { _ctrl.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(mainAxisSize: MainAxisSize.min, children: [
              FadeTransition(opacity: _ctrl, child: const FlutterLogo(size: 60)),
              const Text('Fade'),
            ]),
            Column(mainAxisSize: MainAxisSize.min, children: [
              ScaleTransition(scale: _ctrl, child: const FlutterLogo(size: 60)),
              const Text('Scale'),
            ]),
            Column(mainAxisSize: MainAxisSize.min, children: [
              RotationTransition(turns: _ctrl, child: const FlutterLogo(size: 60)),
              const Text('Rotate'),
            ]),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Same visual effects as their "Animated*" counterparts above, but driven manually frame-by-frame by your own controller instead of automatically on property change — gives finer control (e.g., pause, reverse, repeat).

AnimatedList

A ListView that animates item insertion/removal.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedListDemo());
}

class AnimatedListDemo extends StatefulWidget {
  const AnimatedListDemo({super.key});
  @override
  State<AnimatedListDemo> createState() => _AnimatedListDemoState();
}

class _AnimatedListDemoState extends State<AnimatedListDemo> {
  final _key = GlobalKey<AnimatedListState>();
  final _items = <String>['Item 0', 'Item 1', 'Item 2'];

  void _add() {
    final index = _items.length;
    _items.add('Item \$index');
    _key.currentState!.insertItem(index);
  }

  void _remove() {
    if (_items.isEmpty) return;
    final index = _items.length - 1;
    final removed = _items.removeAt(index);
    _key.currentState!.removeItem(index,
        (c, anim) => SizeTransition(sizeFactor: anim, child: ListTile(title: Text(removed))));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedList(
        key: _key,
        initialItemCount: _items.length,
        itemBuilder: (c, i, anim) => SizeTransition(
          sizeFactor: anim,
          child: ListTile(title: Text(_items[i])),
        ),
      ),
      floatingActionButton: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(heroTag: 'add', onPressed: _add, child: const Icon(Icons.add)),
          const SizedBox(width: 8),
          FloatingActionButton(heroTag: 'remove', onPressed: _remove, child: const Icon(Icons.remove)),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: When an item is added/removed, it smoothly grows in from zero height or shrinks away, pushing/pulling neighboring rows rather than popping in/out abruptly.

AnimatedIcon

Morphs between two related icon shapes (e.g., menu ↔ arrow-back).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedIconDemo());
}

class AnimatedIconDemo extends StatefulWidget {
  const AnimatedIconDemo({super.key});
  @override
  State<AnimatedIconDemo> createState() => _AnimatedIconDemoState();
}

class _AnimatedIconDemoState extends State<AnimatedIconDemo> with SingleTickerProviderStateMixin {
  late final AnimationController _ctrl = AnimationController(vsync: this, duration: const Duration(milliseconds: 400));
  bool _isMenu = true;

  void _toggle() {
    setState(() => _isMenu = !_isMenu);
    _isMenu ? _ctrl.reverse() : _ctrl.forward();
  }

  @override
  void dispose() { _ctrl.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IconButton(
          iconSize: 80,
          icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow, progress: _ctrl),
          onPressed: _toggle,
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A hamburger-menu icon whose three lines smoothly morph into a back-arrow shape as the animation progresses, instead of an instant icon swap.

13. Gestures & Interaction

GestureDetector

Detects taps, drags, long-presses, and other raw pointer gestures on any widget.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: GestureDetectorDemo());
}

class GestureDetectorDemo extends StatefulWidget {
  const GestureDetectorDemo({super.key});
  @override
  State<GestureDetectorDemo> createState() => _GestureDetectorDemoState();
}

class _GestureDetectorDemoState extends State<GestureDetectorDemo> {
  String _last = 'Tap, double-tap, or long-press the box';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            GestureDetector(
              onTap: () => setState(() => _last = 'Single tap'),
              onDoubleTap: () => setState(() => _last = 'Double tap'),
              onLongPress: () => setState(() => _last = 'Long press'),
              child: Container(width: 160, height: 160, color: Colors.purple,
                child: const Center(child: Text('Tap me', style: TextStyle(color: Colors.white, fontSize: 18)))),
            ),
            const SizedBox(height: 24),
            Text(_last, style: const TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Visually just a purple square — the widget itself adds no visual feedback; it's purely a wrapper for detecting touch gestures on whatever's inside it.

InkWell

Like GestureDetector but adds Material's ripple/splash visual feedback on tap.

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(
      home: Scaffold(
        body: Center(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {},
              splashColor: Colors.blue.withOpacity(0.4),
              borderRadius: BorderRadius.circular(12),
              child: Ink(
                decoration: BoxDecoration(
                  color: Colors.blue.shade50,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.blue),
                ),
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
                  child: Text('Tap for ripple', style: TextStyle(fontSize: 18)),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: "Tap me" text with a circular ripple of color spreading out from the tap point and fading away, confined to this widget's bounds.

Draggable / DragTarget

Lets a widget be dragged, and defines drop zones that respond when something is dragged onto them.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: DragDropDemo());
}

class DragDropDemo extends StatefulWidget {
  const DragDropDemo({super.key});
  @override
  State<DragDropDemo> createState() => _DragDropDemoState();
}

class _DragDropDemoState extends State<DragDropDemo> {
  Color _targetColor = Colors.grey.shade200;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          const Center(
            child: Draggable<Color>(
              data: Colors.blue,
              feedback: Icon(Icons.circle, size: 60, color: Colors.blue),
              childWhenDragging: Icon(Icons.circle_outlined, size: 60, color: Colors.blue),
              child: Icon(Icons.circle, size: 60, color: Colors.blue),
            ),
          ),
          Center(
            child: DragTarget<Color>(
              onAccept: (c) => setState(() => _targetColor = c),
              builder: (c, candidates, rejected) => AnimatedContainer(
                duration: const Duration(milliseconds: 200),
                width: 140, height: 140,
                color: candidates.isNotEmpty ? Colors.blue.shade100 : _targetColor,
                child: const Center(child: Text('Drop here')),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: An outlined circle icon that, when picked up and dragged, shows a solid circle "ghost" following your finger/cursor, leaving the original in place until dropped.

Dismissible

A widget that can be swiped away (e.g., to delete a list item).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: DismissibleDemo());
}

class DismissibleDemo extends StatefulWidget {
  const DismissibleDemo({super.key});
  @override
  State<DismissibleDemo> createState() => _DismissibleDemoState();
}

class _DismissibleDemoState extends State<DismissibleDemo> {
  final _items = List.generate(8, (i) => 'Item \$i');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Swipe to dismiss')),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (c, i) => Dismissible(
          key: Key(_items[i]),
          background: Container(color: Colors.red, alignment: Alignment.centerLeft,
              padding: const EdgeInsets.only(left: 16), child: const Icon(Icons.delete, color: Colors.white)),
          secondaryBackground: Container(color: Colors.red, alignment: Alignment.centerRight,
              padding: const EdgeInsets.only(right: 16), child: const Icon(Icons.delete, color: Colors.white)),
          onDismissed: (_) => setState(() => _items.removeAt(i)),
          child: ListTile(title: Text(_items[i])),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A list row that slides fully off-screen when swiped left or right, revealing a colored (often red) background underneath it as it moves, then collapses to zero height.

InteractiveViewer

Adds pan/zoom/pinch gesture support to its child (e.g., for images/maps).

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Pinch to zoom')),
        body: InteractiveViewer(
          minScale: 0.5,
          maxScale: 5,
          child: Image.network('https://picsum.photos/800/600', fit: BoxFit.contain),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A normal photo that you can pinch to zoom into and drag to pan around, up to 4x magnification, with the content following your fingers smoothly.

14. Painting & Custom Drawing

CustomPaint

Draws arbitrary vector graphics via a custom CustomPainter (canvas API).

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            size: const Size(200, 200),
            painter: StarPainter(),
          ),
        ),
      ),
    );
  }
}

class StarPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.amber..style = PaintingStyle.fill;
    final cx = size.width / 2, cy = size.height / 2;
    final path = Path();
    for (var i = 0; i < 10; i++) {
      final r = i.isEven ? 80.0 : 36.0;
      final a = (i * pi / 5) - pi / 2;
      i == 0 ? path.moveTo(cx + r * cos(a), cy + r * sin(a))
              : path.lineTo(cx + r * cos(a), cy + r * sin(a));
    }
    path.close();
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter old) => false;
}

▶ Open in DartPad

Looks like: Entirely dependent on the painter's code — commonly a hand-drawn circle, chart, or custom shape rendered pixel-precisely, not achievable with stock widgets.

ClipRect / ClipRRect / ClipOval / ClipPath

Clip a child to a rectangle, rounded rectangle, oval, or arbitrary path shape.

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(
      home: Scaffold(
        body: Center(
          child: Wrap(
            spacing: 16, runSpacing: 16,
            alignment: WrapAlignment.center,
            children: [
              Column(mainAxisSize: MainAxisSize.min, children: [
                ClipRect(child: SizedBox(width: 80, height: 80, child: Image.network('https://picsum.photos/200', fit: BoxFit.cover))),
                const Text('ClipRect'),
              ]),
              Column(mainAxisSize: MainAxisSize.min, children: [
                ClipRRect(borderRadius: BorderRadius.circular(20),
                  child: Image.network('https://picsum.photos/200', width: 80, height: 80, fit: BoxFit.cover)),
                const Text('ClipRRect'),
              ]),
              Column(mainAxisSize: MainAxisSize.min, children: [
                ClipOval(child: Image.network('https://picsum.photos/200', width: 80, height: 80, fit: BoxFit.cover)),
                const Text('ClipOval'),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A square photo with all four corners neatly rounded off, as if cut with a rounded-corner stencil.

BackdropFilter

Applies an image filter (commonly blur) to everything behind a widget.

import 'package:flutter/material.dart';
import 'dart:ui';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: [
            Image.network('https://picsum.photos/600/800', fit: BoxFit.cover),
            Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                  child: Container(
                    width: 200, height: 100,
                    color: Colors.white.withOpacity(0.2),
                    child: const Center(child: Text('Frosted glass', style: TextStyle(color: Colors.white, fontSize: 18))),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A frosted-glass effect — whatever is visually behind this widget appears softly blurred, with a faint white tint over it (the classic iOS "frosted panel" look).

ShaderMask

Applies a gradient or shader as a mask over a child.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ShaderMask(
                shaderCallback: (bounds) => const LinearGradient(
                  colors: [Colors.purple, Colors.blue, Colors.transparent],
                  end: Alignment.bottomCenter,
                ).createShader(bounds),
                child: const FlutterLogo(size: 150),
              ),
              const SizedBox(height: 16),
              ShaderMask(
                shaderCallback: (bounds) => const LinearGradient(
                  colors: [Colors.red, Colors.orange, Colors.yellow],
                ).createShader(bounds),
                blendMode: BlendMode.srcIn,
                child: const Text('Gradient Text', style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The Flutter logo gradually fades from full color/opacity on one side to fully transparent on the other, following the gradient direction.

Opacity

Makes a child partially or fully transparent (non-animated; use AnimatedOpacity for transitions).

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(
      home: Scaffold(
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(width: 200, height: 200, color: Colors.blue),
              Opacity(
                opacity: 0.5,
                child: Container(width: 200, height: 200, color: Colors.red),
              ),
              const Text('50% opacity', style: TextStyle(color: Colors.white, fontSize: 16)),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A green square rendered at half strength — the background shows through it faintly.

Transform

Applies a matrix transform (rotate, scale, translate, skew) to a child.

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Wrap(
            spacing: 16, runSpacing: 16,
            alignment: WrapAlignment.center,
            children: [
              Column(mainAxisSize: MainAxisSize.min, children: [
                Transform.rotate(angle: pi / 6, child: Container(width: 80, height: 80, color: Colors.orange)),
                const Text('Rotate'),
              ]),
              Column(mainAxisSize: MainAxisSize.min, children: [
                Transform.scale(scale: 1.5, child: Container(width: 60, height: 60, color: Colors.blue)),
                const SizedBox(height: 16),
                const Text('Scale'),
              ]),
              Column(mainAxisSize: MainAxisSize.min, children: [
                Transform.translate(offset: const Offset(20, 0), child: Container(width: 80, height: 80, color: Colors.green)),
                const Text('Translate'),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: An orange square tilted slightly clockwise, as if rotated ~11 degrees, without affecting the layout space it occupies.

FittedBox

Scales/positions a child to fit within available space (like BoxFit for arbitrary widgets).

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 150, height: 60,
                color: Colors.amber.shade100,
                child: const FittedBox(
                  fit: BoxFit.contain,
                  child: Text('BIG TEXT', style: TextStyle(fontSize: 80)),
                ),
              ),
              const SizedBox(height: 8),
              const Text('FittedBox: text shrinks to fit'),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Enormous 100pt text shrunk down proportionally to fit neatly inside whatever smaller box contains it, rather than overflowing or clipping.

15. Async & State Builders

FutureBuilder

Rebuilds based on the state of a Future (loading / data / error).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

Future<String> fetchData() => Future.delayed(
  const Duration(seconds: 2),
  () => 'Hello from the future!',
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FutureBuilder<String>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [CircularProgressIndicator(), SizedBox(height: 16), Text('Loading...')],
                );
              }
              if (snapshot.hasError) return Text('Error: \${snapshot.error}');
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            },
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A spinning loading indicator that's replaced by the actual text content the moment the underlying async call completes.

StreamBuilder

Like FutureBuilder, but rebuilds on every new event from a Stream.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

Stream<int> counterStream = Stream.periodic(const Duration(seconds: 1), (i) => i).take(60);

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: StreamBuilder<int>(
            stream: counterStream,
            builder: (context, snapshot) {
              if (!snapshot.hasData) return const CircularProgressIndicator();
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('\${snapshot.data}', style: const TextStyle(fontSize: 80, fontWeight: FontWeight.bold)),
                  const Text('seconds elapsed', style: TextStyle(fontSize: 16)),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A number on screen that updates live, ticking up each time the underlying stream emits a new value — no manual refresh needed.

ValueListenableBuilder

Rebuilds only the part of the tree that depends on a ValueNotifier, for lightweight local state.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

final counter = ValueNotifier<int>(0);

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ValueListenableBuilder<int>(
                valueListenable: counter,
                builder: (c, value, child) => Text('\$value',
                    style: const TextStyle(fontSize: 80, fontWeight: FontWeight.bold)),
              ),
              const SizedBox(height: 16),
              ElevatedButton(onPressed: () => counter.value++, child: const Text('Increment')),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Visually just a number that updates instantly whenever the underlying notifier's value changes, without rebuilding surrounding widgets.

Builder

A widget that gives you a fresh BuildContext inline, useful for accessing an ancestor Theme/Scaffold from deeper in the tree without extracting a new widget class.

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(
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) {
              final color = Theme.of(context).colorScheme.primary;
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(width: 120, height: 120, color: color),
                  const SizedBox(height: 8),
                  Text('Theme primary: \$color'),
                  const SizedBox(height: 16),
                  Builder(
                    builder: (ctx) => ElevatedButton(
                      onPressed: () => ScaffoldMessenger.of(ctx).showSnackBar(const SnackBar(content: Text('Builder provides context!'))),
                      child: const Text('Show Snackbar'),
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: No visual identity of its own — it renders exactly whatever its child produces, purely providing context plumbing.

16. Theming, Media & App Structure

MaterialApp / CupertinoApp

The root widget setting up theming, navigation, localization, and Material/Cupertino conventions for the whole 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: 'My App',
      theme: ThemeData(colorSchemeSeed: Colors.teal, useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      themeMode: ThemeMode.system,
      home: Scaffold(
        appBar: AppBar(title: const Text('MaterialApp demo')),
        body: const Center(
          child: Text('MaterialApp sets up theme, navigation,\nand Material conventions for the whole app.',
            textAlign: TextAlign.center),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Not visible itself, but it determines the color palette, default fonts, and platform-appropriate transition/scroll behaviors used everywhere else in the app.

Theme

Provides Material design tokens (colors, text styles) down the widget tree; can override locally.

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(
      home: Scaffold(
        body: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(16),
              child: Card(child: Padding(padding: EdgeInsets.all(16), child: Text('Light-themed card'))),
            ),
            Theme(
              data: ThemeData.dark(),
              child: Builder(
                builder: (context) => Padding(
                  padding: const EdgeInsets.all(16),
                  child: Card(
                    child: const Padding(
                      padding: EdgeInsets.all(16),
                      child: Text('Dark-themed card (Theme override)'),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A card and text rendered in dark-mode colors (dark background, light text) even if the rest of the app around it is light-themed.

MediaQuery

Exposes device/screen info (size, orientation, padding) to descendants.

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(
      home: Scaffold(
        body: Builder(
          builder: (context) {
            final mq = MediaQuery.of(context);
            return Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Screen size: \${mq.size.width.toInt()} × \${mq.size.height.toInt()}'),
                  Text('Device pixel ratio: \${mq.devicePixelRatio}'),
                  Text('Text scale factor: \${mq.textScaleFactor}'),
                  Text('Platform brightness: \${mq.platformBrightness.name}'),
                  Text('Top padding (status bar): \${mq.padding.top}'),
                  Text('Bottom padding (home bar): \${mq.padding.bottom}'),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Not visible itself — used to make layout decisions (e.g., "show 2 columns if width > 600") that then manifest visually elsewhere.

SafeArea

Insets its child to avoid system UI intrusions (notches, status bar, home indicator).

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(
      home: Scaffold(
        body: Stack(
          children: [
            Container(color: Colors.red),
            SafeArea(
              child: Container(
                color: Colors.white,
                child: const Center(
                  child: Text(
                    'This content is inside SafeArea\n(protected from notch & system UI)',
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Content that starts a bit further down/inward from the very edge of the screen, avoiding being obscured by a phone's notch, camera cutout, or gesture bar.

Directionality

Sets text/layout direction (LTR or RTL) for its subtree.

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(
      home: Scaffold(
        body: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(16),
              child: Text('LTR (default): Left to Right', style: TextStyle(fontSize: 16)),
            ),
            const Padding(padding: EdgeInsets.all(8), child: Row(children: [Text('A'), SizedBox(width: 8), Text('B'), SizedBox(width: 8), Text('C')])),
            const Divider(),
            Directionality(
              textDirection: TextDirection.rtl,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Padding(padding: EdgeInsets.all(16), child: Text('RTL: Right to Left (e.g. Arabic/Hebrew)', style: TextStyle(fontSize: 16))),
                  Padding(padding: EdgeInsets.all(8), child: Row(children: [Text('A'), SizedBox(width: 8), Text('B'), SizedBox(width: 8), Text('C')])),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The Row's children lay out mirrored — starting from the right edge instead of the left — matching languages like Hebrew or Arabic.

DefaultTextStyle

Sets a fallback text style for all Text descendants that don't specify their own.

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(
      home: Scaffold(
        body: Center(
          child: DefaultTextStyle(
            style: const TextStyle(fontSize: 20, color: Colors.indigo, fontStyle: FontStyle.italic),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text('Inherits the default style'),
                Text('This too — italic indigo 20pt'),
                Text('But this is overridden', style: TextStyle(fontSize: 14, color: Colors.red, fontStyle: FontStyle.normal)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Grey, 20pt text — even though no style was set directly on the Text widget itself.

17. Cupertino (iOS-style) Widgets

CupertinoPageScaffold

The iOS-style equivalent of Scaffold.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(middle: Text('Settings')),
        child: Center(child: Text('iOS-style page content')),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A plain white/light background page with a translucent, centered-title nav bar at the top — flatter and less "elevated" than Material's Scaffold.

CupertinoNavigationBar

The iOS-style top bar with a centered title and often a "< Back" leading label.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          leading: const CupertinoButton(padding: EdgeInsets.zero, onPressed: null, child: Text('‹ Home')),
          middle: const Text('Details'),
          trailing: CupertinoButton(padding: EdgeInsets.zero, onPressed: () {}, child: const Text('Edit')),
        ),
        child: const Center(child: Text('iOS navigation bar demo')),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A slim, semi-transparent bar with the title centered and a "‹ Home" text-link back button on the left, instead of Material's icon-based back arrow.

CupertinoButton

An iOS-style tappable button, typically text-only with a fade-on-press effect (no ripple).

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoButton')),
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CupertinoButton(onPressed: () {}, child: const Text('Text button (fades on press)')),
              const SizedBox(height: 16),
              CupertinoButton.filled(onPressed: () {}, child: const Text('Filled button')),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Blue text that dims/fades briefly when pressed, with no border, background, or Material ripple.

CupertinoSwitch

The iOS-style toggle switch.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: CupertinoSwitchDemo());
}

class CupertinoSwitchDemo extends StatefulWidget {
  const CupertinoSwitchDemo({super.key});
  @override
  State<CupertinoSwitchDemo> createState() => _CupertinoSwitchDemoState();
}

class _CupertinoSwitchDemoState extends State<CupertinoSwitchDemo> {
  bool _on = true;
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoSwitch')),
      child: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            CupertinoSwitch(value: _on, onChanged: (v) => setState(() => _on = v)),
            const SizedBox(width: 12),
            Text(_on ? 'ON' : 'OFF'),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Nearly identical to Material's Switch but with iOS's signature green-when-on color and slightly different curvature/proportions.

CupertinoSlider

The iOS-style slider.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: CupertinoSliderDemo());
}

class CupertinoSliderDemo extends StatefulWidget {
  const CupertinoSliderDemo({super.key});
  @override
  State<CupertinoSliderDemo> createState() => _CupertinoSliderDemoState();
}

class _CupertinoSliderDemoState extends State<CupertinoSliderDemo> {
  double _value = 0.5;
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoSlider')),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CupertinoSlider(value: _value, onChanged: (v) => setState(() => _value = v)),
            Text('\${(_value * 100).round()}%'),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A thin track with a plain white circular thumb — thinner and flatter than Material's Slider.

CupertinoTextField

The iOS-style text input.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoTextField')),
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                CupertinoTextField(placeholder: 'Enter name'),
                SizedBox(height: 12),
                CupertinoTextField(placeholder: 'Enter email', prefix: Padding(padding: EdgeInsets.only(left: 8), child: Text('Email'))),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A light-grey rounded rectangle box with placeholder text inside — no floating label or outline border like Material's TextField.

CupertinoAlertDialog

The iOS-style modal alert.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: CupertinoAlertDemo());
}

class CupertinoAlertDemo extends StatelessWidget {
  const CupertinoAlertDemo({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoAlertDialog')),
      child: Center(
        child: CupertinoButton.filled(
          child: const Text('Show Alert'),
          onPressed: () => showCupertinoDialog(
            context: context,
            builder: (ctx) => CupertinoAlertDialog(
              title: const Text('Delete?'),
              content: const Text('This cannot be undone.'),
              actions: [
                CupertinoDialogAction(onPressed: () => Navigator.pop(ctx), child: const Text('Cancel')),
                CupertinoDialogAction(isDestructiveAction: true, onPressed: () => Navigator.pop(ctx), child: const Text('Delete')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A small, tightly-rounded white card centered on a blurred/dimmed background, with the action buttons stacked as full-width rows at the bottom (destructive ones shown in red) — distinct from Material's left-aligned text buttons.

CupertinoActionSheet

An iOS-style bottom sheet with a stack of action options.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: CupertinoActionSheetDemo());
}

class CupertinoActionSheetDemo extends StatelessWidget {
  const CupertinoActionSheetDemo({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoActionSheet')),
      child: Center(
        child: CupertinoButton.filled(
          child: const Text('Show Action Sheet'),
          onPressed: () => showCupertinoModalPopup(
            context: context,
            builder: (ctx) => CupertinoActionSheet(
              title: const Text('Options'),
              message: const Text('Choose an action'),
              actions: [
                CupertinoActionSheetAction(onPressed: () => Navigator.pop(ctx), child: const Text('Share')),
                CupertinoActionSheetAction(onPressed: () => Navigator.pop(ctx), child: const Text('Copy')),
                CupertinoActionSheetAction(isDestructiveAction: true, onPressed: () => Navigator.pop(ctx), child: const Text('Delete')),
              ],
              cancelButton: CupertinoActionSheetAction(onPressed: () => Navigator.pop(ctx), child: const Text('Cancel')),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A rounded-rectangle panel sliding up from the bottom with stacked full-width option rows, and a visually separated "Cancel" row below it in its own rounded card.

CupertinoPicker

An iOS-style scrollable wheel/spinner picker.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: CupertinoPickerDemo());
}

class CupertinoPickerDemo extends StatefulWidget {
  const CupertinoPickerDemo({super.key});
  @override
  State<CupertinoPickerDemo> createState() => _CupertinoPickerDemoState();
}

class _CupertinoPickerDemoState extends State<CupertinoPickerDemo> {
  final _options = ['Option A', 'Option B', 'Option C', 'Option D', 'Option E'];
  int _selected = 0;
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoPicker')),
      child: Column(
        children: [
          Expanded(
            child: CupertinoPicker(
              itemExtent: 36,
              onSelectedItemChanged: (i) => setState(() => _selected = i),
              children: _options.map((o) => Center(child: Text(o))).toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text('Selected: \${_options[_selected]}', style: const TextStyle(fontSize: 18)),
          ),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A vertically scrolling wheel of options, where the item centered in the middle row (flanked by fading, curved-looking neighbors above/below) is the selected value — like a slot machine reel.

CupertinoDatePicker

An iOS-style date/time wheel picker.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: CupertinoDatePickerDemo());
}

class CupertinoDatePickerDemo extends StatefulWidget {
  const CupertinoDatePickerDemo({super.key});
  @override
  State<CupertinoDatePickerDemo> createState() => _CupertinoDatePickerDemoState();
}

class _CupertinoDatePickerDemoState extends State<CupertinoDatePickerDemo> {
  DateTime _date = DateTime.now();
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoDatePicker')),
      child: Column(
        children: [
          Expanded(
            child: CupertinoDatePicker(
              mode: CupertinoDatePickerMode.date,
              initialDateTime: _date,
              onDateTimeChanged: (dt) => setState(() => _date = dt),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text('Selected: \${_date.toLocal()}'.split(' ')[0], style: const TextStyle(fontSize: 18)),
          ),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Three side-by-side spinning wheels (month/day/year), each behaving like CupertinoPicker, letting you dial in a date.

CupertinoActivityIndicator

The iOS-style loading spinner.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(middle: Text('CupertinoActivityIndicator')),
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              CupertinoActivityIndicator(),
              SizedBox(height: 16),
              CupertinoActivityIndicator(radius: 20),
              SizedBox(height: 16),
              CupertinoActivityIndicator(radius: 32),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A circular ring of thin grey radiating tick marks that fade in sequence, spinning — distinctly different from Material's solid circular arc spinner.

CupertinoSlidingSegmentedControl

The iOS-style segmented control with a sliding highlight.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const CupertinoApp(home: SegmentedControlDemo());
}

class SegmentedControlDemo extends StatefulWidget {
  const SegmentedControlDemo({super.key});
  @override
  State<SegmentedControlDemo> createState() => _SegmentedControlDemoState();
}

class _SegmentedControlDemoState extends State<SegmentedControlDemo> {
  int _selected = 0;
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text('Segmented Control')),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CupertinoSlidingSegmentedControl<int>(
              groupValue: _selected,
              children: const {0: Text('Day'), 1: Text('Week'), 2: Text('Month')},
              onValueChanged: (v) => setState(() => _selected = v!),
            ),
            const SizedBox(height: 24),
            Text(['Day view', 'Week view', 'Month view'][_selected], style: const TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A rounded grey capsule containing "Day" and "Week" labels, with a white rounded highlight that slides smoothly to sit behind whichever option is selected.

CupertinoTabScaffold / CupertinoTabBar

The iOS-style tabbed app structure with a bottom tab bar.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.search), label: 'Search'),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.person), label: 'Profile'),
          ],
        ),
        tabBuilder: (context, i) => CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(middle: Text(['Home', 'Search', 'Profile'][i])),
          child: Center(child: Text(['Home', 'Search', 'Profile'][i], style: const TextStyle(fontSize: 24))),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Visually similar to BottomNavigationBar, but using iOS-style outlined icons and translucent white bar background, with instant tab switches (no page-slide transition).

CupertinoListTile

The iOS-style list row, typically used with CupertinoListSection.

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(middle: Text('Settings')),
        child: CupertinoListSection(
          header: const Text('General'),
          children: const [
            CupertinoListTile(
              title: Text('Notifications'),
              leading: Icon(CupertinoIcons.bell),
              trailing: CupertinoListTileChevron(),
            ),
            CupertinoListTile(
              title: Text('Privacy'),
              leading: Icon(CupertinoIcons.lock),
              trailing: CupertinoListTileChevron(),
            ),
            CupertinoListTile(
              title: Text('Display'),
              leading: Icon(CupertinoIcons.sun_max),
              trailing: CupertinoListTileChevron(),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A row with the label on the left and a small grey "›" chevron on the right — flatter and without the ripple/highlight feedback of Material's ListTile.

CupertinoContextMenu

A long-press-triggered preview and action menu (like iOS's 3D-touch/long-press menus).

import 'package:flutter/cupertino.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(middle: Text('Long-press the logo')),
        child: Center(
          child: CupertinoContextMenu(
            actions: [
              CupertinoContextMenuAction(
                trailingIcon: CupertinoIcons.doc_on_clipboard,
                onPressed: () => Navigator.pop(context),
                child: const Text('Copy'),
              ),
              CupertinoContextMenuAction(
                trailingIcon: CupertinoIcons.share,
                onPressed: () => Navigator.pop(context),
                child: const Text('Share'),
              ),
            ],
            child: const FlutterLogo(size: 100),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Long-pressing the logo blurs the background, enlarges the logo slightly with a subtle bounce, and pops up a small menu of actions ("Copy") right beside it.

What's Covered Now

Between Part 1 (Core, ~50 widgets) and Part 2 (this doc, ~75 more), this guide now spans roughly 120+ widgets across layout, input, Material, Cupertino, animation, gestures, painting, async, and app-structure categories — effectively the full practical Flutter widget catalog you'll encounter in real projects (excluding deep internals like render objects and low-level painting primitives, which aren't "widgets" you use directly).

If you want any specific widget from Part 2 expanded to the fuller Part-1-style writeup (more detail, bigger snippet), just point to it and I'll flesh it out.

Continues flutter_core_widgets_guide.md (Part 1) and flutter_all_widgets_guide_part2.md (Part 2). Confirming: yes, everything you listed — ExpansionTile, Chip variants, DataTable, Stepper, Tooltip, RefreshIndicator, NavigationRail, SegmentedButton, Autocomplete, and the Cupertino set — is already in Part 2. This Part 3 covers what's still missing: menus/toggles, dialogs/sheets extras, advanced scrolling, visibility & pointer control, focus/keyboard, accessibility, more animation primitives, and low-level layout/painting widgets.

18. Menus & Toggle Controls

FilledButton / FilledButton.tonal (Material 3)

The M3 filled button styles, sitting between ElevatedButton (more shadow) and TextButton (no fill).

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(
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              FilledButton(onPressed: () {}, child: const Text('Confirm')),
              const SizedBox(height: 16),
              FilledButton.tonal(onPressed: () {}, child: const Text('Maybe later')),
              const SizedBox(height: 16),
              FilledButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.send),
                label: const Text('Send'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A solid-colored rounded rectangle, flatter (no shadow) than ElevatedButton. The .tonal variant uses a softer, muted background/text color pairing instead of the vivid primary color.

ToggleButtons

A row of buttons where one or more can be toggled on/off, sharing a connected border.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ToggleButtonsDemo());
}

class ToggleButtonsDemo extends StatefulWidget {
  const ToggleButtonsDemo({super.key});
  @override
  State<ToggleButtonsDemo> createState() => _ToggleButtonsDemoState();
}

class _ToggleButtonsDemoState extends State<ToggleButtonsDemo> {
  List<bool> _selected = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ToggleButtons(
              isSelected: _selected,
              onPressed: (i) => setState(() {
                _selected = List.generate(_selected.length, (j) => j == i);
              }),
              children: const [
                Icon(Icons.format_align_left),
                Icon(Icons.format_align_center),
                Icon(Icons.format_align_right),
              ],
            ),
            const SizedBox(height: 24),
            ToggleButtons(
              isSelected: [_selected[0], _selected[1], _selected[2]],
              onPressed: (i) => setState(() => _selected[i] = !_selected[i]),
              children: const [
                Icon(Icons.format_bold),
                Icon(Icons.format_italic),
                Icon(Icons.format_underline),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Three icon buttons joined edge-to-edge inside one outlined pill, where selected ones show a filled/tinted background and the rest stay plain.

DropdownMenu (Material 3)

The M3 replacement for DropdownButton, combining a text field look with a dropdown menu.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const DropdownMenuDemo(),
  );
}

class DropdownMenuDemo extends StatefulWidget {
  const DropdownMenuDemo({super.key});
  @override
  State<DropdownMenuDemo> createState() => _DropdownMenuDemoState();
}

class _DropdownMenuDemoState extends State<DropdownMenuDemo> {
  String? _selected;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            DropdownMenu<String>(
              label: const Text('Colour'),
              onSelected: (v) => setState(() => _selected = v),
              dropdownMenuEntries: const [
                DropdownMenuEntry(value: 'red', label: 'Red'),
                DropdownMenuEntry(value: 'green', label: 'Green'),
                DropdownMenuEntry(value: 'blue', label: 'Blue'),
              ],
            ),
            const SizedBox(height: 16),
            Text(_selected == null ? 'Nothing selected' : 'Selected: \$_selected'),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: An outlined text-field-style box with a trailing dropdown arrow; tapping it opens a card-style menu list beneath, and selected text also becomes editable/filterable like a search box.

MenuAnchor / MenuBar / MenuItemButton / SubmenuButton

Desktop-style menu bar and anchored context/dropdown menus (File/Edit/View-style menus, right-click menus).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => MaterialApp(
    theme: ThemeData(useMaterial3: true),
    home: const MenuAnchorDemo(),
  );
}

class MenuAnchorDemo extends StatefulWidget {
  const MenuAnchorDemo({super.key});
  @override
  State<MenuAnchorDemo> createState() => _MenuAnchorDemoState();
}

class _MenuAnchorDemoState extends State<MenuAnchorDemo> {
  String _last = 'Tap the menu button';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MenuAnchor'),
        actions: [
          MenuAnchor(
            menuChildren: [
              MenuItemButton(
                leadingIcon: const Icon(Icons.content_copy),
                child: const Text('Copy'),
                onPressed: () => setState(() => _last = 'Copy tapped'),
              ),
              MenuItemButton(
                leadingIcon: const Icon(Icons.content_paste),
                child: const Text('Paste'),
                onPressed: () => setState(() => _last = 'Paste tapped'),
              ),
              SubmenuButton(
                child: const Text('More'),
                menuChildren: [
                  MenuItemButton(child: const Text('Select all'),
                      onPressed: () => setState(() => _last = 'Select all')),
                  MenuItemButton(child: const Text('Find'),
                      onPressed: () => setState(() => _last = 'Find')),
                ],
              ),
            ],
            builder: (c, controller, child) => IconButton(
              icon: const Icon(Icons.more_vert),
              onPressed: () => controller.isOpen ? controller.close() : controller.open(),
            ),
          ),
        ],
      ),
      body: Center(child: Text(_last, style: const TextStyle(fontSize: 18))),
    );
  }
}

▶ Open in DartPad

Looks like: A three-dot icon that, when clicked, opens a small rectangular white menu card listing "Copy" and "Paste" as rows directly beneath/beside it — the desktop equivalent of PopupMenuButton, with support for full nested submenus that flyout sideways.

ButtonBar

A horizontal row of buttons that lays out with standard spacing, typically for dialog/card actions.

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(
      home: Scaffold(
        body: Center(
          child: Card(
            margin: const EdgeInsets.all(24),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const ListTile(
                  title: Text('Confirm action'),
                  subtitle: Text('Are you sure you want to proceed?'),
                ),
                const Divider(),
                ButtonBar(
                  children: [
                    TextButton(onPressed: () {}, child: const Text('Cancel')),
                    TextButton(onPressed: () {}, child: const Text('OK')),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: "Cancel" and "OK" buttons aligned to the right edge of their container with consistent spacing between them — the standard bottom row of a dialog.

19. Dialogs & Sheets Extras

SimpleDialog / SimpleDialogOption

A lightweight dialog listing several selectable options, no separate content/action split.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: SimpleDialogDemo());
}

class SimpleDialogDemo extends StatefulWidget {
  const SimpleDialogDemo({super.key});
  @override
  State<SimpleDialogDemo> createState() => _SimpleDialogDemoState();
}

class _SimpleDialogDemoState extends State<SimpleDialogDemo> {
  String _picked = 'Nothing selected';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_picked, style: const TextStyle(fontSize: 18)),
            const SizedBox(height: 24),
            ElevatedButton(
              child: const Text('Choose a colour'),
              onPressed: () async {
                final result = await showDialog<String>(
                  context: context,
                  builder: (_) => SimpleDialog(
                    title: const Text('Choose one'),
                    children: [
                      SimpleDialogOption(
                          onPressed: () => Navigator.pop(context, 'Red'),
                          child: const Text('Red')),
                      SimpleDialogOption(
                          onPressed: () => Navigator.pop(context, 'Green'),
                          child: const Text('Green')),
                      SimpleDialogOption(
                          onPressed: () => Navigator.pop(context, 'Blue'),
                          child: const Text('Blue')),
                    ],
                  ),
                );
                if (result != null) setState(() => _picked = result);
              },
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A small centered white card with a bold title and a plain vertical list of tappable text rows beneath it — simpler than AlertDialog, with no explicit action buttons since each row IS the action.

AboutDialog

A pre-built "About this app" dialog showing name, version, icon, and legal text.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AboutDialogDemo());
}

class AboutDialogDemo extends StatelessWidget {
  const AboutDialogDemo({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show About Dialog'),
          onPressed: () => showDialog(
            context: context,
            builder: (_) => AboutDialog(
              applicationName: 'My Flutter App',
              applicationVersion: '1.0.0',
              applicationIcon: const FlutterLogo(size: 48),
              children: const [
                Text('\n© 2026 My Company. All rights reserved.'),
                SizedBox(height: 8),
                Text('A demo app showing the AboutDialog widget.'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A centered dialog with the app's icon at the top, bold app name and version beneath it, then any extra text/legal content, plus a "View licenses" link at the bottom.

DraggableScrollableSheet

A bottom sheet that can be dragged to resize between a min/initial/max height fraction of the screen.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: DraggableSheetDemo());
}

class DraggableSheetDemo extends StatelessWidget {
  const DraggableSheetDemo({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(child: Text('Tap the button to open the draggable sheet')),
      floatingActionButton: FloatingActionButton.extended(
        label: const Text('Open Sheet'),
        icon: const Icon(Icons.expand_less),
        onPressed: () => showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (_) => DraggableScrollableSheet(
            expand: false,
            initialChildSize: 0.4,
            minChildSize: 0.2,
            maxChildSize: 0.9,
            builder: (c, scrollController) => Column(
              children: [
                Container(
                  width: 40, height: 4,
                  margin: const EdgeInsets.symmetric(vertical: 8),
                  decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(2)),
                ),
                Expanded(
                  child: ListView.builder(
                    controller: scrollController,
                    itemCount: 20,
                    itemBuilder: (c, i) => ListTile(title: Text('Item \$i')),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A panel covering half the screen with a small grab-handle bar at its top edge; dragging that handle up/down resizes the panel between a quarter and nearly full screen height, its content scrolling once it's maxed out.

showBottomSheet (persistent)

Shows a non-modal bottom sheet that stays alongside interactive page content (as opposed to the modal showModalBottomSheet).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: PersistentSheetDemo());
}

class PersistentSheetDemo extends StatefulWidget {
  const PersistentSheetDemo({super.key});
  @override
  State<PersistentSheetDemo> createState() => _PersistentSheetDemoState();
}

class _PersistentSheetDemoState extends State<PersistentSheetDemo> {
  PersistentBottomSheetController? _sheet;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Persistent Bottom Sheet')),
      body: Center(
        child: Builder(
          builder: (ctx) => ElevatedButton(
            child: Text(_sheet != null ? 'Close sheet' : 'Open persistent sheet'),
            onPressed: () {
              if (_sheet != null) {
                _sheet!.close();
                setState(() => _sheet = null);
              } else {
                final s = Scaffold.of(ctx).showBottomSheet(
                  (c) => Container(
                    height: 140,
                    color: Colors.blue.shade50,
                    child: const Center(child: Text('Persistent sheet — page still interactive above')),
                  ),
                );
                setState(() => _sheet = s);
                s.closed.then((_) => setState(() => _sheet = null));
              }
            },
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A panel sliding up from the bottom, similar to the modal version, but the rest of the screen stays fully interactive and undimmed behind it.

20. Advanced Scrolling

ReorderableListView

A ListView whose items can be long-pressed and dragged to reorder.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ReorderableDemo());
}

class ReorderableDemo extends StatefulWidget {
  const ReorderableDemo({super.key});
  @override
  State<ReorderableDemo> createState() => _ReorderableDemoState();
}

class _ReorderableDemoState extends State<ReorderableDemo> {
  final _items = ['Eggs', 'Milk', 'Butter', 'Bread', 'Cheese'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Long-press to reorder')),
      body: ReorderableListView(
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (newIndex > oldIndex) newIndex--;
            _items.insert(newIndex, _items.removeAt(oldIndex));
          });
        },
        children: _items
            .map((item) => ListTile(
                  key: ValueKey(item),
                  title: Text(item),
                  trailing: const Icon(Icons.drag_handle),
                ))
            .toList(),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Long-pressing a row lifts it slightly with a shadow, letting you drag it up/down past other rows (which slide out of the way) until you release it into its new position.

NestedScrollView

Coordinates an outer scrollable (e.g., collapsing header) with an inner scrollable (e.g., tab content), so they scroll together correctly.

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(
      home: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (c, innerBoxIsScrolled) => [
            SliverAppBar(
              title: const Text('Profile'),
              expandedHeight: 200,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  color: Colors.indigo,
                  child: const Center(
                    child: CircleAvatar(radius: 48, child: Icon(Icons.person, size: 48)),
                  ),
                ),
              ),
            ),
          ],
          body: ListView.builder(
            itemCount: 30,
            itemBuilder: (c, i) => ListTile(title: Text('Post \$i')),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A large header (photo/title) that scrolls away and collapses as you scroll down through the inner list, exactly like scrolling a profile page with a big cover photo up top.

ListWheelScrollView

A vertically scrolling wheel of items with a 3D curved perspective (like CupertinoPicker's engine, usable directly).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ListWheelDemo());
}

class ListWheelDemo extends StatefulWidget {
  const ListWheelDemo({super.key});
  @override
  State<ListWheelDemo> createState() => _ListWheelDemoState();
}

class _ListWheelDemoState extends State<ListWheelDemo> {
  int _selected = 0;

  @override
  Widget build(BuildContext context) {
    final items = List.generate(20, (i) => 'Item \$i');
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListWheelScrollView(
              itemExtent: 50,
              perspective: 0.004,
              onSelectedItemChanged: (i) => setState(() => _selected = i),
              children: items
                  .map((s) => Center(
                      child: Text(s, style: const TextStyle(fontSize: 22))))
                  .toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text('Selected: \${items[_selected]}',
                style: const TextStyle(fontSize: 18)),
          ),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Items appear to curve away in perspective above and below the centered, undistorted middle item — a slot-machine reel effect.

ScrollConfiguration

Overrides default scroll physics/behavior (overscroll glow, scrollbar visibility) for a subtree.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('ScrollConfiguration')),
        body: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  const Padding(padding: EdgeInsets.all(8), child: Text('Default (with scrollbar)')),
                  Expanded(
                    child: ListView.builder(
                      itemCount: 20,
                      itemBuilder: (c, i) => ListTile(title: Text('Row \$i')),
                    ),
                  ),
                ],
              ),
            ),
            const VerticalDivider(),
            Expanded(
              child: Column(
                children: [
                  const Padding(padding: EdgeInsets.all(8), child: Text('No scrollbar / no overscroll')),
                  Expanded(
                    child: ScrollConfiguration(
                      behavior: const ScrollBehavior().copyWith(
                        scrollbars: false,
                        overscroll: false,
                      ),
                      child: ListView.builder(
                        itemCount: 20,
                        itemBuilder: (c, i) => ListTile(title: Text('Row \$i')),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Not visible itself, but it can remove the blue Android-style "glow" that normally appears when over-scrolling, or hide the scrollbar track that would otherwise be drawn.

21. Visibility & Pointer Control

Visibility

Shows or completely removes a child from layout/painting/hit-testing (cheaper than conditionally building it, but similar visual effect).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: VisibilityDemo());
}

class VisibilityDemo extends StatefulWidget {
  const VisibilityDemo({super.key});
  @override
  State<VisibilityDemo> createState() => _VisibilityDemoState();
}

class _VisibilityDemoState extends State<VisibilityDemo> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Row of boxes — middle one toggled:'),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(width: 60, height: 60, color: Colors.blue),
              Visibility(
                visible: _visible,
                child: Container(width: 60, height: 60, margin: const EdgeInsets.symmetric(horizontal: 8), color: Colors.red),
              ),
              Container(width: 60, height: 60, color: Colors.green),
            ],
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: () => setState(() => _visible = !_visible),
            child: Text(_visible ? 'Hide (collapses space)' : 'Show'),
          ),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A yellow bar that's either fully present or completely gone (collapsing the space it would have used), with no fade transition — an instant on/off toggle.

Offstage

Lays a child out (so its size is known) but doesn't paint or hit-test it.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: OffstageDemo());
}

class OffstageDemo extends StatefulWidget {
  const OffstageDemo({super.key});
  @override
  State<OffstageDemo> createState() => _OffstageDemoState();
}

class _OffstageDemoState extends State<OffstageDemo> {
  bool _offstage = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Below: an Offstage widget'),
          const SizedBox(height: 12),
          Offstage(
            offstage: _offstage,
            child: Container(width: 200, height: 80, color: Colors.orange,
                child: const Center(child: Text('I am Offstage=false now!'))),
          ),
          const SizedBox(height: 24),
          Text('offstage = \$_offstage  → box is \${_offstage ? "invisible (still measured)" : "visible"}'),
          const SizedBox(height: 8),
          ElevatedButton(
            onPressed: () => setState(() => _offstage = !_offstage),
            child: Text(_offstage ? 'Make visible' : 'Put offstage'),
          ),
        ],
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Nothing visible at all — the text is fully invisible and untappable, though Flutter still computes its size internally for other purposes.

AbsorbPointer / IgnorePointer

Block touch/gesture input from reaching a subtree — AbsorbPointer swallows the touch itself, IgnorePointer lets it pass through to whatever's behind.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: PointerBlockDemo());
}

class PointerBlockDemo extends StatefulWidget {
  const PointerBlockDemo({super.key});
  @override
  State<PointerBlockDemo> createState() => _PointerBlockDemoState();
}

class _PointerBlockDemoState extends State<PointerBlockDemo> {
  int _taps = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('AbsorbPointer: button looks enabled but is inert'),
            const SizedBox(height: 8),
            AbsorbPointer(
              child: ElevatedButton(
                onPressed: () => setState(() => _taps++),
                child: const Text('Tap me (absorbed)'),
              ),
            ),
            const SizedBox(height: 24),
            const Text('IgnorePointer: taps pass through to widget below'),
            const SizedBox(height: 8),
            Stack(
              children: [
                ElevatedButton(
                  onPressed: () => setState(() => _taps++),
                  child: const Text('Underlying button (count: \$_taps)'),
                ),
                IgnorePointer(
                  child: Container(width: 200, height: 42, color: Colors.red.withOpacity(0.3),
                      child: const Center(child: Text('Overlay (ignored)'))),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The button renders normally (full color, not greyed out) but taps on it do nothing — visually identical to an enabled button, functionally inert.

MouseRegion

Detects mouse hover/enter/exit events (desktop/web) and can change the cursor icon.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: MouseRegionDemo());
}

class MouseRegionDemo extends StatefulWidget {
  const MouseRegionDemo({super.key});
  @override
  State<MouseRegionDemo> createState() => _MouseRegionDemoState();
}

class _MouseRegionDemoState extends State<MouseRegionDemo> {
  bool _hovering = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          onEnter: (_) => setState(() => _hovering = true),
          onExit: (_) => setState(() => _hovering = false),
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            width: 200, height: 80,
            color: _hovering ? Colors.blue : Colors.grey.shade300,
            child: Center(
              child: Text(
                _hovering ? 'Hovering!' : 'Hover over me',
                style: TextStyle(color: _hovering ? Colors.white : Colors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A plain grey box that shows no visible change on its own, but the mouse cursor switches to a pointing hand when hovering over it.

Listener

A lower-level pointer event listener (down/move/up/cancel) beneath GestureDetector, useful for custom gesture handling.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ListenerDemo());
}

class ListenerDemo extends StatefulWidget {
  const ListenerDemo({super.key});
  @override
  State<ListenerDemo> createState() => _ListenerDemoState();
}

class _ListenerDemoState extends State<ListenerDemo> {
  String _event = 'No pointer event yet';
  Offset _pos = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Listener(
              onPointerDown: (e) => setState(() { _event = 'DOWN'; _pos = e.localPosition; }),
              onPointerMove: (e) => setState(() { _event = 'MOVE'; _pos = e.localPosition; }),
              onPointerUp: (e) => setState(() { _event = 'UP'; _pos = e.localPosition; }),
              child: Container(
                width: 220, height: 220,
                color: Colors.indigo,
                child: const Center(child: Text('Tap / drag here', style: TextStyle(color: Colors.white))),
              ),
            ),
            const SizedBox(height: 16),
            Text('\$_event @ (\${_pos.dx.toInt()}, \${_pos.dy.toInt()})'),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Just an indigo square — purely a wrapper for raw pointer-event plumbing, with no built-in visual feedback.

22. Focus & Keyboard

Focus / FocusScope

Manages keyboard focus for a widget or a group of widgets (which one currently "has focus" for typing/tabbing).

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: FocusDemo());
}

class FocusDemo extends StatefulWidget {
  const FocusDemo({super.key});
  @override
  State<FocusDemo> createState() => _FocusDemoState();
}

class _FocusDemoState extends State<FocusDemo> {
  bool _field1Focused = false;
  bool _field2Focused = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: FocusScope(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Focus(
                onFocusChange: (v) => setState(() => _field1Focused = v),
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  decoration: BoxDecoration(
                    border: Border.all(color: _field1Focused ? Colors.blue : Colors.grey, width: _field1Focused ? 2 : 1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Padding(padding: EdgeInsets.symmetric(horizontal: 8), child: TextField(decoration: InputDecoration(labelText: 'Field 1', border: InputBorder.none))),
                ),
              ),
              const SizedBox(height: 16),
              Focus(
                onFocusChange: (v) => setState(() => _field2Focused = v),
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  decoration: BoxDecoration(
                    border: Border.all(color: _field2Focused ? Colors.blue : Colors.grey, width: _field2Focused ? 2 : 1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: const Padding(padding: EdgeInsets.symmetric(horizontal: 8), child: TextField(decoration: InputDecoration(labelText: 'Field 2', border: InputBorder.none))),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: No visible difference from the underlying TextField itself — but the app can react to focus changes, e.g., highlighting a border or scrolling a field into view when it gains focus.

FocusTraversalGroup

Controls the order in which Tab/Shift-Tab or D-pad navigation moves between focusable widgets.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Tab between fields')),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: FocusTraversalGroup(
            policy: WidgetOrderTraversalPolicy(),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                TextField(decoration: InputDecoration(labelText: 'First name', border: OutlineInputBorder())),
                SizedBox(height: 16),
                TextField(decoration: InputDecoration(labelText: 'Last name', border: OutlineInputBorder())),
                SizedBox(height: 16),
                TextField(decoration: InputDecoration(labelText: 'Email', border: OutlineInputBorder())),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Not visible — but pressing Tab moves the blinking cursor between the two text fields in the exact order you defined, rather than an arbitrary default order.

Shortcuts / Actions / CallbackShortcuts

Bind keyboard key combinations to app-level actions/intents (e.g., Ctrl+S to save).

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: ShortcutsDemo());
}

class ShortcutsDemo extends StatefulWidget {
  const ShortcutsDemo({super.key});
  @override
  State<ShortcutsDemo> createState() => _ShortcutsDemoState();
}

class _ShortcutsDemoState extends State<ShortcutsDemo> {
  String _msg = 'Try Ctrl+S or Ctrl+Z';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CallbackShortcuts(
        bindings: {
          const SingleActivator(LogicalKeyboardKey.keyS, control: true): () => setState(() => _msg = 'Ctrl+S pressed — saved!'),
          const SingleActivator(LogicalKeyboardKey.keyZ, control: true): () => setState(() => _msg = 'Ctrl+Z pressed — undone!'),
        },
        child: Focus(
          autofocus: true,
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Icon(Icons.keyboard, size: 64),
                const SizedBox(height: 16),
                Text(_msg, style: const TextStyle(fontSize: 18)),
                const SizedBox(height: 8),
                const Text('(click here first, then use keyboard)', style: TextStyle(color: Colors.grey)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Ordinary text on screen; pressing Ctrl+S triggers your save logic invisibly, with no on-screen indication other than whatever effect the action itself has.

KeyboardListener

Listens for raw physical key press/release events.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: KeyboardListenerDemo());
}

class KeyboardListenerDemo extends StatefulWidget {
  const KeyboardListenerDemo({super.key});
  @override
  State<KeyboardListenerDemo> createState() => _KeyboardListenerDemoState();
}

class _KeyboardListenerDemoState extends State<KeyboardListenerDemo> {
  final _focusNode = FocusNode();
  String _last = 'Press any key (click box first)';

  @override
  void dispose() { _focusNode.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: KeyboardListener(
          focusNode: _focusNode,
          autofocus: true,
          onKeyEvent: (e) {
            if (e is KeyDownEvent) setState(() => _last = 'Key: \${e.logicalKey.keyLabel}');
          },
          child: GestureDetector(
            onTap: () => _focusNode.requestFocus(),
            child: Container(
              width: 280, height: 120,
              color: Colors.grey.shade200,
              child: Center(child: Text(_last, textAlign: TextAlign.center)),
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A plain grey box with no visual feedback of its own — purely a hook for reacting to keystrokes while this widget is focused.

23. Accessibility (Semantics)

Semantics

Attaches accessibility metadata (labels, roles, hints) to a widget for screen readers.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              Semantics(
                label: 'Submit the form',
                button: true,
                child: Icon(Icons.check_circle, size: 80, color: Colors.green),
              ),
              SizedBox(height: 8),
              Text('Icon above is announced as:\n"Submit the form, button"\nby screen readers',
                  textAlign: TextAlign.center),
              SizedBox(height: 32),
              Semantics(
                label: 'Product price: twenty-nine dollars and ninety-nine cents',
                child: Text('\$29.99', style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold)),
              ),
              Text('Price above is announced in full words', style: TextStyle(color: Colors.grey)),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Visually just a checkmark icon — the difference only shows up in a screen reader, which will announce "Submit the form, button" when focus lands on it.

ExcludeSemantics / MergeSemantics

Hide a subtree from the accessibility tree, or merge several nodes' semantics into a single announced unit.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('MergeSemantics — announced as one unit:', style: TextStyle(fontWeight: FontWeight.bold)),
              const SizedBox(height: 8),
              MergeSemantics(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    Icon(Icons.star, color: Colors.amber),
                    SizedBox(width: 4),
                    Text('4.5 rating', style: TextStyle(fontSize: 18)),
                  ],
                ),
              ),
              const SizedBox(height: 32),
              const Text('ExcludeSemantics — hidden from a11y tree:', style: TextStyle(fontWeight: FontWeight.bold)),
              const SizedBox(height: 8),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  ExcludeSemantics(child: Icon(Icons.info_outline, color: Colors.grey)),
                  SizedBox(width: 8),
                  Text('Decorative icon excluded from screen reader'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A star icon next to "4.5 rating" text — visually unchanged, but a screen reader announces them together as one phrase ("4.5 rating") instead of two separate stops.

24. More Animation Primitives

AnimatedTheme

Smoothly animates a Theme change (e.g., switching light/dark mode) across all themed descendants.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedThemeDemo());
}

class AnimatedThemeDemo extends StatefulWidget {
  const AnimatedThemeDemo({super.key});
  @override
  State<AnimatedThemeDemo> createState() => _AnimatedThemeDemoState();
}

class _AnimatedThemeDemoState extends State<AnimatedThemeDemo> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedTheme(
      data: _dark ? ThemeData.dark() : ThemeData.light(),
      duration: const Duration(milliseconds: 500),
      child: Builder(
        builder: (ctx) => Scaffold(
          appBar: AppBar(title: const Text('AnimatedTheme')),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Card(
                  child: Padding(
                    padding: const EdgeInsets.all(24),
                    child: Text('Theme animates smoothly', style: Theme.of(ctx).textTheme.headlineSmall),
                  ),
                ),
                const SizedBox(height: 24),
                ElevatedButton(
                  onPressed: () => setState(() => _dark = !_dark),
                  child: Text(_dark ? 'Switch to Light' : 'Switch to Dark'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Background and text colors throughout the subtree smoothly cross-fade between light and dark palettes over 400ms, rather than flipping instantly.

AnimatedPhysicalModel

Animates elevation, shape, and color changes with Material's shadow-casting physical model.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: AnimatedPhysicalModelDemo());
}

class AnimatedPhysicalModelDemo extends StatefulWidget {
  const AnimatedPhysicalModelDemo({super.key});
  @override
  State<AnimatedPhysicalModelDemo> createState() => _AnimatedPhysicalModelDemoState();
}

class _AnimatedPhysicalModelDemoState extends State<AnimatedPhysicalModelDemo> {
  bool _raised = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            GestureDetector(
              onTap: () => setState(() => _raised = !_raised),
              child: AnimatedPhysicalModel(
                duration: const Duration(milliseconds: 400),
                curve: Curves.easeInOut,
                shape: BoxShape.rectangle,
                elevation: _raised ? 16 : 2,
                color: _raised ? Colors.indigo : Colors.white,
                shadowColor: Colors.black,
                borderRadius: BorderRadius.circular(12),
                child: SizedBox(
                  width: 140, height: 80,
                  child: Center(
                    child: Text(
                      _raised ? 'Lifted' : 'Tap to lift',
                      style: TextStyle(color: _raised ? Colors.white : Colors.black),
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 8),
            Text('Elevation: \${_raised ? 16 : 2}'),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A white square whose drop shadow smoothly grows deeper/softer as it "lifts" higher off the page, rather than jumping between shadow depths.

PositionedTransition / AlignTransition / RelativePositionedTransition / DecoratedBoxTransition

Explicit, controller-driven counterparts to AnimatedPositioned/AnimatedAlign/etc. for fine-grained animation control.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: PositionedTransitionDemo());
}

class PositionedTransitionDemo extends StatefulWidget {
  const PositionedTransitionDemo({super.key});
  @override
  State<PositionedTransitionDemo> createState() => _PositionedTransitionDemoState();
}

class _PositionedTransitionDemoState extends State<PositionedTransitionDemo>
    with SingleTickerProviderStateMixin {
  late final AnimationController _ctrl = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 800),
  )..repeat(reverse: true);

  late final Animation<RelativeRect> _rect = RelativeRectTween(
    begin: const RelativeRect.fromLTRB(16, 16, 16, 16),
    end: const RelativeRect.fromLTRB(80, 80, 80, 80),
  ).animate(CurvedAnimation(parent: _ctrl, curve: Curves.easeInOut));

  @override
  void dispose() { _ctrl.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 260, height: 260,
          child: Stack(
            children: [
              Container(decoration: BoxDecoration(border: Border.all(color: Colors.grey.shade300))),
              PositionedTransition(
                rect: _rect,
                child: const FlutterLogo(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Same visual result as their "Animated*" siblings (a logo sliding to a new spot), but driven manually by an AnimationController you can pause, reverse, or chain with other animations.

25. Low-Level Layout & Custom Painting

DecoratedBox

Paints a decoration (color, border, gradient, shadow) behind/around a child — what Container uses internally.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.indigo.shade50,
                  border: Border.all(color: Colors.indigo, width: 2),
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 8, offset: Offset(2, 4))],
                ),
                child: const Padding(padding: EdgeInsets.all(20), child: Text('DecoratedBox', style: TextStyle(fontSize: 18))),
              ),
              const SizedBox(height: 24),
              DecoratedBox(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(colors: [Colors.purple, Colors.blue]),
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                child: const Padding(padding: EdgeInsets.symmetric(horizontal: 32, vertical: 12),
                    child: Text('Gradient box', style: TextStyle(color: Colors.white, fontSize: 18))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A thin black rounded-corner outline around the word "Boxed" with some inner padding — functionally the border/background half of what Container gives you.

LimitedBox

Constrains a child's size only when the parent gives unbounded constraints (e.g., inside a scrolling list).

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(
      home: Scaffold(
        body: Column(
          children: [
            const Padding(padding: EdgeInsets.all(8), child: Text('Without LimitedBox — throws layout error in Column:')),
            Padding(
              padding: const EdgeInsets.all(8),
              child: LimitedBox(
                maxHeight: 120,
                child: ListView.builder(
                  itemCount: 20,
                  itemBuilder: (c, i) => ListTile(title: Text('Row \$i')),
                ),
              ),
            ),
            const Padding(padding: EdgeInsets.all(8),
                child: Text('With LimitedBox(maxHeight: 120) — list capped at 120px in Column', style: TextStyle(color: Colors.green))),
          ],
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A list that caps at 100px tall when placed somewhere with no inherent height limit (like inside a Column), rather than throwing a layout error or expanding infinitely.

SizedOverflowBox

Reports one size to its parent for layout purposes, while painting a child of a possibly different actual size.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                color: Colors.grey.shade200,
                child: SizedOverflowBox(
                  size: const Size(100, 100),
                  alignment: Alignment.center,
                  child: Container(width: 160, height: 160, color: Colors.pink.withOpacity(0.6),
                      child: const Center(child: Text('160px box
claims 100px', textAlign: TextAlign.center, style: TextStyle(color: Colors.white)))),
                ),
              ),
              const SizedBox(height: 8),
              const Text('Grey area = 100×100 claimed size
Pink box = 160×160 actual paint', textAlign: TextAlign.center),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A pink square that visually spills 25px past each edge of the 100×100 space it claims to occupy, since layout math and painted size are deliberately mismatched.

Flow

A highly custom, performance-oriented layout widget where you manually position each child via transform matrices.

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: FlowDemo());
}

class FlowDemo extends StatefulWidget {
  const FlowDemo({super.key});
  @override
  State<FlowDemo> createState() => _FlowDemoState();
}

class _FlowDemoState extends State<FlowDemo> with SingleTickerProviderStateMixin {
  late final AnimationController _ctrl = AnimationController(vsync: this, duration: const Duration(milliseconds: 600));
  bool _open = false;

  void _toggle() {
    setState(() => _open = !_open);
    _open ? _ctrl.forward() : _ctrl.reverse();
  }

  @override
  void dispose() { _ctrl.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200, height: 200,
          child: Flow(
            delegate: FanOutDelegate(_ctrl),
            children: [
              ...[Colors.red, Colors.green, Colors.blue, Colors.orange].map((c) =>
                FloatingActionButton(mini: true, backgroundColor: c, onPressed: _toggle, child: const Icon(Icons.star))),
              FloatingActionButton(onPressed: _toggle, child: Icon(_open ? Icons.close : Icons.add)),
            ],
          ),
        ),
      ),
    );
  }
}

class FanOutDelegate extends FlowDelegate {
  final Animation<double> _anim;
  FanOutDelegate(this._anim) : super(repaint: _anim);

  @override
  void paintChildren(FlowPaintingContext c) {
    final n = c.childCount - 1;
    for (var i = 0; i < n; i++) {
      final progress = _anim.value;
      final angle = (pi / 2) / (n - 1) * i;
      final dist = 80.0 * progress;
      c.paintChild(i, transform: Matrix4.identity()
        ..translate(80 + dist * cos(pi + angle), 80 + dist * sin(pi / 2 + angle)));
    }
    c.paintChild(n, transform: Matrix4.identity()..translate(80.0 - 20, 80.0 - 20));
  }

  @override
  bool shouldRepaint(FanOutDelegate old) => false;
}

▶ Open in DartPad

Looks like: Entirely dependent on the custom FlowDelegate — commonly used for things like a fan-out menu of icons or a custom carousel where you need precise per-frame control over each child's position/rotation/scale.

CustomMultiChildLayout / CustomSingleChildLayout

Lower-level layout widgets where you implement a LayoutDelegate to size/position children by custom logic, rather than using Row/Column/Stack.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 300, height: 300,
            child: CustomMultiChildLayout(
              delegate: DiagonalDelegate(),
              children: [
                LayoutId(id: 0, child: Container(width: 80, height: 80, color: Colors.red)),
                LayoutId(id: 1, child: Container(width: 80, height: 80, color: Colors.green)),
                LayoutId(id: 2, child: Container(width: 80, height: 80, color: Colors.blue)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class DiagonalDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    const childSize = Size(80, 80);
    final loose = BoxConstraints.loose(childSize);
    for (var i = 0; i < 3; i++) {
      layoutChild(i, loose);
      positionChild(i, Offset(i * 80.0, i * 80.0));
    }
  }
  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate old) => false;
}

▶ Open in DartPad

Looks like: Whatever custom arrangement the delegate specifies — used when no built-in layout widget (Row, Stack, Align, etc.) can express the positioning logic you need.

Banner

Draws a diagonal ribbon/label across a corner (e.g., Flutter's own "DEBUG" banner in dev builds).

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(
      home: Scaffold(
        body: Center(
          child: Wrap(
            spacing: 16, runSpacing: 16,
            children: [
              Banner(
                message: 'NEW',
                location: BannerLocation.topEnd,
                color: Colors.red,
                child: Card(child: const SizedBox(width: 130, height: 90, child: Center(child: Text('Product A')))),
              ),
              Banner(
                message: 'SALE',
                location: BannerLocation.topStart,
                color: Colors.green,
                child: Card(child: const SizedBox(width: 130, height: 90, child: Center(child: Text('Product B')))),
              ),
              Banner(
                message: 'DEBUG',
                location: BannerLocation.bottomEnd,
                child: Card(child: const SizedBox(width: 130, height: 90, child: Center(child: Text('Product C')))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A diagonal red ribbon reading "NEW" stretched across the top-right corner of the card, overlapping its edge at a 45° angle.

RepaintBoundary

Isolates a subtree into its own compositing layer so it repaints independently — a performance tool, not a visual one.

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: RepaintBoundaryDemo());
}

class RepaintBoundaryDemo extends StatefulWidget {
  const RepaintBoundaryDemo({super.key});
  @override
  State<RepaintBoundaryDemo> createState() => _RepaintBoundaryDemoState();
}

class _RepaintBoundaryDemoState extends State<RepaintBoundaryDemo> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Expensive painting isolated by RepaintBoundary'),
          const SizedBox(height: 16),
          RepaintBoundary(
            child: CustomPaint(
              size: const Size(200, 200),
              painter: CirclePainter(),
            ),
          ),
          const SizedBox(height: 16),
          Text('Tap counter: \$_count  (only counter area repaints, not the circle)'),
          ElevatedButton(
            onPressed: () => setState(() => _count++),
            child: const Text('Increment (does NOT repaint circle above)'),
          ),
        ],
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final cx = size.width / 2, cy = size.height / 2;
    for (var i = 1; i <= 5; i++) {
      canvas.drawCircle(Offset(cx, cy), i * 18.0,
          Paint()..color = Colors.primaries[i * 2 % Colors.primaries.length].withOpacity(0.6)..style = PaintingStyle.stroke..strokeWidth = 4);
    }
  }
  @override
  bool shouldRepaint(covariant CustomPainter old) => false;
}

▶ Open in DartPad

Looks like: No visual difference at all — its effect is purely on rendering performance, preventing an expensive-to-paint child from forcing repaints of unrelated siblings.

PhysicalModel / PhysicalShape

Clips a child to a shape while also casting a Material-style shadow — the primitive Card and Material build on.

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(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              PhysicalModel(
                color: Colors.white,
                elevation: 8,
                borderRadius: BorderRadius.circular(16),
                child: const SizedBox(width: 160, height: 80,
                    child: Center(child: Text('PhysicalModel', style: TextStyle(fontSize: 16)))),
              ),
              const SizedBox(height: 32),
              PhysicalShape(
                color: Colors.indigo.shade50,
                elevation: 6,
                clipper: const ShapeBorderClipper(shape: StadiumBorder()),
                child: const SizedBox(width: 160, height: 56,
                    child: Center(child: Text('PhysicalShape (stadium)', style: TextStyle(fontSize: 14)))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A white rounded rectangle with a soft, correctly-angled drop shadow beneath it — visually the same as a plain Card, since that's essentially what Card wraps.

26. Text, Selection & Images (extras)

SelectableText

Like Text, but lets the user long-press/drag to select and copy the text.

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(
      home: Scaffold(
        body: const Center(
          child: Padding(
            padding: EdgeInsets.all(24),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Long-press either paragraph to select & copy:', style: TextStyle(fontWeight: FontWeight.bold)),
                SizedBox(height: 16),
                SelectableText(
                  'SelectableText lets users highlight, copy, and share this content — identical to plain Text visually, but interactive.',
                  style: TextStyle(fontSize: 16),
                ),
                SizedBox(height: 16),
                SelectableText(
                  'The quick brown fox jumps over the lazy dog.',
                  style: TextStyle(fontSize: 16, fontStyle: FontStyle.italic),
                  cursorColor: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Identical to plain Text until you long-press it — then it shows the standard text-selection handles and a copy/share popup toolbar, just like selecting text in a browser.

Text.rich / WidgetSpan

Lets a block of text embed non-text widgets (like a small icon) inline within the flow of a sentence.

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(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text.rich(
                  TextSpan(text: 'Rated ', children: [
                    WidgetSpan(child: Icon(Icons.star, size: 20, color: Colors.amber)),
                    TextSpan(text: ' 4.5 out of 5'),
                  ]),
                  style: TextStyle(fontSize: 20),
                ),
                SizedBox(height: 24),
                Text.rich(
                  TextSpan(
                    text: 'Download the ',
                    children: [
                      WidgetSpan(child: Icon(Icons.android, size: 18, color: Colors.green)),
                      TextSpan(text: ' Android or '),
                      WidgetSpan(child: Icon(Icons.apple, size: 18, color: Colors.grey)),
                      TextSpan(text: ' iOS app today!'),
                    ],
                  ),
                  style: TextStyle(fontSize: 18),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: The sentence "Rated ★ 4.5" where the star is a real inline icon sitting at the same baseline as the surrounding letters, not just an emoji character.

FadeInImage

Shows a placeholder (often a blurred/low-res thumbnail) that fades into the real image once it finishes loading.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

final _transparent = Uint8List.fromList([
  0x89,0x50,0x4e,0x47,0x0d,0x0a,0x1a,0x0a,0x00,0x00,0x00,0x0d,0x49,0x48,
  0x44,0x52,0x00,0x00,0x00,0x01,0x00,0x00,0x00,0x01,0x08,0x06,0x00,0x00,
  0x00,0x1f,0x15,0xc4,0x89,0x00,0x00,0x00,0x0b,0x49,0x44,0x41,0x54,0x78,
  0x9c,0x62,0x00,0x01,0x00,0x00,0x05,0x00,0x01,0x0d,0x0a,0x2d,0xb4,0x00,
  0x00,0x00,0x00,0x49,0x45,0x4e,0x44,0xae,0x42,0x60,0x82,
]);

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FadeInImage')),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Image fades in from transparent placeholder:'),
              const SizedBox(height: 12),
              FadeInImage.memoryNetwork(
                placeholder: _transparent,
                image: 'https://picsum.photos/300/200',
                width: 300, height: 200,
                fit: BoxFit.cover,
                fadeInDuration: const Duration(milliseconds: 800),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A blank/placeholder box that smoothly crossfades into the full photo once it's downloaded, rather than the image just popping in abruptly.

27. Overlay & Root Structure

Overlay / OverlayEntry

A stack of visual layers above the main app content, used for things like dropdown menus, dragged-item previews, and tooltips under the hood.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: OverlayDemo());
}

class OverlayDemo extends StatefulWidget {
  const OverlayDemo({super.key});
  @override
  State<OverlayDemo> createState() => _OverlayDemoState();
}

class _OverlayDemoState extends State<OverlayDemo> {
  OverlayEntry? _entry;

  void _showOverlay(BuildContext ctx) {
    _entry = OverlayEntry(
      builder: (c) => Positioned(
        top: 120, right: 24,
        child: Material(
          color: Colors.transparent,
          child: GestureDetector(
            onTap: _removeOverlay,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              decoration: BoxDecoration(
                color: Colors.indigo,
                borderRadius: BorderRadius.circular(8),
                boxShadow: const [BoxShadow(color: Colors.black38, blurRadius: 6)],
              ),
              child: const Text('Floating overlay!\nTap to dismiss',
                  style: TextStyle(color: Colors.white)),
            ),
          ),
        ),
      ),
    );
    Overlay.of(ctx).insert(_entry!);
  }

  void _removeOverlay() {
    _entry?.remove();
    _entry = null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Show Overlay'),
          onPressed: () => _showOverlay(context),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: Text that appears to float above everything else currently on screen, unaffected by scrolling or the layout of the page beneath it — the mechanism many popups/tooltips are built from.

WidgetsApp

The bare, non-Material/non-Cupertino root app widget that MaterialApp and CupertinoApp are themselves built on top of.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      color: Colors.white,
      builder: (context, child) => Directionality(
        textDirection: TextDirection.ltr,
        child: Container(
          color: Colors.grey.shade100,
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.widgets, size: 64, color: Colors.indigo),
                SizedBox(height: 16),
                Text(
                  'WidgetsApp — bare app root\nno Material or Cupertino styling',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18, color: Colors.black87),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

▶ Open in DartPad

Looks like: A completely unstyled app shell — no default fonts, colors, or platform conventions — just your own builder content, useful for apps that want zero Material/Cupertino styling baked in.

Flutter Core Widgets — Part 1

Nayden Gochev — Tue, 07 Jul 2026 09:25:07 +0000

Flutter Core Widgets — Part 1

A reference guide to the ~50 most-used Flutter widgets, grouped by category. Each entry includes a short description, a runnable code snippet, and a text description of how it renders on screen (since Flutter renders natively, this doc describes the visual output rather than embedding a screenshot).

**NOTE: if you are using "Open in DartPad" do not foreget to hit RUN and give it time to load, it takes about 10-15 seconds to load.

Basic Widgets
Layout Widgets
Scrolling & Lists
Buttons
Input & Forms
Structural / Material
Feedback & Overlays
Navigation

1. Basic Widgets

Text

Displays a string of styled text.

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
)

▶ Open in DartPad

How it looks: A single line reading "Hello, Flutter!" in large, bold, blue lettering. No border or background — just the rendered glyphs.

RichText

Displays text with multiple styles in one block, via TextSpan children.

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black, fontSize: 20),
    children: [
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world', style: TextStyle(fontStyle: FontStyle.italic)),
    ],
  ),
)

▶ Open in DartPad

How it looks: One continuous line — "Hello bold world" — where each segment has a different style, but they all flow together as a single sentence.

Image

Displays an image from assets, network, memory, or file.

Image.network(
  'https://picsum.photos/200',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

▶ Open in DartPad

How it looks: A 200×200 pixel square photo, cropped to fill that box exactly (no distortion, edges may be cropped).

Icon

Displays a glyph from an icon font (usually Material Icons).

Icon(Icons.favorite, color: Colors.red, size: 48)

▶ Open in DartPad

How it looks: A solid red heart shape, 48 logical pixels tall, centered in its own bounding box.

Container

A general-purpose box for padding, margin, decoration, alignment, and sizing.

Container(
  width: 150,
  height: 100,
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 4, offset: Offset(2, 2))],
  ),
  child: const Text('Box'),
)

▶ Open in DartPad

How it looks: A rounded-corner amber rectangle (150×100) with a soft drop shadow beneath it, and the word "Box" sitting inside with 16px of breathing room on all sides.

SizedBox

Forces a child (or empty space) to an exact width/height.

SizedBox(width: 100, height: 50, child: Container(color: Colors.green))

▶ Open in DartPad

How it looks: A flat green rectangle exactly 100 wide by 50 tall — commonly used invisibly (no child) as fixed spacing between other widgets.

Placeholder

A crosshatched box, useful while prototyping layouts before real content exists.

Placeholder(fallbackWidth: 200, fallbackHeight: 100)

▶ Open in DartPad

How it looks: A 200×100 rectangle with a thin black border and a diagonal "X" drawn corner-to-corner inside it — a visual stand-in for "content goes here."

2. Layout Widgets

Row

Lays children out horizontally.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: const [
    Icon(Icons.star), Icon(Icons.star), Icon(Icons.star),
  ],
)

▶ Open in DartPad

How it looks:

[ ★        ★        ★ ]

Three stars spread evenly across the full width of the row, with equal gaps on both sides and between each icon.

Column

Lays children out vertically. Same API as Row, opposite axis.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text('Line one'),
    Text('Line two'),
    Text('Line three'),
  ],
)

▶ Open in DartPad

How it looks:

Line one
Line two
Line three

Three lines stacked top to bottom, all left-aligned.

Stack

Overlaps children on top of one another (z-axis layering).

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 150, height: 150, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.orange),
    const Text('Top', style: TextStyle(color: Colors.white)),
  ],
)

▶ Open in DartPad

How it looks: A large blue square, with a smaller orange square centered on top of it, and the word "Top" in white text centered above both — three layers visible as one flattened image.

Positioned

Used inside a Stack to pin a child to specific coordinates/edges.

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.grey[300]),
    Positioned(top: 10, right: 10, child: Icon(Icons.close, color: Colors.red)),
  ],
)

▶ Open in DartPad

How it looks: A large light-grey square with a small red "X" icon pinned to its top-right corner, 10px in from each edge.

Expanded

Inside a Row/Column, forces a child to fill the remaining available space.

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Expanded(child: Container(height: 50, color: Colors.blue)),
  ],
)

▶ Open in DartPad

How it looks: A small 50×50 red square on the left, followed immediately by a blue bar that stretches to fill every remaining pixel of the row's width.

Flexible

Like Expanded, but lets the child be smaller than the allotted space (FlexFit.loose by default).

Row(
  children: [
    Flexible(flex: 1, child: Container(height: 50, color: Colors.red)),
    Flexible(flex: 2, child: Container(height: 50, color: Colors.green)),
  ],
)

▶ Open in DartPad

How it looks: Two colored bars side by side spanning the full row width, where the green bar is exactly twice as wide as the red one (flex ratio 1:2).

Padding

Adds empty space around a single child.

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
  child: Text('Padded text'),
)

▶ Open in DartPad

How it looks: The text "Padded text" with a wide empty margin on its left and right (24px) and a thinner one above/below (8px) — the text itself sits inset from wherever this widget is placed.

Center

Centers its single child within itself.

Center(child: Icon(Icons.check_circle, size: 60, color: Colors.green))

▶ Open in DartPad

How it looks: A green checkmark-in-a-circle icon sitting exactly in the middle of the available space, regardless of how large that space is.

Align

Like Center, but lets you pick any alignment, not just the middle.

Align(
  alignment: Alignment.bottomRight,
  child: Icon(Icons.info, size: 32),
)

▶ Open in DartPad

How it looks: A small info icon tucked into the bottom-right corner of its parent's box, with everything above and to the left left empty.

Wrap

Like Row/Column, but automatically flows children onto new lines when space runs out.

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: List.generate(8, (i) => Chip(label: Text('Tag $i'))),
)

▶ Open in DartPad

How it looks:

[Tag 0] [Tag 1] [Tag 2] [Tag 3]
[Tag 4] [Tag 5] [Tag 6] [Tag 7]

A row of pill-shaped "chip" tags that fills the available width, then automatically wraps remaining chips onto a second line, with even spacing both between chips and between rows.

AspectRatio

Forces its child into a fixed width/height ratio (e.g., 16:9).

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.black),
)

▶ Open in DartPad

How it looks: A black rectangle shaped exactly like a widescreen video frame (16:9) — however wide the available space is, the height auto-adjusts to keep that same proportion.

FractionallySizedBox

Sizes its child as a fraction of the parent's available space.

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.3,
  child: Container(color: Colors.purple),
)

▶ Open in DartPad

How it looks: A purple rectangle that always occupies exactly half the parent's width and 30% of its height — it resizes proportionally if the parent resizes.

3. Scrolling & Lists

ListView

A scrollable, linear list of widgets.

ListView(
  children: List.generate(20, (i) => ListTile(title: Text('Item $i'))),
)

▶ Open in DartPad

How it looks: A vertical scrolling column of rows labeled "Item 0" through "Item 19," where only the ones that fit on screen are visible at once and the rest reveal themselves as you scroll down.

GridView

A scrollable grid of widgets in a fixed number of columns (or a max tile extent).

GridView.count(
  crossAxisCount: 3,
  children: List.generate(9, (i) => Container(
    margin: const EdgeInsets.all(4),
    color: Colors.teal[100 * ((i % 8) + 1)],
  )),
)

▶ Open in DartPad

How it looks:

[ ][ ][ ]
[ ][ ][ ]
[ ][ ][ ]

A 3×3 grid of evenly sized teal-toned squares, each with a small gap between neighbors, filling the screen edge-to-edge.

SingleChildScrollView

Makes a single (usually tall) child scrollable, when it doesn't fit on screen.

SingleChildScrollView(
  child: Column(
    children: List.generate(15, (i) => Container(height: 80, color: Colors.blueGrey[100 + i * 50 % 400])),
  ),
)

▶ Open in DartPad

How it looks: A tall column of stacked colored bands, taller than the screen — the top portion is visible initially, and the whole thing scrolls up to reveal the rest.

PageView

Full-screen (or full-width) pages you swipe between horizontally.

PageView(
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ],
)

▶ Open in DartPad

How it looks: One solid-colored full-screen page at a time (red, then green, then blue), with a horizontal swipe gesture sliding the next page in from the edge.

ListTile

A standard single-row list item with optional leading/trailing icons and subtitle.

ListTile(
  leading: Icon(Icons.person),
  title: Text('Jane Doe'),
  subtitle: Text('jane@example.com'),
  trailing: Icon(Icons.arrow_forward_ios),
)

▶ Open in DartPad

How it looks: A single horizontal row: a person icon on the far left, "Jane Doe" in bold-ish title text with a smaller grey "jane@example.com" beneath it, and a small chevron arrow on the far right — the classic settings-menu row look.

Scrollbar

Wraps a scrollable widget to show a draggable scrollbar track.

Scrollbar(
  thumbVisibility: true,
  child: ListView(children: List.generate(30, (i) => ListTile(title: Text('Row $i')))),
)

▶ Open in DartPad

How it looks: The same scrolling list as ListView, but with a thin vertical grey bar running down the right edge of the screen, whose length and position indicate how far through the list you've scrolled.

4. Buttons

ElevatedButton

A filled, raised button — the primary call-to-action button.

ElevatedButton(
  onPressed: () {},
  child: const Text('Submit'),
)

▶ Open in DartPad

How it looks: A solid-colored pill/rounded-rectangle button (theme color, usually a shade of blue or purple) with white "Submit" text centered inside, and a subtle shadow that makes it look slightly raised off the page.

TextButton

A flat, text-only button with no background or shadow.

TextButton(
  onPressed: () {},
  child: const Text('Cancel'),
)

▶ Open in DartPad

How it looks: Just the word "Cancel" in the theme's accent color, sitting flush against the page background — no border, no fill, no shadow. Tapping shows a faint ripple.

OutlinedButton

Like TextButton, but with a visible border outline.

OutlinedButton(
  onPressed: () {},
  child: const Text('Learn More'),
)

▶ Open in DartPad

How it looks: A rounded-rectangle button with a thin colored border and transparent/matching-background fill, with "Learn More" text in the same accent color inside it.

IconButton

A tappable icon with built-in ripple/highlight feedback.

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

▶ Open in DartPad

How it looks: A plain thumbs-up icon sitting by itself; tapping it shows a soft circular ripple radiating from the icon, but there's no visible button "chrome" otherwise.

FloatingActionButton

A circular, elevated button typically anchored to a screen's bottom-right corner.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
)

▶ Open in DartPad

How it looks: A solid-colored circle (usually accent-colored) with a white "+" icon centered inside, floating above the rest of the page content with a visible drop shadow — the classic "add new item" button.

PopupMenuButton

An icon (often three dots) that reveals a dropdown menu of options when tapped.

PopupMenuButton<String>(
  itemBuilder: (context) => [
    const PopupMenuItem(value: 'edit', child: Text('Edit')),
    const PopupMenuItem(value: 'delete', child: Text('Delete')),
  ],
  onSelected: (value) {},
)

▶ Open in DartPad

How it looks: A vertical three-dot icon by default; tapping it drops down a small white rounded-corner card listing "Edit" and "Delete" as tappable rows, layered above the rest of the screen with a shadow.

5. Input & Forms

TextField

A single-line (or multi-line) editable text input box.

TextField(
  decoration: const InputDecoration(
    labelText: 'Email',
    border: OutlineInputBorder(),
  ),
)

▶ Open in DartPad

How it looks: A rectangular box with a thin outlined border, and a small "Email" label floating above/inside the border on the left — clicking inside shows a blinking text cursor and the label animates upward when text is entered.

Checkbox

A tappable square that toggles checked/unchecked.

Checkbox(value: true, onChanged: (v) {})

▶ Open in DartPad

How it looks: A small square with rounded corners; when checked it's filled with the theme color and shows a white checkmark, when unchecked it's an empty outlined square.

Radio

One option among a mutually exclusive group (only one can be selected).

Radio<int>(value: 1, groupValue: 1, onChanged: (v) {})

▶ Open in DartPad

How it looks: A small circle outline; when selected, a smaller filled dot appears centered inside it in the theme color — visually distinct from Checkbox by being round instead of square.

Switch

An on/off toggle, styled like a physical sliding switch.

Switch(value: true, onChanged: (v) {})

▶ Open in DartPad

How it looks: A horizontal rounded pill track with a circular white "thumb" — when off, the thumb sits on the left with a grey track; when on, the thumb slides to the right and the track fills with the theme color.

Slider

Lets the user pick a value by dragging along a track.

Slider(value: 0.6, onChanged: (v) {})

▶ Open in DartPad

How it looks: A horizontal line/track with a filled colored segment from the left up to a circular draggable "thumb" positioned at 60% along the track, and an unfilled grey segment continuing to the right.

DropdownButton

A tappable field showing a current value, which opens a list of alternatives.

DropdownButton<String>(
  value: 'A',
  items: ['A', 'B', 'C'].map((v) => DropdownMenuItem(value: v, child: Text(v))).toList(),
  onChanged: (v) {},
)

▶ Open in DartPad

How it looks: The text "A" with a small downward-pointing arrow/chevron beside it; tapping it drops a vertical menu listing "A," "B," "C" directly beneath, from which tapping one closes the menu and updates the displayed value.

Form

A container that groups multiple form fields for validation as a unit (usually wraps TextFormFields).

Form(
  key: formKey,
  child: Column(
    children: [
      TextFormField(validator: (v) => v!.isEmpty ? 'Required' : null),
      ElevatedButton(onPressed: () => formKey.currentState!.validate(), child: const Text('Submit')),
    ],
  ),
)

▶ Open in DartPad

How it looks: Visually identical to its child fields stacked in a column (an outlined text box, then a Submit button below it) — but if left empty and Submit is tapped, a red "Required" error message appears beneath the field and its border turns red.

6. Structural / Material

Scaffold

The top-level page structure: provides slots for an app bar, body, floating button, drawer, bottom nav, etc.

Scaffold(
  appBar: AppBar(title: const Text('My App')),
  body: const Center(child: Text('Hello')),
  floatingActionButton: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)),
)

▶ Open in DartPad

How it looks: A full screen with a colored bar across the top reading "My App," a plain white/grey body area beneath it showing "Hello" centered, and a circular "+" button floating in the bottom-right corner — the standard shape of almost every Flutter screen.

AppBar

The top navigation/title bar, usually used inside a Scaffold.

AppBar(
  title: const Text('Dashboard'),
  actions: [IconButton(icon: const Icon(Icons.search), onPressed: () {})],
)

▶ Open in DartPad

How it looks: A solid-colored horizontal bar at the very top of the screen with "Dashboard" in bold white/on-theme text on the left, and a search icon aligned to the right edge.

Card

A material-styled container with rounded corners and elevation — used to group related content.

Card(
  elevation: 4,
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Text('Card content'),
  ),
)

▶ Open in DartPad

How it looks: A white (or surface-color) rounded-rectangle panel with a soft drop shadow that lifts it visually off the background, containing "Card content" text with padding inset on all sides.

Drawer

A slide-in side panel, usually triggered by a hamburger icon in the AppBar.

Drawer(
  child: ListView(
    children: const [
      DrawerHeader(child: Text('Menu')),
      ListTile(title: Text('Home')),
      ListTile(title: Text('Settings')),
    ],
  ),
)

▶ Open in DartPad

How it looks: A panel that slides in from the left edge, covering roughly 3/4 of the screen width, with a header area reading "Menu" at the top followed by a vertical list of tappable rows ("Home," "Settings") beneath it, and a scrim darkening the rest of the screen behind it.

BottomNavigationBar

A row of tappable icon+label destinations fixed to the bottom of the screen.

BottomNavigationBar(
  currentIndex: 0,
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
)

▶ Open in DartPad

How it looks:

[ 🏠 Home ] [ 🔍 Search ] [ 👤 Profile ]

A horizontal bar fixed to the bottom of the screen with three evenly spaced icon-and-label pairs; the currently selected one ("Home") is shown in the theme's accent color while the others are grey.

TabBar

A row of tabs, usually paired with a TabBarView for swipeable content beneath it.

TabBar(
  tabs: const [Tab(text: 'Photos'), Tab(text: 'Videos')],
)

▶ Open in DartPad

How it looks: Two side-by-side labels ("Photos" and "Videos") spanning the bar's width, with a colored underline indicator beneath whichever tab is currently active, which slides over when you switch tabs.

7. Feedback & Overlays

AlertDialog

A modal popup box, usually with a title, message, and action buttons.

AlertDialog(
  title: const Text('Delete item?'),
  content: const Text('This action cannot be undone.'),
  actions: [
    TextButton(onPressed: () {}, child: const Text('Cancel')),
    TextButton(onPressed: () {}, child: const Text('Delete')),
  ],
)

▶ Open in DartPad

How it looks: A small white rounded-rectangle card centered on screen, with the rest of the screen dimmed behind it — "Delete item?" in bold at the top, explanatory text beneath, and two text buttons ("Cancel," "Delete") aligned to the bottom-right of the card.

SnackBar

A brief message bar that slides up from the bottom of the screen, then auto-dismisses.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: const Text('Saved successfully'), action: SnackBarAction(label: 'Undo', onPressed: () {})),
);

▶ Open in DartPad

How it looks: A dark, rounded-rectangle bar that slides up from the very bottom edge of the screen, showing "Saved successfully" in white text on the left and an "Undo" action in accent color on the right, disappearing on its own after a few seconds.

BottomSheet (showModalBottomSheet)

A panel that slides up from the bottom, covering part of the screen, for supplementary actions/content.

showModalBottomSheet(
  context: context,
  builder: (context) => Container(
    height: 200,
    child: const Center(child: Text('Bottom sheet content')),
  ),
);

▶ Open in DartPad

How it looks: The bottom ~1/4 to 1/3 of the screen becomes a rounded-top white panel sliding up over the existing content (which dims behind it), showing "Bottom sheet content" centered inside it — swiping down or tapping outside dismisses it.

CircularProgressIndicator

A spinning loading indicator.

const CircularProgressIndicator()

▶ Open in DartPad

How it looks: A thin circular arc in the theme's accent color, continuously rotating in place — the standard "loading, please wait" spinner.

8. Navigation

Navigator (push / pop)

Manages a stack of screens (routes); push adds a new one, pop returns to the previous.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailScreen()),
);

▶ Open in DartPad

How it looks: The current screen slides out to the left while a new screen (DetailScreen) slides in from the right, fully replacing the visible content — the standard "drill into a detail page" transition on Android/iOS-style apps.

MaterialPageRoute

The concrete Route implementation used with Navigator that provides the platform-appropriate transition animation.

MaterialPageRoute(
  builder: (context) => Scaffold(
    appBar: AppBar(title: const Text('Details')),
    body: const Center(child: Text('Detail content')),
  ),
)

▶ Open in DartPad

How it looks: Not a widget you see directly — it's the wrapper that produces the slide-in transition and back-swipe gesture behavior described above when used with Navigator.push.

What's Next

This covers the ~50 core widgets you'll reach for in almost every Flutter app. The next part can be found here https://dev.to/gochev/flutter-widgets-guide-part-2-every-other-widget-35p5

Flutter Layout — Complete Guide

Nayden Gochev — Mon, 06 Jul 2026 14:36:45 +0000

Flutter Layout — Complete Guide

1. The Core Mental Model

Flutter layout runs on one rule, repeated at every level of the widget tree:

Constraints go down. Sizes go up. Position is set by the parent.

A parent passes constraints (min/max width, min/max height) down to its child.
The child looks at those constraints, decides its own size (within them), and passes that size back up.
The parent then decides where to place the child (its position), based on its own layout logic (Row, Column, Stack, etc.).
A widget cannot know or decide its own position — only its size, and only within the constraints given.
A parent cannot just tell a child "be this exact size" without constraints — it does so by passing tight constraints.

This single-pass, top-down/bottom-up system is why Flutter layout is fast (no repeated relayout passes like some browser engines) but also why certain patterns (like "make me the same size as my sibling") require special widgets to solve.

Constraints (BoxConstraints)

BoxConstraints(
  minWidth: 0, maxWidth: 300,
  minHeight: 0, maxHeight: 150,
)

Tight constraints: min == max (e.g., BoxConstraints.tight(Size(100,100))). The child has no choice — it must be that exact size.
Loose constraints: min is 0, max is some value. The child can be anywhere from 0 up to that max.
Unbounded constraints: max is double.infinity. This is where the infamous "RenderBox was not laid out" or "BoxConstraints forces an infinite width" errors come from — usually caused by putting an unconstrained widget (like ListView or Column) inside another unconstrained widget (like inside a Row without Expanded, or inside a scrollable without a fixed height).

2. Everything Is a Widget

Widgets are configuration — immutable blueprints. Three widget trees exist under the hood:

Widget tree — what you write (immutable, cheap to rebuild).
Element tree — the "live" instantiation, persists across rebuilds, manages state.
RenderObject tree — does the actual layout, painting, and hit-testing math.

For layout purposes, what matters is the RenderObject tree — every widget that affects layout ultimately creates or configures a RenderBox that participates in the constraints-down/sizes-up protocol.

3. Single-Child Layout Widgets

These take one child and adjust size/position/constraints.

Container

The Swiss-army-knife. Combines padding, margin, alignment, decoration, and constraints.

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(horizontal: 8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Hello'),
)

Behavior depends on what's set:

If width/height given → tightens constraints to that size (if the parent allows).
If no size given but has a child → sizes to fit the child (adds padding).
If no size and no child → tries to expand to fill available space.

Padding

Adds space around a child, shrinking the constraints passed down by the insets.

Padding(padding: EdgeInsets.all(16), child: Text('Hi'))

Center / Align

Align positions a child within itself according to Alignment (e.g., Alignment.topRight), and by default sizes itself to fill available space. Center is just Align with Alignment.center.

Align(alignment: Alignment.bottomRight, child: Icon(Icons.star))

SizedBox

Forces exact width/height (tight constraints), or use SizedBox.expand() / SizedBox.shrink(). Also commonly used as a spacer:

SizedBox(height: 20) // vertical gap between widgets

ConstrainedBox / UnconstrainedBox

ConstrainedBox adds additional constraints (it intersects with what the parent gives, doesn't override).

ConstrainedBox(
  constraints: BoxConstraints(minWidth: 100, maxWidth: 300),
  child: Text('Flexible width text'),
)

FittedBox

Scales/fits a child within itself using BoxFit (cover, contain, fill, etc.) — useful for text or images that must shrink to fit.

AspectRatio

Forces the child into a specific width/height ratio, respecting incoming constraints as much as possible.

IntrinsicWidth / IntrinsicHeight

Sizes a child based on its "intrinsic" (natural/preferred) dimensions rather than the parent's constraints. Expensive (extra layout passes) — use sparingly, e.g., making buttons in a Row all match the height of the tallest one.

Transform

Applies a matrix transform (rotate, scale, skew, translate) at paint time — does not affect layout/constraints, only how it's drawn (so it can visually overflow its bounds without affecting siblings).

4. Multi-Child Layout Widgets

Row & Column (Flex)

Both are Flex under the hood — Row lays out horizontally, Column vertically.

Main axis: the direction of layout (horizontal for Row, vertical for Column).
Cross axis: perpendicular to that.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [Widget1(), Widget2(), Widget3()],
)

MainAxisAlignment (spacing along main axis):
start, end, center, spaceBetween, spaceAround, spaceEvenly

CrossAxisAlignment (alignment along cross axis):
start, end, center, stretch, baseline

MainAxisSize:

max (default) — Row/Column takes all available space on the main axis.
min — shrinks to fit just its children.

Key gotcha: A Row has unbounded width if placed inside something that gives infinite width (like a horizontally scrolling parent without explicit sizes) — this causes overflow errors. Non-flexible children in a Row/Column must fit within the available space, or you get the classic yellow-and-black striped overflow warning.

Expanded & Flexible

Used only inside Row/Column/Flex to control how children share leftover space along the main axis.

Row(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

Expanded = Flexible with FlexFit.tight — the child is forced to fill its share of space exactly.
Flexible with FlexFit.loose (default) — the child can be up to its share of space, but isn't forced to fill it.
flex — the relative weight (default 1) determining how leftover space is divided among flexible children.

Without Expanded/Flexible, children in a Row/Column take only their natural (intrinsic) size — if that combined size exceeds available space, you get an overflow.

Stack & Positioned

Layers children on top of each other (z-axis), like absolute positioning in CSS.

Stack(
  alignment: Alignment.center,
  fit: StackFit.loose,
  children: [
    Container(color: Colors.grey), // sized by non-positioned children or Stack itself
    Positioned(top: 10, right: 10, child: Icon(Icons.close)),
    Positioned.fill(child: Center(child: Text('Overlay'))),
  ],
)

Children without Positioned are laid out first ("non-positioned"), sized according to fit (loose = as small as possible, expand = fill the Stack) and placed per alignment.
Positioned children are placed using top/bottom/left/right/width/height relative to the Stack's own bounds — these are not in the constraints-down flow the same way; the Stack determines its own size from non-positioned children (or fills available space if given tight constraints), then positions the Positioned ones absolutely within that.

Wrap

Like Row/Column, but overflows onto new lines/columns when out of space, instead of clipping/erroring.

Wrap(
  spacing: 8, runSpacing: 4,
  children: List.generate(10, (i) => Chip(label: Text('Item $i'))),
)

ListView, GridView, and other scrollables

These are unbounded on the scroll axis internally — they build children lazily (ListView.builder) and give each child unbounded space along the scroll direction but bounded on the cross axis. This is why putting a ListView inside a Column without wrapping it in Expanded or giving it a fixed height throws a layout error (a Column gives unbounded height to its children by default when it's inside something scrollable, and ListView also wants unbounded height — two unbounded things fighting).

Column(
  children: [
    Text('Header'),
    Expanded(child: ListView(children: [...])), // now ListView gets bounded height
  ],
)

GridView works similarly but lays children in a 2D grid — controlled via gridDelegate:

GridView.count(crossAxisCount: 3, children: [...])
// or
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, i) => Card(),
  itemCount: 20,
)

CustomMultiChildLayout / CustomSingleChildLayout

Escape hatches for fully custom layout logic — you implement a LayoutDelegate/SingleChildLayoutDelegate and manually compute constraints/positions for each labeled child. Rarely needed unless building complex custom widgets.

5. Slivers (for scroll-heavy layouts)

CustomScrollView + slivers give fine control over scroll behavior — collapsing app bars, mixed lists/grids, sticky headers.

CustomScrollView(
  slivers: [
    SliverAppBar(expandedHeight: 200, pinned: true, flexibleSpace: FlexibleSpaceBar(title: Text('Title'))),
    SliverList(delegate: SliverChildBuilderDelegate((c, i) => ListTile(title: Text('$i')))),
    SliverGrid(gridDelegate: ..., delegate: ...),
  ],
)

Slivers use a different protocol than boxes (SliverConstraints/SliverGeometry instead of BoxConstraints/Size), because they need to describe how much of themselves is currently visible within a scrolling viewport, not just a fixed size.

6. Responsive & Adaptive Layout

MediaQuery

Gives you the size/properties of the whole screen (or nearest ancestor MediaQuery):

final size = MediaQuery.of(context).size;
final isTablet = size.width > 600;

Rebuilds the widget whenever the queried value changes (e.g., rotation), so avoid over-querying deep in performance-critical trees.

LayoutBuilder

Gives you the incoming constraints at that point in the tree (more precise than MediaQuery, which is screen-wide) — essential for building widgets that adapt to their parent's size, not the whole screen:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return WideLayout();
    }
    return NarrowLayout();
  },
)

OrientationBuilder

Rebuilds based on portrait/landscape orientation specifically.

FractionallySizedBox

Sizes a child as a fraction of the parent's available space:

FractionallySizedBox(widthFactor: 0.8, child: Text('80% width'))

7. Text Layout Specifics

Text has its own layout quirks:

Text wraps automatically within its constrained width; overflow: TextOverflow.ellipsis combined with maxLines prevents overflow errors.
softWrap, textAlign, textScaleFactor (deprecated in favor of TextScaler) all affect how much space text actually needs.
Wrapping Text in Expanded or Flexible inside a Row is often required, otherwise a long string can force the Row to overflow horizontally.

8. Common Errors & How to Read Them

Error	Typical Cause	Fix
"RenderFlex overflowed by X pixels"	Children's natural size exceeds Row/Column space	Wrap overflowing child in `Expanded`/`Flexible`, or use `Wrap`, or scroll
"BoxConstraints forces an infinite width/height"	Unbounded widget (ListView, Column) inside another unbounded context	Give explicit size, or wrap in `Expanded`/`SizedBox`/`ConstrainedBox`
"Vertical viewport was given unbounded height"	`ListView`/`Column` with scrollable inside another scrollable/Column without constraints	Wrap the scrollable in `Expanded` or set `shrinkWrap: true` (careful: perf cost)
"A RenderFlex overflowed" only in debug (yellow/black stripes)	Same as above — it's a visual warning, not a crash	Same fixes

Debugging tools:

debugPaintSizeEnabled = true — visualizes all box boundaries.
Flutter DevTools Layout Explorer — inspect constraints/flex factors visually per widget.
Widget Inspector — click any widget on screen to see its render tree info.

9. Performance Notes

Layout is generally a single pass per frame (parent asks child to lay out once) — but widgets like IntrinsicWidth/IntrinsicHeight force extra passes and are more expensive.
Rebuilds (setState) don't necessarily mean relayout — Flutter only recomputes layout/paint for subtrees whose constraints or geometry actually changed (RenderObject.markNeedsLayout is only called when necessary).
Keys (ValueKey, GlobalKey) matter for preserving state and identity across rebuilds when list order or widget type changes, but they don't directly affect the layout algorithm itself.

10. Quick Reference Cheat Sheet

Center something: Center or Align
Fixed size: SizedBox
Extra space around: Padding
Share space along a Row/Column: Expanded / Flexible
Overlap widgets: Stack + Positioned
Wrap onto new lines: Wrap
Scrollable list: ListView.builder
Adapt to parent size: LayoutBuilder
Adapt to screen size: MediaQuery
Percentage sizing: FractionallySizedBox
Force aspect ratio: AspectRatio
Fit content to box (image/text): FittedBox

Dart for Java Developers

Nayden Gochev — Thu, 07 May 2026 10:22:39 +0000

Dart for Java Developers

A deep, practical mapping from Java to Dart: syntax, type system, concurrency, tooling, Flutter, and backend (Shelf, Relic, Serverpod, and the broader pub.dev ecosystem). This guide is written for engineers who already know Java and want fast mental-model transfer plus honest gaps (what one language has that the other does not).

Note on sources: This guide draws on Learn Dart in Y Minutes (community tutorial; the bundled learndart.dart mixes teaching with legacy phrasing—prefer this guide + dart.dev for sound null safety facts) and Google’s archived Flutter codelab Intro to Dart for Java Developers (Bicycle → Rectangle → factories → functional iteration).

Mental model in one page
Why Dart feels “Java-like” (and where it diverges)
Crash-course synthesis (Learn X in Y Minutes and From Java to Dart codelab)
Timeline: Dart history & language evolution
Syntax & structure
Type system & null safety
Functions, methods, parameters
Classes, constructors, factories
Inheritance, interfaces, mixins, extensions
Generics & variance (Java vs Dart)
Enums, sealed classes, patterns (Dart 2.17–3.x)
Collections & iteration
Errors & exceptions
Asynchrony: Future, Stream, async/await, isolates
Modules, libraries, part, export, packages
Tooling: pub, analyzer, formatter, tests
Compilation targets & runtime (vs JVM)
Flutter (what Java devs need first)
Backend on Dart: Shelf, Relic, Serverpod, Dart Frog, gRPC
Common / notable libraries (selected)
Feature matrix: Java ↔ Dart
What exists in one language but not the other
Migration heuristics
Glossary: Java ↔ Dart terminology
Keywords quick map
Operators (selected) with Java notes
dart:* libraries — Java mental anchors
Class modifiers (Dart 3)
Patterns, destructuring, switch expressions
Callable objects & operator overloading
typedef and type aliases
Dates, time zones, internationalization (intl)
Regular expressions
URIs, networking, encoding
Binary data: typed_data vs NIO
Reflection, codegen, and why Flutter differs
Annotations & metadata
JSON / immutable data classes
Local databases & ORM-ish
Dependency injection & global state
Build systems: Maven/Gradle ↔ pub
Testing landscape (beyond JUnit)
Package catalog (extended)
Expanded feature matrix
Soundness footguns
Further reading
Generators: sync* / async* / yield
Iterable, Iterator, for-in vs Java
Deferred & conditional imports
dart:ffi vs JNI (sketch)
Super parameters & initializer lists
Flutter layering (Widget / Element / RenderObject)
Numeric types & compilation targets caveat
Appendix: Java ↔ Dart cheat sheet (snippets)

Mental model in one page

Idea	Java	Dart
Primary runtimes	JVM (bytecode), Graal native	VM (JIT dev), AOT (release native), also JS & Wasm targets for web
Unit of compilation / reuse	`.java` → packages + modules (JPMS optional)	Every `.dart` file is a library; packages on pub.dev
Null	Nullable reference types (Java 8+ annotations; JEP 804 modern nullable types in recent Java)	Sound null safety (non-null by default); `T?` for nullable
Concurrency	Threads, `ExecutorService`, virtual threads (Project Loom, Java 21+)	Single-threaded event loop in isolate + explicit isolates (no shared mutable heap)
OOP style	Classes + interfaces	Classes + implicit interfaces + mixins
Polymorphism tricks	Abstract class, default interface methods	Extension methods, mixins, factory constructors
Async	`CompletableFuture`, reactive stacks	`Future`/`Stream`, `async`/`await` first-class
Builds	Maven / Gradle	`dart pub` + SDK tools; Flutter adds its build
“Enterprise” servers	Huge ecosystem	Growing: Serverpod, Relic, Shelf, etc.

Bottom line: Dart optimizes for fast iteration, UI (Flutter), and multi-target compilation. Java optimizes for massive enterprise libraries, JVM depth, and decades of JVM tooling.

Why Dart feels “Java-like” (and where it diverges)

What feels immediately familiar

C-family syntax: curly blocks, semicolons (usually optional in Dart but often used), similar control flow (if/for/while/switch).
Strong, static typing with type inference (var / final vs Java’s var since Java 10).
OOP core: classes, inheritance, abstract classes, (most) methods live on types.
Garbage collection (Dart VM) — no manual free.

What surprises Java programmers first week

Topic	Java intuition	Dart reality
`new`	`new Foo()` everywhere	`new` optional / uncommon in modern style: `Foo()`
One class per file	Convention	Library = file; `part` / `part of` split implementation
Overloading	Common	No method overloads — use named args, different method names
`static` utils	`Collections`, `StringUtils`, …	Less culture of static bags — top-level functions, extensions
Null	`@Nullable`, Optional, NPE	Types express null (`String` vs `String?`) — sound
Threads	Use freely (with care)	Isolate model; no shared memory between isolates
Checked exceptions	`throws`	No checked exceptions — errors are unchecked style
Wildcard generics	`List<? extends Number>`	Dart generics different (see generics section)

Crash-course synthesis (Learn X in Y Minutes and From Java to Dart codelab)

External primers worth bookmarking:

Learn Dart in Y Minutes — fast runnable learndart.dart tour: comments, var/final/const, nested functions, Iterable/List/Map shapes ((), [], {}), loops, ~/, generators, mixins, cascades, null-aware operators. Caveat: some prose predates sound null safety; treat runtime/typing claims in that file with skepticism and follow Dart 3 rules here.
Google Flutter codelab — Intro to Dart for Java Developers — pedagogy from the Java Tutorial’s Bicycle → Dart: main at top level, new optional, this.field constructor shorthand, privacy via _, getters, no constructor overloading replaced by named parameters / defaults, factory constructors, implements without interface keyword, map/forEach functional style.

One-screen facts (battle-tested when you start Dart / Flutter)

Topic	Dart (what to remember)
Module = `.dart` file	A library is the file; top-level functions, variables, `const`, and classes coexist (like Kotlin files).
Library privacy	Names starting with `_` are private to the library (the `.dart` file / merged `part`), not “private to the class” like Java `private`.
Everything is an object	`int`, `double`, `bool`, `Null` — unified model; no Java-style primitive-only stack semantics.
Null safety	Append `?` for nullable types (`String?`); flow analysis narrows types — Kotlin-like, not optional typing.
Generics & reification	Type arguments to generic classes are reified (`List<int>.runtimeType` knows `int`). Java erases type parameters at runtime (with erasure quirks + reflection metadata). Footnote: generic function instantiations still have limits—don’t treat runtime reflection as “full templates.”
Inference	`var x = 1;` — `var` is like Java 10+ `var` (inferred fixed type, not dynamic reassignment to another type).
`final` vs `const`	`final` = single assignment (runtime). `const` = compile-time constant object graph (must be constructible const).
Imports	`dart:` SDK (`import 'dart:convert';`), relative (`import 'src/foo.dart';`), `package:` (`import 'package:test/test.dart';`). Use `as`, `show`, `hide`, `deferred as` to tame namespaces.
Async	`async`/`await`, `Future<T>`, `Stream<T>` on the current isolate; heavy CPU → isolates (`dart:isolate`).
Generators	*`sync` / `async`* + *`yield` / `yield`** for lazy iterables and async streams.
Callable classes	Implement `call` so `myObj(x)` works like a function.
`typedef`	Type aliases + function types: `typedef Pred = bool Function(Event e);`
Control flow	`for (e in xs)`, `while`, `do-while`; `switch` in Dart 3 supports patterns / exhaustiveness (unlike Java’s old `switch` only story).
Extensions	`extension X on String { ... }` — static dispatch on static type of receiver (like Kotlin).
Immutability codegen	See `freezed` on pub.dev for union types + `copyWith` (think “data classes + sealed” ergonomics).

Timeline: Dart history & language evolution

Dates are approximate release periods; exact patch versions vary. For authoritative per-version changes, see Dart language evolution.

Early era

2011: Dart unveiled; goals included structured web programming and optional typing (legacy “Dart 1” allowed dynamic escape hatches broadly).
Dart 2 (2018): Strong typing becomes central; sound type system push begins.

Null safety and Dart 3

Dart 2.12 (2021): Sound null safety ships (opt-in migration with tools).
Dart 3 (2023): Null safety mandatory; removal of many legacy modes; language cleanup for long-term evolution. See: The road to Dart 3.

Modern language features (selection)

Era	Features (examples)
Dart 2.17	Enhanced enums (fields, methods, constructors)
Dart 2.19 / 3.0 prep	Records, patterns, `class` modifiers (`sealed`, `final`, `interface`, `mixin class`)
Dart 3.0	Records `(x, y)`, pattern matching in `switch`, sealed types, destructuring
Dart 3.x	Incremental improvements (macro experiments, documentation updates, analyzer)
Recent SDK lines	Productivity: dot shorthands and tooling (see current SDK changelog for your version)

Java parallels for the same decades: lambdas (Java 8), modules JPMS (9), var (10), records (16), pattern matching for switch (17–21), virtual threads (21), etc. Dart moved quickly on UI-driven language features (e.g. records/patterns) because Flutter benefits directly.

Syntax & structure

Entry point

Java

public class Main {
  public static void main(String[] args) {
    System.out.println("Hello");
  }
}

Dart

void main() {
  print('Hello');
}

Top-level main is idiomatic. print is a core library function (not a static on System.out).

“Everything is an object” (both—but differently)

Java: primitives (int, double, …) are not objects; wrappers exist.
Dart: no primitive types in the Java sense; int/double/bool are types with fixed-size semantics but also objects in the unified type model; num is a supertype of int and double.

Semicolons

Dart allows omission via line ending rules (Dart style often omits semicolons outside for heads etc.).

Strings

Single quotes '...' and double "..." are both string literals; interpolation: '$name ${obj.field}'.
Raw strings: r'\no escape'.
Multiline: '''...''' or """...""".

Type system & null safety

Non-null by default (sound)

String cannot hold null.
String? can hold null.
Promotions and flow analysis narrow types after checks (similar spirit to Kotlin’s smart casts, not Java’s old unchecked world).

Common operators

Operator	Meaning
`?.`	null-aware member access
`??`	null-coalesce
`??=`	assign if null
`!`	null assertion (“I assert not null”—avoid when possible)
`required`	named parameter must be provided (with null safety expectations)

Java mapping

Java	Dart
`@Nullable String`	`String?`
Guava `Optional<String>` for presence	Prefer `String?` or domain types; `Optional`-like patterns exist in packages but are not idiomatic core
NPE on dereference	Compile-time help + runtime checks only when unsound escapes (`dynamic`, invalid `!`)

`dynamic` vs Java `Object`

dynamic opts out of static checks (similar in spirit to very loose typing; unlike using Object with casts everywhere).
Prefer typed APIs; use Object? when you need “anything” but keep static checks.

Functions, methods, parameters

No overloading

Java

void draw(int x) {}
void draw(int x, int y) {}

Dart — use named parameters, optional positional, or different names:

void draw(int x, [int? y]) { }
void drawNamed({required int x, int? y}) { }
void drawVertical(int x) { }

Named parameters

Named args are huge in Dart APIs (Flutter widget constructors are the famous example):

Widget build() => Padding(
  padding: const EdgeInsets.all(8),
  child: Text('Hi'),
);

Think: readable call sites > Java’s builder / telescoping constructors patterns.

First-class functions

Function types: int Function(int, int) vs Java’s functional interfaces (IntBinaryOperator, etc.).
Tear-offs: list.sort(compareTo) passes methods as values naturally.

Classes, constructors, factories

`const` constructors

Dart has true immutable const objects when types support const constructors — compile-time constants. Java’s final + static is related but not the same model.

Factory constructors

class Singleton {
  Singleton._();
  static final Singleton instance = Singleton._();
}

Also idiomatic: factory constructors that may return cached instances or subtypes (think similar to static factory methods in Java EnumSet.of, List.of).

Redirecting constructors

class Point {
  final int x, y;
  Point(this.x, this.y);
  Point.origin() : this(0, 0);
}

Inheritance, interfaces, mixins, extensions

Implicit interfaces

Every class exposes an implicit interface of its instance methods. Java: implements requires explicit interface type. Dart: implements Foo where Foo is a class is normal.

Mixins

Java: default interface methods + composition patterns. Dart: mixin + with apply reusable behavior without inheritance diamonds complexity of C++.

mixin Walks {
  void walk() => print('walk');
}

class Person with Walks {}

Restrictions tightened with mixin class / class modifiers in Dart 3 — favor composition when modeling “capabilities.”

Extension methods

Java: preview/stable extension methods are newer and limited by platform. Dart: extension widely used (e.g. Flutter context.push style helpers in packages).

extension StringX on String {
  String twice() => this + this;
}

Generics & variance (Java vs Dart)

Covariance in core collections (important surprise)

Dart: List<String> is a subtype of List<Object> (if that still sounds wrong for a Java brain: in Dart’s sound variance rules for interface types, List is covariant in its type argument). That enables natural UI APIs but implies runtime checks on writes in some cases.

Java: at compile time List<String> is not a List<Object> for mutable lists (List<String> vs List<? extends Object> wildcards).

Practical advice: when porting Java mental models, re-read generic collection APIs and avoid unsound casts; trust the analyzer.

Wildcards

Java ? extends T, ? super T have no direct counterpart as a unified wildcard system; Dart uses upper bounds and ** typedefs / type parameters** differently. Many Java wildcard use cases become specific type parameters or helper methods.

Enums, sealed classes, patterns (Dart 2.17–3.x)

Enhanced enums (Dart 2.17+)

enum Status {
  ok(200),
  notFound(404);

  final int code;
  const Status(this.code);
}

Java enums are strong too; Dart’s are now very expressive with fields and methods.

Sealed / exhaustive `switch`

Dart 3 sealed class hierarchies enable exhaustive switch—closer to algebraic data types in expression form.

Java 21 modern switch + sealed types — conceptual siblings; syntax differs.

Records (both languages)

Java 16+ record Point(int x, int y) {}
Dart 3 (int x, int y) record types — great for multiple returns without defining a full class.

Collections & iteration

Core in dart:core: List, Map, Set, Iterable.

Java	Dart
`ArrayList`	`List` (literal `[1,2]`, growable vs fixed)
`HashMap`	`Map` (literal `{'a':1}`)
`HashSet`	`Set`
Streams API (`Stream<T>` in java.util.stream)	Two stream worlds: synchronous `Iterable` + async `Stream<T>` (see async section)

Collection literals are idiomatic and compile to efficient code.

Errors & exceptions

No checked exceptions

Java: checked IOException shapes API contracts. Dart: typically throws documentation + Future error channels — no throws clause enforced.

`Error` vs `Exception`

Dart has a loose convention:

Error: programmer mistakes / assertions / should fix code.
Exception: recoverable failures.

Neither is checked.

Asynchrony: `Future`, `Stream`, `async`/`await`, isolates

Futures vs `CompletableFuture`

Dart Future<T> is the baseline async result. async/await syntax maps closely to Java’s async/await if you use frameworks that add it, but in Dart it’s language-native.

Streams vs Java reactive streams

Stream<T> is async sequences. Think RxJava-like operations exist in stream_transform, rxdart, but core Stream is smaller than Project Reactor.

Important: single subscription vs broadcast streams — learn early when wiring Flutter (e.g. UI listeners).

Isolates vs threads

Java	Dart
Threads share heap (with locks)	Isolates have separate heaps — no shared mutable state
Synchronization primitives	message passing (`SendPort`/`ReceivePort`), `Isolate.run` patterns
Loom virtual threads	Isolates are not lightweight threads of the same sort

Mental model: Flutter UI runs on main isolate event loop; heavy CPU work should move to workers (compute, isolates) to avoid jank.

Modules, libraries, `part`, `export`, packages

File = library

A .dart file is a library (optionally named).

`part` / `part of`

Splits one library across files (often for generated code: *.g.dart with build_runner).

`export`

Barrel files re-export other libraries (similar to Java aggregator patterns but simpler).

Packages (`pubspec.yaml`)

Think pom.xml / build.gradle + coordinates, but much leaner:

Dependencies: hosted on pub.dev (and git/path overrides).
Dev dependencies: generators, tests, lints.

Version solving is declarative (pub resolver).

Private Dart members: leading underscore _detail is library-private (not private keyword).

Tooling: pub, analyzer, formatter, tests

Need	Java common	Dart
Build	Maven / Gradle	`dart pub get`, `dart run`, `dart compile`
Annotation processing / codegen	javac `-processor`, Gradle `annotationProcessor`	`dart run build_runner build` with `build` / `source_gen` generators — no built-in “APT” keyword; this is the usual Java annotation-processing substitute
Format	Spotless / Checkstyle	`dart format` (often CI-enforced)
Lint	Checkstyle / Error Prone	`analysis_options.yaml` + `package:lints` / flutter_lints
Test	JUnit 5, AssertJ	`package:test`, `flutter_test`
Coverage	Jacoco	SDK / package coverage

Analyzer & language server

The Dart analyzer powers IDE experience (similar spirit to IntelliJ/Java LS but often remarkably fast for incremental analysis).

Compilation targets & runtime (vs JVM)

Mode	What it means for a Java dev
JIT VM (dev)	Fast reload (Flutter hot reload changes UI state carefully)
AOT native	Release builds without shipping a VM bytecode interpreter (platform-dependent)
dart2js / Wasm	Web targets — no JVM

GraalVM native image is the rough Java-side analogy for AOT, but pipeline details differ a lot.

Flutter (what Java devs need first)

Flutter is not a language change—same Dart language. What changes is:

Widget build/rebuild model (immutable-ish widget configs vs mutable Swing/JavaFX views in typical old UIs).
Composition over deep inheritance trees (Widget trees).
State management libraries explode (provider, riverpod, bloc, get_it, …) — maps to Spring-ish DI only by analogy.
Platform channels ↔ JNI-like bridges to native OS APIs.

Hot reload is a killer feature for UI iteration; Java UI historically relied on slower full restarts (with exceptions in some frameworks).

Backend on Dart: Shelf, Relic, Serverpod, Dart Frog, gRPC

Shelf

Minimal shelf middleware model — like a small servlet filter chain or Ring-style handler stacks.

Relic

Relic (from the Serverpod team) is a modern HTTP stack positioned as a next-gen basis with strong typing, routing, WebSockets, static files—Serverpod builds on it. If you see “Relic” in 2026-era Dart docs, read it as framework plumbing, not archaeology.

Serverpod

Serverpod aims at full-stack Dart: server ORM, migrations, tooling, code generation, integrated auth patterns—closest spirit to Rails/Django/Laravel (still maturing vs Spring’s 20-year ecosystem).

Dart Frog

Lightweight server from Very Good Ventures—good for APIs and BFF layers.

Aqueduct

Historical note: Aqueduct was popular years ago; check current maintenance before new projects—ecosystem moves fast.

gRPC / protobuf

Official grpc Dart package exists—good interop with Java microservices.

Comparison tone

Spring Boot maturity: unparalleled Java depth.
Dart backend: excellent fit when sharing models/validation with Flutter or reducing polyglot—evaluate library freshness, team skills, and ops story.

Common / notable libraries (selected)

This is not exhaustive—pub.dev has massive breadth. Treat as signposts.

Area	Packages / notes
HTTP client	`http`, `dio` (interceptors, richer client features)
JSON serialization	`json_serializable` + `build_runner`, `freezed` immutable unions
Routing (Flutter)	`go_router`, `auto_route`, …
State (Flutter)	`provider`, `riverpod`, `bloc`, …
Functional helpers	`dartz` (`Either`, `Task`): Haskell-flavored—love/hate
Logging	`logging` package standard interfaces
Env/config	`flutter_dotenv`, custom patterns
Tests mocking	`mockito`, `mocktail`
Concurrency helpers	`pool`, isolate wrappers
DB (Dart server)	`postgres`, `mysql` drivers; ORM layers vary by framework
Redis etc.	community packages—verify maintenance

Serverpod bundles many server concerns opinionated.

Feature matrix: Java ↔ Dart

Feature	Java	Dart
Primitive types	Yes	Unified object model (`int`, `double`, …)
Checked exceptions	Yes	No
Method overloading	Yes	No
`static` class file plumbing	`import static`	Top-level functions idiomatic
Wildcard generics	`? extends`, `? super`	Different variance model
Protected visibility	`protected`	No—library privacy with `_`
Package-private	Yes	Library scope via `_` + library boundaries
Multiple inheritance of classes	No	No—but mixins and `mixin class` patterns
Interface default methods	Yes	Default instance methods on classes; `extension`
`enum` power	Strong since Java 5; evolved	Enhanced enums great
`switch` exhaustiveness	Improved in modern Java	`sealed` + patterns strong
`record`	Java 16+	Dart 3 records
Null safety in type system	Modern Java + annotations	`?` types + soundness
Threads	Rich	Isolates + async event loop
VM / native / web	JVM primary	VM, AOT, JS, Wasm
Mobile UI	Android (Kotlin often)	Flutter dominant Dart UI

What exists in one language but not the other

Java strengths not matched 1:1 in Dart

JVM ecosystem depth (transactions, enterprise specs, vendor integrations).
Mature concurrent libraries tuned for shared-memory threading (dart is different concurrency model on the UI side).
JPMS modularization story (Dart uses packages + visibility).
Graal + gigantic JNI/native interop stories in places (Dart has dart:ffi for C interop instead).

Dart strengths / conveniences

Hot reload ecosystem (Flutter).
UI-declarative widget model + one language across mobile/web/desktop (with caveats).
Low ceremony (pub, formatter, analyzer).
Structural patterns (extensions, mixins, named parameters) that reduce boilerplate without annotation processors everywhere.

Migration heuristics

Stop designing overload sets — reach for named params and small types.
Model absence with T?, not null everywhere + comments.
Embrace async/await—avoid callback pyramids like avoiding raw CompletableFuture chains in modern Java.
Learn isolates before porting “background thread does shared state” Java—rethink shared memory.
Learn List/Map variance rules before performance-critical numeric code with heavy generics.
Use package:lints / flutter_lints early—Dart’s analyzer is your pair programmer.
Prefer immutable models (final fields, freezed where helpful) especially in Flutter UIs.

Glossary: Java ↔ Dart terminology

Java concept	Dart counterpart / note
`package com.foo.bar`	`package:foo_bar/foo_bar.dart` + `lib/` layout; import URI not a 1:1 filesystem mirror
`public`	Symbols are public to importing libraries unless `_` private
`private`	`_leadingUnderscore` = library-private (not class-private)
`protected`	No direct equivalent — prefer small public APIs, `@visibleForTesting`, or composition
`static` nested class	Often top-level private class in same library
Interface	`abstract class`, `interface class` (Dart 3), or “implements a class’s interface”
SAM / functional interface	Function types (`int Function(int a)`)
`static final` constant	`static const`, `const` constructors, top-level `const`
Reflection (`java.lang.reflect`)	`dart:mirrors` on VM only — Flutter release/AOT avoided; use codegen
Annotation processing (javac `-processor`, Gradle `annotationProcessor`)	`build_runner` + packages like `source_gen` — no separate JVM-style APT in the language; this is the default industrial substitute
JNI	`dart:ffi` for C interop (plus `package:ffi` helpers)
`synchronized`	Prefer atomic single-isolate async patterns; isolates + message passing for parallelism
`volatile` / Java memory model	No shared mutable memory between isolates — immutable messages
`ThreadLocal`	`Zone`, Flutter `InheritedWidget`, or explicit parameter passing
Module (`module-info.java`)	`package` boundaries + exports; no JPMS verifier

Keywords quick map

Java-only (concept): synchronized, strictfp, native, transient, volatile, throws as a contract keyword.
Dart-only / distinctive: mixin, extension, on (extension / mixin constraints), with (mixin application), factory, operator, external, covariant, yield, yield* (generator forms), late, required, async, await, dynamic, library, part, export, show, hide, deferred (deferred loading).
Overlapping but different semantics: interface (Dart 3 class modifier, not Java’s interface keyword alone), super (mixins / super parameters), new (optional in Dart).

Operators (selected) with Java notes

For every predefined Dart operator token, precedence row, and Java analogue, see Appendix — Dart operators — complete predefined set (Java notes) (aligned with dart.dev/language/operators).

Dart	Rough Java analog	Notes
`?.`	conditional navigation	null-aware member access
`..` / `?..`	no single operator	Cascade: perform multiple ops on same receiver
`~/`	integer division	truncating division for `num`
`as` / `is` / `is!`	cast / `instanceof`	prefer patterns when possible
`??` / `??=`	null checks + assignment helpers	idiomatic defaults
Postfix `!`	`(Type)expr` you hope is safe	runtime failure if wrong
`=>`	lambda / concise body	Arrow bodies everywhere
`...` spread	`List.copyOf`, streams combine	collection / map spreads in literals

`dart:*` libraries — Java mental anchors

Library	Purpose	Java anchor
`dart:core`	Core types, collections, `Uri`, `RegExp`, `DateTime`, errors	`java.lang` + parts of `java.util`
`dart:async`	`Future`, `Stream`, `StreamController`, zones	`CompletableFuture`, reactive `Publisher` (not identical)
`dart:collection`	queues, linked maps, etc.	`java.util` extras
`dart:convert`	JSON (`JsonCodec`), UTF-8, base64	Jackson spirit (not drop-in)
`dart:io`	VM & native I/O, HTTP server, sockets, `File`, `Process`	NIO + `java.net` + `java.io`
`dart:html`	Browser DOM (transpiled)	JS / not JVM
`dart:js_interop`	JS interop (modern)	JNI for JS land
`dart:ffi`	C ABI interop	Panama / JNI (different)
`dart:isolate`	isolate spawn, ports	threads + message queues
`dart:math`	`sqrt`, `Random`, `min`, `max`	`Math`, `Random`
`dart:typed_data`	`Uint8List`, views, `ByteData`	`ByteBuffer` + primitive arrays
`dart:developer`	timeline, logging, service extensions	JFR / JVMTI (much smaller surface)

Class modifiers (Dart 3) — Java intuition

Modifier	Intent
`final class`	Prevents subtyping outside the library (library-first design).
`sealed class`	Permitted subtypes only in same library — enables exhaustive `switch`.
`interface class`	Direct instantiation restricted — implement elsewhere. Controls construction, not just “interface-ness.”
`mixin class`	Declares something usable `as mixin` and `as class`.

Java sealed uses permits and named subclasses anywhere in allowed modules. Dart sealed subtypes sit in the same library — different packaging tradeoff.

Patterns, destructuring, `switch` expressions (Dart 3)

Switch expressions return values; pattern cases match structures (records, object shapes):

sealed class Msg {}
class Ping extends Msg {}
class Pong extends Msg {}

String react(Msg m) => switch (m) {
  Ping() => 'ping',
  Pong() => 'pong',
};

void tupleDemo() {
  final (x, y) = (1, 2);
  print('$x $y');
}

Think Java’s modern switch + deconstruction converging—Dart 3 doubles down on switch as expression and algebraic shapes via sealed hierarchies + records.

Callable objects & operator overloading

call: an object can behave like a function:

class DoubleFn {
  int call(int x) => x * 2;
}

Operators: implement operator + etc. Java lacks user-defined + for arbitrary classes.

`typedef` and type aliases

typedef JsonMap = Map<String, Object?>;
typedef IntPredicate = bool Function(int value);

Closest Java analogue: type parameter bounds + functional interfaces, not a first-class typedef.

Dates, time zones, internationalization (`intl`)

DateTime handles instant vs local/utc flags; time zones usually need timezone package or careful UTC storage.
package:intl for DateFormat, messages, plural rules — pair with Flutter localization (MaterialApp delegates).

Java ZonedDateTime remains richer for some server use cases.

Regular expressions

Dart RegExp lives in dart:core.
Mind multi-line / unicode / anchoring differences vs Java Pattern—always add tests for tricky inputs.

URIs, networking, encoding

Prefer Uri.parse / Uri.https over string concatenation—similar discipline as java.net.URI.
HTTP clients: http (minimal) vs dio (interceptors, cancel tokens, multipart ergonomics).

Binary data: `typed_data` vs NIO

Dart	Java
`Uint8List`	`byte[]`, `ByteBuffer`
`ByteData`	primitive get/put on `ByteBuffer`
`Endian`	`ByteOrder`

Isolates copy messages; no shared **ByteBuffer between threads** like Java.

Reflection, codegen, and why Flutter differs

dart:mirrors exists for VM scenarios; Flutter iOS/Android release builds do not support mirrors in typical configurations (tree shaking + AOT).
Java: reflection ubiquitous (modulo JPMS).

build_runner ≈ “annotation processing” culture: The JVM has compile-time annotation processors (APT) wired through javac / Gradle / Maven (-processor, annotationProcessor dependencies). Dart has no separate javac-style processor hook in the language itself—instead, packages such as build, source_gen, and build_runner implement a declarative, file-generating build graph. You put dev_dependency: build_runner and dev_dependency: <generator> in pubspec.yaml, annotate code (e.g. @JsonSerializable()), then run dart run build_runner build (or watch). That workflow is the standard replacement for Java’s Lombok / MapStruct / Dagger / Room–style codegen when you need *.g.dart, *.freezed.dart, mocks, serializers, etc.

Practical rule: if you type import 'dart:mirrors' in app code, stop—reach for build_runner-driven generators (json_serializable, freezed, drift, injectable, mockito codegen, …), the same way you’d reach for annotation processors in a Java service.

Annotations & metadata

Built-ins include @override, @Deprecated. Create const annotation classes — runtime reflection is limited compared to Java’s Annotation reflection APIs; codegen fills the gap. Custom annotations in Dart are often inputs to build_runner generators (same role as Java annotation processor arguments), not something you reflectively query at runtime like getDeclaredAnnotations() on the JVM.

JSON / immutable data classes

Approach	Dart
Schema-first codegen	`json_serializable`, OpenAPI generators in ecosystem
Algebraic / union types	`freezed` (sum types + `copyWith`)
Hand-written	OK for tiny DTOs

Local databases & ORM-ish (Flutter/mobile/server vary)

Package	Sketch	Caveat
sqflite	SQLite on some platforms	Not web
drift	Typed SQL + migrations + codegen	Strong for structured data
isar	Fast embedded NoSQL	Check platform matrix
hive	Key-value boxes	Simplicity vs relational features

Server-side Postgres often pairs with postgres driver + framework migrations (e.g. Serverpod).

Dependency injection & global state

Java mindset	Dart / Flutter common
Spring singleton beans	`get_it` lazy singletons
Constructor injection everywhere	Possible; many Flutter apps mix constructor + provider
Request scope	`Provider`/`riverpod` overrides scoped to widget subtree

Riverpod ≈ “recompute graph + caching + test overrides”. Not a servlet container.

Build systems: Maven/Gradle ↔ pub

Concern	Java	Dart
Declared deps	Maven / Gradle	`pubspec.yaml`
Lockfile	Gradle locks	`pubspec.lock` (commit in apps, not always in pure libs)
Build plugins / codegen	Gradle `annotationProcessor`, `maven-compiler-plugin` processor path	`build_runner` + generator packages (`build`, `source_gen`); no separate “APT” concept—tasks are `dart run build_runner ...`
Multi-package repos	composite builds	`melos` mono-repo helper

Note: Java annotation processing is a compiler plugin convention; Dart’s parallel is build_runner orchestrating builder packages—not a keyword in the language, but the default industrial approach to generated sources.

Testing landscape (beyond JUnit)

Unit: package:test, group/setUp/tearDown feel like JUnit rules-lite.
Widget: flutter_test + WidgetTester (think UI unit with fake async).
Goldens: screenshot diffing for widgets.
Integration / E2E: integration_test driving real devices/emulators.

Mocks: mockito (codegen) or mocktail (lambda-friendly).

Package catalog (extended, still incomplete)

Area	Packages (examples)
Routing	`go_router`, `auto_route`, `beamer`
Networking	`http`, `dio`, `retrofit`
Serialization	`json_serializable`, `freezed`
Immutability helpers	`freezed`, `equatable`
Assets / env	`flutter_dotenv`
Firebase	`firebase_core`, `firebase_auth`, `cloud_firestore`, …
Crash / perf	`sentry`, `firebase_crashlytics`
Images	`cached_network_image`, `flutter_svg`
Codegen infra	`build`, `build_runner`, `source_gen`
Lint	`lints`, `flutter_lints`, `very_good_analysis`
Monorepo	`melos`

Always verify platform support (iOS/Android/Web/Desktop/Server) before you commit.

Expanded feature matrix — language surface area

Topic	Java	Dart	Practical delta
Primitive vs object types	primitives + wrappers	unified `num`/`int`/`double`/`bool`	fewer autoboxing surprises; `int` VM 64-bit, `BigInt` for bigger; JS has 53-bit safe int caveats
Fixed arrays	`String[]`	`List<String>`	growable lists are default; `List.filled` etc. for fixed
Wildcards at call sites	`? extends T` puzzles	different generic puzzles	Read Dart variance docs before “clever” APIs
Checked exceptions	`throws IOException`	none	encode failures in `Result` types (`dartz`), `Either`, or typed exceptions by convention
`protected`	yes	no	design smaller libraries + `_` private helpers
Inner classes	common	supported, less common	prefer top-level private classes
Static import	`import static`	`import '...' show foo;`	top-level functions feel “static-like”
`enum` with data	recent Java upgrades	enhanced enums (fields, methods)	both strong—syntax differs
`switch` exhaustiveness	`sealed` helps Java	`sealed` in library helps Dart	library locality differs
Reflection	core to many frameworks	VM-only mirrors	codegen culture
Web as target	not JVM	`dart2js` / wasm	conditional imports for `dart:html` vs `dart:io`
Money / decimals	`BigDecimal`	packages (`decimal`, etc.)	plan precision early

Soundness footguns (`avoid!`)

Escape hatch	Risk
`dynamic`	disables static checks — like `Object` + unchecked casts everywhere
Postfix `!`	`NullPointerException`-class failures when wrong
`covariant`	advanced param substitution — reserve for framework authors
`dart:mirrors` in Flutter	broken / disallowed in release paths

Generators: sync* / async* / yield

Dart has lazy iterable generators and async* streams using yield / yield*:

Form	Returns	Java intuition
`Iterable<T> sync() sync`	lazy sequence	custom `Iterator` with state machine
`Stream<T> async() async`	async sequence	`Publisher` / reactive patterns (not identical)

yield* delegates to another iterable/stream—useful for composing tree walks or parsers.

Iterable, Iterator, `for-in` vs Java

Iterable<E> in Dart is like Java’s Iterable<T> — provides Iterator<E> iterator.
for (final x in xs) is sugar over iterator.moveNext().
Extension methods on Iterable (map, where, fold…) resemble Stream API ergonomics but Iterable is synchronous.

Key distinction: Java Stream is often one-shot; Dart Iterable can be re-iterated if the underlying iterable supports it (and some are single-use like Iterator patterns—read docs per concrete type).

Deferred & conditional imports

Deferred

import 'heavy.dart' deferred as heavy; — loads library later; await heavy.loadLibrary() before use. Roughly dynamic plugin loading (not OS .so like JNI—Dart bundle loading).

Conditional

Split VM vs web implementations:

import 'stub.dart'
  if (dart.library.io) 'io_impl.dart'
  if (dart.library.html) 'html_impl.dart';

Use when platform APIs diverge (dart:io vs dart:html)—think separate *-jvm / *-android artifacts in Maven but resolved at compile time per target.

`dart:ffi` vs JNI (sketch)

Concern	JNI (Java)	`dart:ffi`
Interop target	JVM ↔ native (often C/C++)	Dart VM ↔ C ABI
Memory	`GetPrimitiveArrayCritical`, pinning	`Pointer`, `calloc`, `Struct` packing
Async	blocking calls off critical path	isolate-friendly; don’t block UI
Flutter	JNI / platform channels	FFI for perf-sensitive native; platform channels for Android/iOS SDK

Panama in modern Java is spiritually closer ergonomically than legacy JNI, but Dart dart:ffi is still its own API surface.

Super parameters & initializer lists

Dart allows forwarding constructor parameters to super constructors compactly (super parameters), and : initializer lists run before constructor bodies—useful for final field assignment from computed values.

Think telescoping constructors in Java but with less boilerplate.

Flutter layering (Widget / Element / RenderObject)

Three trees (simplified mental model):

Widget — immutable configuration (“do I want padding?”). Compare to a declarative description.
Element — life cycle of who owns State; holds reference between frames.
RenderObject — layout & paint; mutated during layout.

Java UI frameworks (Swing) historically emphasized mutable component graphs more; Flutter’s setState / rebuild reconciles new widget descriptions against existing elements/render objects.

Numeric types & compilation targets caveat

On the native Dart VM, int is a 64-bit integer (overflow wraps / is defined per operation—see language spec); use BigInt for arbitrary-precision integer math (Java BigInteger analogue).
When compiling to JavaScript, integers are limited to IEEE-754 safe integers (~±2⁵³) unless you use BigInt patterns appropriate for JS compilation—do not assume Java long-range arithmetic portably without checks.

Treat numeric code that must run on Flutter Web and mobile as a cross-platform concern: tests on both targets.

Appendix: Java ↔ Dart cheat sheet (snippets)

Paired Java vs Dart examples. Prefer sound Dart 3 / null-safe snippets; remove ? only where the teaching point is nullable types.

How to read

“Not in Java” / “Not in Dart” called out in notes.
Learn X in Y Minutes + From Java to Dart codelab patterns appear explicitly (Bicycle, Rectangle, ~/, cascades, map).

Entry point & top-level members

Java

public class Demo {
  public static int answer = 42;

  public static void main(String[] args) {
    System.out.println(answer + " " + args.length);
  }
}

Dart — top-level main, variables, functions (no class wrapper required):

int answer = 42;

void main(List<String> args) {
  print('$answer ${args.length}');
}

Comments

Java — //, /* */, /** */ Javadoc.

Dart — same + /// doc comments drive dartdoc (like Javadoc for API extraction).

/// One-line doc.
// runtime comment
/*
 block
*/

Variables: `var`, `final`, `const`, `late`

Java

final String name = "Ann";
var count = 1; // Java 10+

Dart

var count = 1; // inferred as int; cannot later assign bool
final name = 'Ann'; // single assignment, inferred String
const pi = 3.14; // compile-time constant
late String description; // non-nullable, assigned before use

Nullable types (`?`) — Kotlin-like, not Java primitives

Java (modern style / annotations)

@Nullable String nick;
String s = nick; // still needs null check for safety

Dart

String? nick;
String s = nick!; // bang — avoid; prefer ?. ?? or flow checks

Common operators — arithmetic and “not like Java”

Full list: Appendix — Dart operators (complete predefined set, Java notes)

Java

int a = 7 / 3;        // 2 (int division)
double x = 7 / 3.0;

Dart

var q = 7 / 3;        // 2.5 — because / always promotes to double when needed
var t = 7 ~/ 3;       // 2 — truncating integer division (Learn X in Y Minutes)

Java — increment

for (int i = 0; i < n; i++) {}

Dart

for (var i = 0; i < n; i++) {}

Null-aware and cascades (no direct Java equivalent)

Dart only (style from null-aware history — see also Learn X in Y Minutes):

String? name;
var len = name?.length;
var display = name ?? 'guest';
name ??= 'anon';
cascadeExample() {
  final sb = StringBuffer()
    ..write('a')
    ..write('b'); // cascade: same receiver
}

Java (verbose analog)

String name = null;
Integer len = name != null ? name.length() : null;

String interpolation & multiline (codelabs + Learn X in Y Minutes)

Java

String msg = "Hello, " + name + "!";
var block = """
    line1
    line2
    """;

Dart

final msg = 'Hello, $name!'; // or ${expr}
final block = '''
line1
line2
''';
final raw = r'\n stays literal';

`if` / ternary

Java if (cond) {} else {}, cond ? a : b

Dart identical shape; condition must be bool (no implicit truthiness from arbitrary objects).

Loops: `for`, enhanced `for`, `forEach`

Java

for (int i = 0; i < xs.size(); i++) { var x = xs.get(i); }
for (var x : xs) {}
xs.forEach(x -> System.out.println(x));

Dart (codelab functional style)

for (var i = 0; i < xs.length; i++) {
  final x = xs[i];
}
for (final x in xs) {}
xs.forEach(print);
// or: xs.map(scream).forEach(print);

`while` / `do-while`

Same structure in both languages.

`switch` — classic vs Dart 3 patterns

Java (pre–pattern matching style)

switch (k) {
  case 1:
    System.out.println("one");
    break;
  default:
    break;
}

Dart — still supports break in statement switches; Dart 3 adds expression switch with patterns (no break between cases in expression form):

String label(int k) => switch (k) {
  1 => 'one',
  _ => 'other',
};

Dart — classic statement switch (still used; Learn X in Y Minutes style — each case falls through only with continue labels; normally end with break or return):

void demo(int v) {
  switch (v) {
    case 1:
      print('one');
      break;
    default:
      print('other');
  }
}

Exceptions

Java — checked + unchecked.

try {
  throw new IOException("x");
} catch (IOException e) {
  throw new RuntimeException(e);
} finally {
  System.out.println("done");
}

Dart — no checked exceptions; throw any object.

try {
  throw StateError('x');
} on StateError catch (e) {
  rethrow;
} catch (e, st) {
  // stack trace
} finally {
  print('done');
}

Classes: fields, `this` constructor, no `public` keyword

Java Tutorial Bicycle style (multiple getters / setters)

public class Bicycle {
  private int cadence;
  private int speed = 0;
  private int gear;

  public Bicycle(int cadence, int speed, int gear) {
    this.cadence = cadence;
    this.speed = speed;
    this.gear = gear;
  }
}

Dart codelab — shorthand + _ privacy (library scope)

class Bicycle {
  int cadence;
  int _speed = 0;
  int get speed => _speed;
  int gear;

  Bicycle(this.cadence, this.gear); // speed internal

  void applyBrake(int decrement) => _speed -= decrement;
}

No method / constructor overloading — use named parameters

Java — overload constructors

public Rectangle() { this(0,0,0,0); }
public Rectangle(int w, int h) { this(0,0,w,h); }

Dart — single constructor with named optional + defaults (codelab Rectangle)

class Point {
  final int x, y;
  const Point(this.x, this.y);
}

class Rectangle {
  Point origin;
  int width, height;

  Rectangle({this.origin = const Point(0, 0), this.width = 0, this.height = 0});
}

Factory: top-level function vs `factory` constructor (codelab)

Option A — Dart top-level

Shape shapeFactory(String type) {
  return switch (type) {
    'circle' => Circle(2),
    'square' => Square(2),
    _ => throw ArgumentError(type),
  };
}

Option B — factory on type

abstract class Shape {
  factory Shape(String type) {
    return switch (type) {
      'circle' => Circle(2),
      'square' => Square(2),
      _ => throw ArgumentError(type),
    };
  }
  num get area;
}

Java analog is often static factory methods (Boolean.valueOf, etc.).

`implements` every class interface — `CircleMock` pattern (codelab)

Dart

abstract class Report {
  String build();
}

class HtmlReport implements Report {
  @override
  String build() => '<html/>';
}

Java

interface Report { String build(); }
class HtmlReport implements Report {
  @Override public String build() { return "<html/>"; }
}

Inheritance & `super`

Java

class Child extends Base {
  Child(int x) { super(x); }
}

Dart

class Child extends Base {
  Child(super.x);
}

Mixins — order matters (`with M1, M2`)

Java has single inheritance; default interface methods approximate some sharing.

Dart — mixins compose left-to-right; if two mixins supply the same member name, resolution follows Dart’s linearization (document the exact app in language spec when it matters for overrides).

class Vehicle {}

mixin Engine on Vehicle {
  String sound() => 'vroom';
}

mixin Horn on Vehicle {
  String beep() => 'beep';
}

class Car extends Vehicle with Engine, Horn {}

void main() {
  final c = Car();
  print(c.sound());
  print(c.beep());
}

Design takeaway: put the “most specific” mixin last when you layer overrides—same discipline as multiple interface defaults in Java, but with mixin + super semantics.

Extension methods (Kotlin-like)

Dart

extension StrX on String {
  String twice() => this + this;
}

Java — no extension methods until recent preview features; historically static helpers.

`operator` overloading & `call`

Dart

class Vec2 {
  final int x, y;
  const Vec2(this.x, this.y);
  Vec2 operator +(Vec2 o) => Vec2(x + o.x, y + o.y);
}

class Multiplier {
  final int k;
  const Multiplier(this.k);
  int call(int n) => k * n; // callable object
}

Java — no operator+; use plus(Vec2 o).

Generics — reification vs erasure

Java (erasure at runtime)

List<String> xs = new ArrayList<>();
// xs.getClass() is List, not List<String>

Dart

void main() {
  final xs = <int>[1, 2];
  print(xs.runtimeType); // List<int> — type argument preserved (reified)
}

`async` / `await` / `Future` / `Stream`

Java (CompletableFuture)

CompletableFuture.supplyAsync(() -> 1)
  .thenApply(x -> x + 1)
  .join();

Dart

Future<int> load() async {
  final x = await Future.value(1);
  return x + 1;
}

Generators: `sync` / `async`

Dart (Learn X in Y Minutes style)

Iterable<int> countUp(int n) sync* {
  for (var i = 0; i < n; i++) {
    yield i;
  }
}

Stream<int> tick() async* {
  for (var i = 0; i < 3; i++) {
    await Future.delayed(Duration(milliseconds: 100));
    yield i;
  }
}

Java — no direct language feature; use Stream.iterate / reactive APIs.

Isolates (not OS threads)

Dart

import 'dart:isolate';

Future<int> heavy(int n) async {
  return Isolate.run(() {
    // no shared mutable heap with spawner — message-passing / copying
    var s = 0;
    for (var i = 0; i < n; i++) s += i;
    return s;
  });
}

`typedef` & function types

Dart

typedef IntPred = bool Function(int x);
typedef StringMap = Map<String, Object?>;

bool positive(int x) => x > 0;

void main() {
  final IntPred p = positive;
  print(p(1));
}

Java — IntPredicate, Predicate<Integer>, etc.

Imports: `dart:` / relative / `package:` / `show` / `hide` / `as` / `deferred`

Dart

import 'dart:convert';
import 'dart:math' as math;
import 'package:path/path.dart' show join;
import 'helper.dart' hide Secret;
import 'slow.dart' deferred as slow;

Future<void> later() async {
  await slow.loadLibrary();
  slow.doWork();
}

Java — import static, module path; no deferred import analog in the language proper.

Enhanced `enum` (Dart 2.17+)

Dart

enum HttpCode {
  ok(200),
  notFound(404);

  final int code;
  const HttpCode(this.code);
}

Java — enums strong since Java 5; enhanced with fields/methods similarly.

Records & patterns (Dart 3) / Java 16+ `record`

Java 21-style

record Point(int x, int y) {}

Dart 3

void main() {
  final r = (1, 2); // Record type
  final (a, b) = r;   // destructure
  print('$a $b');
}

JSON / immutable unions — freezed (pub.dev)

No single Java built-in; think Lombok + Jackson patterns. freezed generates immutable data classes, copyWith, JSON serialization (with json_serializable), and union “sealed” types—add build_runner and run:

dart run build_runner build --delete-conflicting-outputs

See freezed README for the exact annotation syntax (it evolves between major versions).

`assert` / `debug*` compilation

Dart

void check(int x) {
  assert(x >= 0, 'must be non-negative');
}

Stripped in release Flutter/AOT builds by default for assert.

Cascade revisit (codelab “method cascades”)

Dart — “everything is a builder” (mutable configuration fluently)

void fill(StringBuffer sb) {
  sb
    ..write('a')
    ..write('b');
}

Java — typically StringBuilder chained calls return this manually.

Dart operators — complete predefined set (Java notes)

Official reference and precedence: Operators | dart.dev. Many symbols can also be implemented as class members (user-defined operator), similar in spirit to C++/C#—Java does not allow user-defined +, [], etc.

Precedence (highest → lowest) — reproduced from the language docs; each row is higher than rows below it.

Description (Dart)	Operators	Associativity
Unary postfix	`++` `--` `()` `[]` `?[]` `.` `?.` `!`	None
Unary prefix	`-expr` `!expr` `~expr` `++expr` `--expr` `await expr`	None
Multiplicative	`*` `/` `%` `~/`	Left
Additive	`+` `-`	Left
Shift	`<<` `>>` `>>>`	Left
Bitwise AND	`&`	Left
Bitwise XOR	`^`	Left
Bitwise OR	`	`
Relational & type test	`>=` `>` `<=` `<` `as` `is` `is!`	None
Equality	`==` `!=`	None
Logical AND	`&&`	Left
Logical OR	`
If-null	{% raw %}`??`	Left
Conditional	`expr1 ? expr2 : expr3`	Right
Cascade	`..` `?..`	Left
Assignment	`=` `*=` `/=` `+=` `-=` `&=` `^=` `	= %= ~/= <<= >>= >>>= ??=`
Spread (see note)	`...` `...?`	(not an expression operator; see below)

Note (spread): Per dart.dev, ... / ...? are part of collection / map literals, not ordinary binary operators; “precedence” is best read as lowest in the sense that the spread operand can be any expression.

Every token — Java analogue or “Dart only”

Dart	Role	Java analogue / comment
`()`	Call / function application	`f(a)` — same; Dart supports optional/named actual args differently
`[]`	Index / subscript operator	Arrays: `a[i]`. `List`/`Map`: no `[]` on `java.util.List`—use `get` / `Map#get`; Dart `list[i]` / `map[k]` is operator syntax
`?[]`	Null-aware index	No single operator; `list == null ? null : list[i]`
`.`	Member access	`.` — same
`?.`	Null-aware member	No `?.` in Java; verbose null checks or `Optional`
`!` (postfix)	Not-null assertion (`expr!`)	`Objects.requireNonNull(expr)` then use; wrong `!` → runtime error (like failed cast)
`++` `--` (prefix/postfix)	Increment / decrement	Same; only on `var` / fields that are mutable (`late` / assignable)
`-` (unary)	Negation	`-` — same
`!` (prefix)	Boolean NOT	`!` — Java requires `boolean`; Dart `!` expects `bool` in sound code
`~` (unary)	Bitwise NOT	`~` — same for integrals
`await`	Suspend until `Future` completes	`CompletableFuture`/`virtual threads`—not a unary keyword in Java the same way
*`` `/` `%`**	Multiply, divide, remainder	Same; `/` on Dart `int` promotes to `double` where needed—unlike Java `int/int`
`~/`	Integer (truncating) division	`Math.floorDiv` (Java 18+) or `a / b` for ints (trunc toward zero)—behavior differs from `floorDiv` for negatives; know your contract
`+` `-` (binary)	Add / subtract	Same; `+` also string concat in both (prefer Dart interpolation)
`<<` `>>` `>>>`	Shifts	Java has `>>>`; Dart `>>>` is unsigned right shift (mind web 32-bit masking per docs)
**`&` `^` `	`**	Bitwise and / xor / or
`>` `<` `>=` `<=`	Relational	Same
`as`	Cast	`(Type) e` — Dart `as` throws if wrong type (also, `import 'x.dart' as p` uses `as` for a library prefix, not a cast)
`is` `is!`	Type test / negated test	`e instanceof T` / `!(e instanceof T)`
`==` `!=`	Equality / inequality	Dart `==` is `first.==(second)` with null shortcut rules; Java `==` is reference compare for objects—use `equals` for value equality
**`&&` `		`**
`??`	If-null	`Optional.ofNullable(a).orElse(b)` / ternary—no `??` in Java
`??=`	Assign if null	No direct; `if (x == null) x = v`
`?` `:`	Conditional	Same ternary
`..` `?..`	Cascade	No cascade—repeat receiver or builder pattern
`=`	Assignment	Same
*`=` `/=` `+=` `-=` `%=`**	Compound assign	Same
`~/=`	Compound trunc-div	No single operator; `a = Math.floorDiv(a, b)` or `/=` for ints
**`<<=` `>>=` `>>>=` `&=` `^=` `	=`**	Compound bitwise/shift
`...`	Spread into another collection/map literal	Java varargs / `List.copyOf` / `Stream.concat`—no literal spread until you build lists
`...?`	Null-aware spread	Same as spread after null filter
`operator` … in a class	User-defined `+`, `-`, `[]`, …	Java has no user-defined operators (always methods like `plus`, `get`)

Tiny examples — Dart-only / confusing vs Java

// ~/ vs /
assert(5 / 2 == 2.5);
assert(5 ~/ 2 == 2);

// == calls Object== / overridden ==
final s1 = 'a';
final s2 = String.fromCharCode(97);
assert(s1 == s2); // true — content equality for String

// is / as
Object o = 1;
if (o is int) print(o + 1); // promoted to int
final x = o as int;

// Null-aware and assert-non-null
String? n;
print(n?.length);
print(n!.length); // runtime if n is null

// Cascade (not nested-dot default)
final sb = StringBuffer()..write('a')..write('b');

// Spread in literal
final inner = [2, 3];
List<int>? tail;
final outer = [1, ...inner, if (true) 4, ...?tail];

Java (contrast for == on reference types):

String a = new String("x");
String b = new String("x");
System.out.println(a == b);        // false — identity
System.out.println(a.equals(b));   // true — value

End of appendix snippets — see main chapters for variance, isolates detail, and tooling.

30 Years of JavaScript: The Complete Evolution Guide

Nayden Gochev — Thu, 04 Dec 2025 14:01:35 +0000

30 Years of JavaScript: The Complete Evolution Guide

December 4, 2025 - A comprehensive guide for developers returning to JavaScript or learning its complete history.

The Beginning: JavaScript 1.0 - 1.5 (1995-2000)
The Dark Ages: Browser Wars & Stagnation (2000-2005)
The AJAX Revolution (2005-2009)
The Modern Era Begins: ES5 & Node.js (2009-2015)
The Renaissance: ES6/ES2015 (2015)
Annual Releases: ES2016-ES2025
TypeScript Evolution (2012-2025)
Server-Side JavaScript: Node.js & Beyond
Frameworks & Libraries: Rise and Fall
Testing Ecosystem Evolution
Build Tools & Module Systems
Package Management
Current Landscape (2025)

The Beginning: JavaScript 1.0 - 1.5 (1995-2000)

1995: The Birth

Brendan Eich created JavaScript in 10 days at Netscape in May 1995. Originally named "Mocha," then "LiveScript," finally "JavaScript."

JavaScript 1.0 (December 1995) - Netscape Navigator 2.0

Basic features:

// Variables (no let/const, only var)
var name = "John";
var age = 25;

// Functions
function greet(name) {
    return "Hello, " + name;
}

// Objects (prototype-based)
var person = {
    name: "John",
    age: 25,
    greet: function() {
        return "Hello, " + this.name;
    }
};

// Arrays
var numbers = [1, 2, 3, 4, 5];

// Loops
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// Conditionals
if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

1996-1997: Standardization

ECMAScript 1 (June 1997) - First standardized version

Microsoft created JScript for Internet Explorer 3.0, leading to fragmentation.

1998-1999: ECMAScript 2 & 3

ECMAScript 3 (December 1999) - Major update

Added:

Regular expressions
Better string handling
try/catch exception handling
switch statements
do-while loops

// Regular expressions
var pattern = /hello/i;
var text = "Hello World";
console.log(pattern.test(text)); // true

// try/catch
try {
    throw new Error("Something went wrong");
} catch (e) {
    console.log(e.message);
} finally {
    console.log("Cleanup");
}

// switch
var day = "Monday";
switch (day) {
    case "Monday":
        console.log("Start of week");
        break;
    case "Friday":
        console.log("End of week");
        break;
    default:
        console.log("Midweek");
}

The Dark Ages: Browser Wars & Stagnation (2000-2005)

The Problem

ECMAScript 4 was abandoned due to disagreements
Browser incompatibilities were rampant
JavaScript was considered a "toy language"
No standard library management
Security issues (XSS attacks)

Browser Detection Hell

// Typical code from this era
if (document.all) {
    // Internet Explorer
    document.all.myElement.style.color = "red";
} else if (document.getElementById) {
    // Standards-compliant browsers
    document.getElementById("myElement").style.color = "red";
}

// Or worse
if (navigator.userAgent.indexOf("MSIE") > -1) {
    // IE-specific code
}

Early Libraries (Pre-jQuery)

Prototype.js (2005)

// Prototype.js extended native objects
$('myElement').hide();

// Array extensions
[1, 2, 3, 4, 5].each(function(n) {
    console.log(n);
});

The AJAX Revolution (2005-2009)

2005: AJAX Changes Everything

AJAX (Asynchronous JavaScript and XML) - Term coined by Jesse James Garrett

// XMLHttpRequest - The old way
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

2006: jQuery Revolution

jQuery 1.0 by John Resig - Changed everything

Before jQuery:

// Cross-browser event handling nightmare
var element = document.getElementById('myButton');
if (element.addEventListener) {
    element.addEventListener('click', handleClick, false);
} else if (element.attachEvent) {
    element.attachEvent('onclick', handleClick);
}

// DOM manipulation
var elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red';
}

// AJAX
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('result').innerHTML = xhr.responseText;
    }
};
xhr.send();

With jQuery:

// Simple, elegant, cross-browser
$('#myButton').click(handleClick);

// DOM manipulation
$('p').css('color', 'red');

// AJAX
$.get('/api/users', function(data) {
    $('#result').html(data);
});

// Chaining
$('#myDiv')
    .addClass('active')
    .fadeIn()
    .css('color', 'blue')
    .html('Hello World');

// Powerful selectors
$('div.container > p:first-child').hide();

Why jQuery dominated:

Cross-browser compatibility
Simple, intuitive API
Powerful DOM manipulation
Easy AJAX
Plugin ecosystem
"Write less, do more"

2008-2009: Other Libraries

MooTools (2006)

// Object-oriented approach
var MyClass = new Class({
    initialize: function(name) {
        this.name = name;
    },
    greet: function() {
        alert('Hello ' + this.name);
    }
});

Dojo Toolkit (2004-2009)

// Enterprise-focused
dojo.require("dijit.form.Button");
dojo.ready(function() {
    new dijit.form.Button({
        label: "Click me!",
        onClick: function() { alert("Clicked!"); }
    }, "myButton");
});

The Modern Era Begins: ES5 & Node.js (2009-2015)

2009: ECMAScript 5 (ES5)

After 10 years of stagnation, ES5 brought crucial improvements.

Strict Mode:

// Without strict mode (sloppy mode)
function oldWay() {
    x = 10; // Creates global variable accidentally
    var arguments = 5; // Can override arguments
    delete Object.prototype; // Can delete built-ins
}

// With strict mode
"use strict";
function newWay() {
    x = 10; // ReferenceError: x is not defined
    var arguments = 5; // SyntaxError
    delete Object.prototype; // TypeError
}

Array Methods:

var numbers = [1, 2, 3, 4, 5];

// forEach - Before: for loop
numbers.forEach(function(num) {
    console.log(num);
});

// map - Transform arrays
var doubled = numbers.map(function(num) {
    return num * 2;
}); // [2, 4, 6, 8, 10]

// filter - Filter arrays
var evens = numbers.filter(function(num) {
    return num % 2 === 0;
}); // [2, 4]

// reduce - Aggregate
var sum = numbers.reduce(function(acc, num) {
    return acc + num;
}, 0); // 15

// some & every
var hasEven = numbers.some(function(num) {
    return num % 2 === 0;
}); // true

var allPositive = numbers.every(function(num) {
    return num > 0;
}); // true

Object Methods:

// Object.create - Proper prototypal inheritance
var parent = {
    greet: function() {
        return "Hello";
    }
};
var child = Object.create(parent);
child.greet(); // "Hello"

// Object.keys
var obj = { a: 1, b: 2, c: 3 };
Object.keys(obj); // ['a', 'b', 'c']

// Object.defineProperty - Property descriptors
var person = {};
Object.defineProperty(person, 'name', {
    value: 'John',
    writable: false,
    enumerable: true,
    configurable: false
});
person.name = 'Jane'; // Silently fails (throws in strict mode)

// Getters and setters
var account = {
    _balance: 0,
    get balance() {
        return this._balance;
    },
    set balance(value) {
        if (value < 0) throw new Error("Balance cannot be negative");
        this._balance = value;
    }
};
account.balance = 100;
console.log(account.balance); // 100

JSON Native Support:

// Before: eval() or libraries
var jsonString = '{"name":"John","age":30}';
var obj = eval('(' + jsonString + ')'); // Dangerous!

// ES5: Native JSON
var obj = JSON.parse('{"name":"John","age":30}');
var str = JSON.stringify({ name: "John", age: 30 });

Function.prototype.bind:

// Before: Manual context binding
var obj = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

var greet = obj.greet;
greet(); // "Hello, undefined" - lost context

// Workaround
var self = obj;
setTimeout(function() {
    self.greet();
}, 1000);

// ES5: bind
var boundGreet = obj.greet.bind(obj);
boundGreet(); // "Hello, John"
setTimeout(obj.greet.bind(obj), 1000);

2009: Node.js - JavaScript on the Server

Ryan Dahl created Node.js, bringing JavaScript to the server.

Before Node.js:

JavaScript only in browsers
Server-side: PHP, Ruby, Python, Java, .NET

With Node.js:

// Simple HTTP server
var http = require('http');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
});

server.listen(3000);
console.log('Server running at http://localhost:3000/');

Event-driven, non-blocking I/O:

// Blocking (traditional server-side)
var data = readFileSync('file.txt'); // Waits
processData(data);

// Non-blocking (Node.js)
readFile('file.txt', function(err, data) {
    if (err) throw err;
    processData(data);
});
// Continues immediately

CommonJS Modules:

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = {
    add: add,
    subtract: subtract
};

// app.js
var math = require('./math');
console.log(math.add(5, 3)); // 8

2010: npm - Node Package Manager

npm revolutionized package management.

# Install packages
npm install express

# package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Express.js (2010) - Web framework for Node.js

var express = require('express');
var app = express();

app.get('/', function(req, res) {
    res.send('Hello World!');
});

app.get('/users/:id', function(req, res) {
    res.json({ id: req.params.id, name: 'John' });
});

app.listen(3000);

2010-2012: The Framework Wars Begin

Backbone.js (2010) - First major MV* framework

// Model
var Todo = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    }
});

// Collection
var TodoList = Backbone.Collection.extend({
    model: Todo
});

// View
var TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template('<%= title %>'),

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

// Usage
var todo = new Todo({ title: 'Learn Backbone' });
var view = new TodoView({ model: todo });
$('#todos').append(view.render().el);

Knockout.js (2010) - MVVM with observables

function AppViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Doe");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

ko.applyBindings(new AppViewModel());

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"></span>!</h2>

AngularJS 1.0 (2010, released 2012) - Google's framework

// Controller
angular.module('myApp', [])
    .controller('TodoController', function($scope) {
        $scope.todos = [];

        $scope.addTodo = function() {
            $scope.todos.push({
                text: $scope.todoText,
                done: false
            });
            $scope.todoText = '';
        };

        $scope.remaining = function() {
            return $scope.todos.filter(function(todo) {
                return !todo.done;
            }).length;
        };
    });

<div ng-app="myApp" ng-controller="TodoController">
    <input ng-model="todoText" placeholder="Add new todo">
    <button ng-click="addTodo()">Add</button>

    <ul>
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span ng-class="{done: todo.done}">{{todo.text}}</span>
        </li>
    </ul>

    <p>{{remaining()}} of {{todos.length}} remaining</p>
</div>

Ember.js (2011) - Convention over configuration

// Router
App.Router.map(function() {
    this.route('about');
    this.route('posts', function() {
        this.route('post', { path: '/:post_id' });
    });
});

// Route
App.PostsRoute = Ember.Route.extend({
    model: function() {
        return this.store.findAll('post');
    }
});

// Controller
App.PostsController = Ember.ArrayController.extend({
    sortProperties: ['date'],
    sortAscending: false
});

// Template (Handlebars)

{{#each post in controller}}
    <article>
        <h2>{{post.title}}</h2>
        <p>{{post.body}}</p>
    </article>
{{/each}}

2012: TypeScript Arrives

Microsoft releases TypeScript 0.8 - JavaScript with types

JavaScript:

function greet(name) {
    return "Hello, " + name.toUpperCase();
}

greet("John"); // "Hello, JOHN"
greet(42); // Runtime error: name.toUpperCase is not a function

TypeScript:

function greet(name: string): string {
    return "Hello, " + name.toUpperCase();
}

greet("John"); // "Hello, JOHN"
greet(42); // Compile-time error: Argument of type 'number' is not assignable to parameter of type 'string'

Interfaces:

interface User {
    id: number;
    name: string;
    email: string;
    age?: number; // Optional
}

function createUser(user: User): void {
    console.log(`Creating user: ${user.name}`);
}

createUser({ id: 1, name: "John", email: "john@example.com" }); // OK
createUser({ id: 1, name: "John" }); // Error: Property 'email' is missing

Classes (before ES6):

class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    public move(distance: number): void {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark(): void {
        console.log("Woof! Woof!");
    }
}

const dog = new Dog("Buddy");
dog.bark();
dog.move(10);

2013-2014: Build Tools & Module Bundlers

Grunt (2012) - Task runner

// Gruntfile.js
module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            build: {
                src: 'src/*.js',
                dest: 'build/app.min.js'
            }
        },
        watch: {
            files: ['src/*.js'],
            tasks: ['uglify']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['uglify']);
};

Gulp (2013) - Streaming build system

// gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('scripts', function() {
    return gulp.src('src/*.js')
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

gulp.task('watch', function() {
    gulp.watch('src/*.js', ['scripts']);
});

gulp.task('default', ['scripts', 'watch']);

Browserify (2011) - Bring Node.js modules to browser

// Before: Multiple script tags
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="app.js"></script>

// With Browserify
// app.js
var $ = require('jquery');
var _ = require('lodash');

// Build
browserify app.js -o bundle.js

// HTML
<script src="bundle.js"></script>

Webpack (2012, popular 2014+) - Module bundler

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

The Renaissance: ES6/ES2015 (2015)

The biggest update to JavaScript ever. Changed the language fundamentally.

let and const

Before (var):

// Function scope, hoisting issues
function example() {
    console.log(x); // undefined (hoisted)
    var x = 10;

    if (true) {
        var x = 20; // Same variable!
        console.log(x); // 20
    }
    console.log(x); // 20
}

// Loop problem
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 3, 3, 3 (all reference same i)
    }, 100);
}

After (let/const):

// Block scope, no hoisting
function example() {
    console.log(x); // ReferenceError: Cannot access 'x' before initialization
    let x = 10;

    if (true) {
        let x = 20; // Different variable!
        console.log(x); // 20
    }
    console.log(x); // 10
}

// Loop fixed
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 0, 1, 2 (each has own i)
    }, 100);
}

// const - immutable binding
const PI = 3.14159;
PI = 3; // TypeError: Assignment to constant variable

const obj = { name: "John" };
obj.name = "Jane"; // OK - object is mutable
obj = {}; // TypeError: Assignment to constant variable

Arrow Functions

Before:

// Function expressions
var add = function(a, b) {
    return a + b;
};

// this binding issues
var obj = {
    name: "John",
    friends: ["Jane", "Bob"],
    printFriends: function() {
        var self = this; // Workaround
        this.friends.forEach(function(friend) {
            console.log(self.name + " knows " + friend);
        });
    }
};

After:

// Arrow functions
const add = (a, b) => a + b;

// Implicit return
const square = x => x * x;

// Multiple statements
const greet = name => {
    const message = `Hello, ${name}`;
    return message.toUpperCase();
};

// Lexical this
const obj = {
    name: "John",
    friends: ["Jane", "Bob"],
    printFriends() {
        this.friends.forEach(friend => {
            console.log(`${this.name} knows ${friend}`); // this works!
        });
    }
};

// Array methods become elegant
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

Template Literals

Before:

var name = "John";
var age = 30;
var message = "Hello, my name is " + name + " and I am " + age + " years old.";

// Multiline strings
var html = "<div>\n" +
           "  <h1>" + title + "</h1>\n" +
           "  <p>" + content + "</p>\n" +
           "</div>";

After:

const name = "John";
const age = 30;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

// Multiline strings
const html = `
    <div>
        <h1>${title}</h1>
        <p>${content}</p>
    </div>
`;

// Expressions
const price = 19.99;
const tax = 0.08;
const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;

// Tagged templates
function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
    }, '');
}

const name = "John";
const html = highlight`Hello, ${name}!`; // "Hello, <mark>John</mark>!"

Destructuring

Before:

var user = { name: "John", age: 30, email: "john@example.com" };
var name = user.name;
var age = user.age;

var numbers = [1, 2, 3, 4, 5];
var first = numbers[0];
var second = numbers[1];

function getUser() {
    return { name: "John", age: 30 };
}
var user = getUser();
var name = user.name;

After:

// Object destructuring
const user = { name: "John", age: 30, email: "john@example.com" };
const { name, age } = user;

// Renaming
const { name: userName, age: userAge } = user;

// Default values
const { name, age, country = "USA" } = user;

// Nested destructuring
const user = {
    name: "John",
    address: {
        city: "New York",
        country: "USA"
    }
};
const { address: { city, country } } = user;

// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers; // 1, 2
const [first, , third] = numbers; // 1, 3
const [first, ...rest] = numbers; // 1, [2, 3, 4, 5]

// Function parameters
function greet({ name, age }) {
    console.log(`Hello, ${name}. You are ${age} years old.`);
}
greet({ name: "John", age: 30 });

// Swapping variables
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

Default Parameters

Before:

function greet(name, greeting) {
    name = name || "Guest";
    greeting = greeting || "Hello";
    return greeting + ", " + name;
}

// Problem with falsy values
greet("", "Hi"); // "Hi, Guest" - empty string is falsy!

After:

function greet(name = "Guest", greeting = "Hello") {
    return `${greeting}, ${name}`;
}

greet(); // "Hello, Guest"
greet("John"); // "Hello, John"
greet("John", "Hi"); // "Hi, John"
greet("", "Hi"); // "Hi, " - empty string is preserved

// Default can be expressions
function createUser(name, id = Date.now()) {
    return { name, id };
}

// Can reference earlier parameters
function greet(name, greeting = `Hello, ${name}`) {
    return greeting;
}

Rest and Spread Operators

Before:

// Rest parameters
function sum() {
    var args = Array.prototype.slice.call(arguments);
    return args.reduce(function(acc, n) {
        return acc + n;
    }, 0);
}

// Combining arrays
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var combined = arr1.concat(arr2);

// Copying arrays
var original = [1, 2, 3];
var copy = original.slice();

After:

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3, 4, 5); // 15

function greet(greeting, ...names) {
    return `${greeting}, ${names.join(" and ")}!`;
}
greet("Hello", "John", "Jane", "Bob"); // "Hello, John and Jane and Bob!"

// Spread operator - arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const copy = [...original];

// Spread operator - objects (ES2018)
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// Overriding properties
const defaults = { theme: "light", lang: "en" };
const userPrefs = { theme: "dark" };
const settings = { ...defaults, ...userPrefs }; // { theme: "dark", lang: "en" }

// Function calls
const numbers = [1, 5, 3, 9, 2];
Math.max(...numbers); // 9

Classes

Before (Prototypes):

// Constructor function
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

Person.prototype.haveBirthday = function() {
    this.age++;
};

// Inheritance
function Employee(name, age, title) {
    Person.call(this, name, age);
    this.title = title;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.work = function() {
    return this.name + " is working as " + this.title;
};

var emp = new Employee("John", 30, "Developer");
emp.greet(); // "Hello, I'm John"
emp.work(); // "John is working as Developer"

After (Classes):

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hello, I'm ${this.name}`;
    }

    haveBirthday() {
        this.age++;
    }

    // Static methods
    static species() {
        return "Homo sapiens";
    }
}

class Employee extends Person {
    constructor(name, age, title) {
        super(name, age); // Call parent constructor
        this.title = title;
    }

    work() {
        return `${this.name} is working as ${this.title}`;
    }

    // Override parent method
    greet() {
        return `${super.greet()}, I'm a ${this.title}`;
    }
}

const emp = new Employee("John", 30, "Developer");
emp.greet(); // "Hello, I'm John, I'm a Developer"
emp.work(); // "John is working as Developer"
Person.species(); // "Homo sapiens"

// Getters and setters
class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }

    set area(value) {
        this.width = Math.sqrt(value);
        this.height = Math.sqrt(value);
    }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 50
rect.area = 100;
console.log(rect.width); // 10

Promises

Before (Callback Hell):

// Pyramid of doom
getUserData(userId, function(err, user) {
    if (err) {
        handleError(err);
    } else {
        getOrders(user.id, function(err, orders) {
            if (err) {
                handleError(err);
            } else {
                getOrderDetails(orders[0].id, function(err, details) {
                    if (err) {
                        handleError(err);
                    } else {
                        displayDetails(details);
                    }
                });
            }
        });
    }
});

After (Promises):

// Promise chain
getUserData(userId)
    .then(user => getOrders(user.id))
    .then(orders => getOrderDetails(orders[0].id))
    .then(details => displayDetails(details))
    .catch(err => handleError(err));

// Creating promises
function delay(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}

delay(1000).then(() => console.log("1 second passed"));

// Promise.all - parallel execution
Promise.all([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
])
.then(([users, posts, comments]) => {
    console.log("All data loaded");
})
.catch(err => console.error("One failed:", err));

// Promise.race - first to complete
Promise.race([
    fetch('/api/fast'),
    fetch('/api/slow')
])
.then(result => console.log("First one won:", result));

// Error handling
fetch('/api/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP error ' + response.status);
        }
        return response.json();
    })
    .then(data => processData(data))
    .catch(err => console.error('Failed:', err))
    .finally(() => console.log('Cleanup'));

Modules (ES6 Modules)

Before (CommonJS - Node.js):

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract };

// app.js
var math = require('./math');
console.log(math.add(5, 3));

Before (Browser - Script tags):

<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="utils.js"></script>
<script src="app.js"></script>
<!-- Global namespace pollution, order matters -->

After (ES6 Modules):

// math.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// or
export { add, subtract };

// Default export
export default function multiply(a, b) {
    return a * b;
}

// app.js
import multiply, { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(multiply(5, 3)); // 15

// Import everything
import * as math from './math.js';
console.log(math.add(5, 3));

// Rename imports
import { add as sum } from './math.js';

// Re-export
export { add, subtract } from './math.js';
export * from './math.js';

Other ES6 Features

Map and Set:

// Before: Objects as maps (problems with keys)
var map = {};
map['key1'] = 'value1';
map[{}] = 'value2'; // [object Object] as key - not what you want!

// ES6 Map
const map = new Map();
map.set('key1', 'value1');
map.set({}, 'value2'); // Objects as keys work!
map.set(function() {}, 'value3'); // Functions as keys!

map.get('key1'); // 'value1'
map.has('key1'); // true
map.delete('key1');
map.size; // 2

// Iteration
for (const [key, value] of map) {
    console.log(key, value);
}

// Set - unique values
const set = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(set); // Set { 1, 2, 3, 4, 5 }

set.add(6);
set.has(3); // true
set.delete(3);
set.size; // 5

// Array deduplication
const numbers = [1, 2, 3, 3, 4, 4, 5];
const unique = [...new Set(numbers)]; // [1, 2, 3, 4, 5]

Symbols:

// Unique identifiers
const sym1 = Symbol('description');
const sym2 = Symbol('description');
sym1 === sym2; // false - always unique

// Private-ish object properties
const _private = Symbol('private');
class MyClass {
    constructor() {
        this[_private] = 'secret';
        this.public = 'visible';
    }

    getPrivate() {
        return this[_private];
    }
}

const obj = new MyClass();
console.log(obj.public); // 'visible'
console.log(obj[_private]); // undefined (need the symbol reference)
Object.keys(obj); // ['public'] - symbol not enumerated

Iterators and Generators:

// Iterator
const iterable = {
    data: [1, 2, 3, 4, 5],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.data.length) {
                    return { value: this.data[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (const value of iterable) {
    console.log(value); // 1, 2, 3, 4, 5
}

// Generator - easier way
function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = numberGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { done: true }

// Infinite sequences
function* fibonacci() {
    let [a, b] = [0, 1];
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2
fib.next().value; // 3

// Practical use - lazy evaluation
function* range(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

for (const num of range(1, 5)) {
    console.log(num); // 1, 2, 3, 4, 5
}

2013: React.js

Facebook releases React - Component-based UI library

Before React (jQuery):

// Imperative, manual DOM manipulation
var todos = [];

function addTodo(text) {
    todos.push({ id: Date.now(), text: text, done: false });
    renderTodos();
}

function toggleTodo(id) {
    var todo = todos.find(function(t) { return t.id === id; });
    todo.done = !todo.done;
    renderTodos();
}

function renderTodos() {
    var html = todos.map(function(todo) {
        return '<li>' +
               '<input type="checkbox" ' + (todo.done ? 'checked' : '') + ' data-id="' + todo.id + '">' +
               '<span>' + todo.text + '</span>' +
               '</li>';
    }).join('');
    $('#todos').html(html);
}

$(document).on('change', 'input[type=checkbox]', function() {
    toggleTodo($(this).data('id'));
});

With React:

// Declarative, component-based
class TodoApp extends React.Component {
    state = {
        todos: [],
        input: ''
    };

    addTodo = () => {
        this.setState({
            todos: [...this.state.todos, {
                id: Date.now(),
                text: this.state.input,
                done: false
            }],
            input: ''
        });
    };

    toggleTodo = (id) => {
        this.setState({
            todos: this.state.todos.map(todo =>
                todo.id === id ? { ...todo, done: !todo.done } : todo
            )
        });
    };

    render() {
        return (
            <div>
                <input
                    value={this.state.input}
                    onChange={e => this.setState({ input: e.target.value })}
                />
                <button onClick={this.addTodo}>Add</button>

                <ul>
                    {this.state.todos.map(todo => (
                        <li key={todo.id}>
                            <input
                                type="checkbox"
                                checked={todo.done}
                                onChange={() => this.toggleTodo(todo.id)}
                            />
                            <span>{todo.text}</span>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

JSX - HTML in JavaScript:

// JSX (transpiled by Babel)
const element = <h1>Hello, {name}!</h1>;

// Compiles to
const element = React.createElement('h1', null, 'Hello, ', name, '!');

// Components
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// Usage
<Welcome name="John" />

2014: Vue.js

Evan You releases Vue.js - Progressive framework

// Vue instance
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        todos: [],
        newTodo: ''
    },
    methods: {
        addTodo() {
            this.todos.push({
                id: Date.now(),
                text: this.newTodo,
                done: false
            });
            this.newTodo = '';
        },
        toggleTodo(todo) {
            todo.done = !todo.done;
        }
    }
});

<div id="app">
    <input v-model="newTodo" @keyup.enter="addTodo">
    <button @click="addTodo">Add</button>

    <ul>
        <li v-for="todo in todos" :key="todo.id">
            <input type="checkbox" v-model="todo.done">
            <span :class="{ done: todo.done }">{{ todo.text }}</span>
        </li>
    </ul>
</div>

Annual Releases: ES2016-ES2025

ES2016 (ES7)

Array.prototype.includes:

// Before
const numbers = [1, 2, 3, 4, 5];
numbers.indexOf(3) !== -1; // true
numbers.indexOf(6) !== -1; // false

// Problem with NaN
[1, 2, NaN].indexOf(NaN); // -1 (doesn't work!)

// After
numbers.includes(3); // true
numbers.includes(6); // false
[1, 2, NaN].includes(NaN); // true (works!)

Exponentiation Operator:

// Before
Math.pow(2, 3); // 8

// After
2 ** 3; // 8
2 ** 3 ** 2; // 512 (right-associative: 2 ** (3 ** 2))

// With assignment
let num = 2;
num **= 3; // 8

ES2017 (ES8)

async/await - Game changer for asynchronous code

Before (Promises):

function fetchUserData(userId) {
    return fetch(`/api/users/${userId}`)
        .then(response => response.json())
        .then(user => {
            return fetch(`/api/orders/${user.id}`)
                .then(response => response.json())
                .then(orders => {
                    return fetch(`/api/details/${orders[0].id}`)
                        .then(response => response.json())
                        .then(details => {
                            return { user, orders, details };
                        });
                });
        })
        .catch(err => console.error(err));
}

After (async/await):

async function fetchUserData(userId) {
    try {
        const userResponse = await fetch(`/api/users/${userId}`);
        const user = await userResponse.json();

        const ordersResponse = await fetch(`/api/orders/${user.id}`);
        const orders = await ordersResponse.json();

        const detailsResponse = await fetch(`/api/details/${orders[0].id}`);
        const details = await detailsResponse.json();

        return { user, orders, details };
    } catch (err) {
        console.error(err);
    }
}

// Parallel execution
async function fetchAllData() {
    const [users, posts, comments] = await Promise.all([
        fetch('/api/users').then(r => r.json()),
        fetch('/api/posts').then(r => r.json()),
        fetch('/api/comments').then(r => r.json())
    ]);

    return { users, posts, comments };
}

// Error handling
async function getData() {
    try {
        const data = await fetch('/api/data');
        return await data.json();
    } catch (err) {
        console.error('Failed:', err);
        throw err;
    } finally {
        console.log('Cleanup');
    }
}

// Top-level await (ES2022)
const data = await fetch('/api/data').then(r => r.json());

Object.entries() and Object.values():

const obj = { a: 1, b: 2, c: 3 };

// Before
Object.keys(obj); // ['a', 'b', 'c']
Object.keys(obj).map(key => obj[key]); // [1, 2, 3]

// After
Object.values(obj); // [1, 2, 3]
Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

// Practical use
for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}

// Convert to Map
const map = new Map(Object.entries(obj));

// Convert from Map
const obj = Object.fromEntries(map);

String padding:

'5'.padStart(3, '0'); // '005'
'5'.padEnd(3, '0'); // '500'

// Practical use
const numbers = [1, 10, 100];
numbers.forEach(n => {
    console.log(n.toString().padStart(3, '0'));
});
// 001
// 010
// 100

Object.getOwnPropertyDescriptors():

const obj = {
    get foo() { return 'bar'; }
};

// Shallow clone with getters/setters
const clone = Object.defineProperties(
    {},
    Object.getOwnPropertyDescriptors(obj)
);

ES2018 (ES9)

Rest/Spread for Objects:

// Rest
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(rest); // { c: 3, d: 4 }

// Spread
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// Overriding
const defaults = { theme: 'light', lang: 'en' };
const userPrefs = { theme: 'dark' };
const settings = { ...defaults, ...userPrefs }; // { theme: 'dark', lang: 'en' }

// Shallow clone
const clone = { ...original };

// Remove property
const { password, ...userWithoutPassword } = user;

Async Iteration:

// Async iterator
const asyncIterable = {
    async *[Symbol.asyncIterator]() {
        yield await Promise.resolve(1);
        yield await Promise.resolve(2);
        yield await Promise.resolve(3);
    }
};

for await (const num of asyncIterable) {
    console.log(num); // 1, 2, 3
}

// Practical use - streaming data
async function* fetchPages(url) {
    let page = 1;
    while (true) {
        const response = await fetch(`${url}?page=${page}`);
        const data = await response.json();
        if (data.length === 0) break;
        yield data;
        page++;
    }
}

for await (const pageData of fetchPages('/api/items')) {
    console.log(pageData);
}

Promise.finally():

fetch('/api/data')
    .then(response => response.json())
    .then(data => processData(data))
    .catch(err => handleError(err))
    .finally(() => {
        hideLoadingSpinner(); // Always runs
    });

RegExp improvements:

// Named capture groups
const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = pattern.exec('2025-12-04');
console.log(match.groups.year); // '2025'
console.log(match.groups.month); // '12'
console.log(match.groups.day); // '04'

// Lookbehind assertions
/(?<=\$)\d+/.test('$100'); // true
/(?<!\$)\d+/.test('100'); // true

ES2019 (ES10)

Array.prototype.flat() and flatMap():

// Before - flatten nested arrays
const nested = [1, [2, 3], [4, [5, 6]]];
const flat = nested.reduce((acc, val) =>
    acc.concat(Array.isArray(val) ? val : [val]), []
); // [1, 2, 3, 4, [5, 6]]

// After
nested.flat(); // [1, 2, 3, 4, [5, 6]]
nested.flat(2); // [1, 2, 3, 4, 5, 6] - depth 2
nested.flat(Infinity); // Flatten all levels

// flatMap - map then flatten
const arr = [1, 2, 3];
arr.map(x => [x, x * 2]); // [[1, 2], [2, 4], [3, 6]]
arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

// Practical use
const sentences = ['Hello world', 'How are you'];
sentences.flatMap(s => s.split(' ')); // ['Hello', 'world', 'How', 'are', 'you']

Object.fromEntries():

// Convert array of entries to object
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2, c: 3 }

// Convert Map to object
const map = new Map([['a', 1], ['b', 2]]);
const obj = Object.fromEntries(map);

// Transform object
const obj = { a: 1, b: 2, c: 3 };
const doubled = Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [key, value * 2])
); // { a: 2, b: 4, c: 6 }

// Filter object
const filtered = Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => value > 1)
); // { b: 2, c: 3 }

String.prototype.trimStart() and trimEnd():

'  hello  '.trimStart(); // 'hello  '
'  hello  '.trimEnd(); // '  hello'
'  hello  '.trim(); // 'hello'

Optional catch binding:

// Before
try {
    JSON.parse(data);
} catch (err) { // Had to specify err even if not used
    console.log('Invalid JSON');
}

// After
try {
    JSON.parse(data);
} catch {
    console.log('Invalid JSON');
}

ES2020 (ES11)

Optional Chaining (?.):

// Before
const city = user && user.address && user.address.city;

if (user && user.address && user.address.city) {
    console.log(user.address.city);
}

// After
const city = user?.address?.city;

if (user?.address?.city) {
    console.log(user.address.city);
}

// With arrays
const firstItem = arr?.[0];

// With functions
const result = obj.method?.();

// Practical examples
const userName = response?.data?.user?.name ?? 'Guest';
const onClick = props?.onClick?.();

Nullish Coalescing (??):

// Before - problem with falsy values
const value = input || 'default';
// Problem: 0, '', false are all replaced with 'default'

const count = 0;
const display = count || 'No items'; // 'No items' - wrong!

// After - only null/undefined
const value = input ?? 'default';

const count = 0;
const display = count ?? 'No items'; // 0 - correct!

const name = '';
const displayName = name ?? 'Anonymous'; // '' - empty string is kept

// Combined with optional chaining
const userName = user?.name ?? 'Guest';

BigInt - Arbitrary precision integers:

// Before - limited to Number.MAX_SAFE_INTEGER
const big = 9007199254740991; // MAX_SAFE_INTEGER
big + 1; // 9007199254740992
big + 2; // 9007199254740992 - wrong!

// After
const bigInt = 9007199254740991n;
bigInt + 1n; // 9007199254740992n
bigInt + 2n; // 9007199254740993n - correct!

// Or
const bigInt = BigInt('9007199254740991');

// Operations
10n + 20n; // 30n
10n * 20n; // 200n
10n / 3n; // 3n (truncates)

// Cannot mix with Number
10n + 5; // TypeError
10n + BigInt(5); // 15n

Promise.allSettled():

// Promise.all - fails if any fails
Promise.all([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
])
.then(results => console.log('All succeeded'))
.catch(err => console.log('One failed')); // Stops on first failure

// Promise.allSettled - waits for all
Promise.allSettled([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
])
.then(results => {
    results.forEach(result => {
        if (result.status === 'fulfilled') {
            console.log('Success:', result.value);
        } else {
            console.log('Failed:', result.reason);
        }
    });
});

// Result format
[
    { status: 'fulfilled', value: response1 },
    { status: 'rejected', reason: error },
    { status: 'fulfilled', value: response3 }
]

globalThis:

// Before - different in different environments
// Browser: window
// Node.js: global
// Web Workers: self

// After - works everywhere
globalThis.setTimeout(() => {}, 1000);

Dynamic import():

// Before - static imports only
import { heavy } from './heavy-module.js'; // Loaded immediately

// After - dynamic imports
button.addEventListener('click', async () => {
    const module = await import('./heavy-module.js');
    module.doSomething();
});

// Conditional loading
if (condition) {
    const module = await import('./module-a.js');
} else {
    const module = await import('./module-b.js');
}

// Practical use - code splitting
async function loadChart() {
    const { Chart } = await import('chart.js');
    return new Chart(ctx, config);
}

ES2021 (ES12)

String.prototype.replaceAll():

// Before
const str = 'hello world, hello universe';
str.replace(/hello/g, 'hi'); // 'hi world, hi universe'
str.split('hello').join('hi'); // Workaround

// After
str.replaceAll('hello', 'hi'); // 'hi world, hi universe'

Logical Assignment Operators:

// Before
if (!obj.prop) {
    obj.prop = 'default';
}

// After
obj.prop ||= 'default';

// Nullish coalescing assignment
obj.prop ??= 'default'; // Only if null/undefined

// AND assignment
obj.prop &&= newValue; // Only if truthy

// Practical examples
let count = 0;
count ||= 10; // count = 10
count ||= 20; // count = 10 (already truthy)

let value = null;
value ??= 'default'; // value = 'default'
value ??= 'other'; // value = 'default' (not null)

Numeric Separators:

// Before
const billion = 1000000000;
const bytes = 0b11111111;

// After - more readable
const billion = 1_000_000_000;
const bytes = 0b1111_1111;
const hex = 0xFF_FF_FF_FF;
const price = 1_234_567.89;

Promise.any():

// Returns first fulfilled promise
Promise.any([
    fetch('/api/server1'),
    fetch('/api/server2'),
    fetch('/api/server3')
])
.then(response => console.log('First success:', response))
.catch(err => console.log('All failed'));

// vs Promise.race (returns first settled, even if rejected)
Promise.race([...]) // First to complete (success or failure)
Promise.any([...])  // First to succeed

WeakRef and FinalizationRegistry:

// WeakRef - weak reference to object
const obj = { data: 'important' };
const weakRef = new WeakRef(obj);

// Later
const obj = weakRef.deref();
if (obj) {
    console.log(obj.data);
} else {
    console.log('Object was garbage collected');
}

// FinalizationRegistry - cleanup callback
const registry = new FinalizationRegistry((value) => {
    console.log(`Cleanup: ${value}`);
});

let obj = { data: 'test' };
registry.register(obj, 'my-object');
obj = null; // Eventually triggers cleanup callback

ES2022 (ES13)

Top-level await:

// Before - had to wrap in async function
(async () => {
    const data = await fetch('/api/data');
    console.log(data);
})();

// After - in modules
const data = await fetch('/api/data');
console.log(data);

// Practical use
const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json())
]);

export { users, posts };

Class Fields and Private Methods:

// Before
class Counter {
    constructor() {
        this.count = 0;
        this._private = 'secret'; // Convention, not enforced
    }
}

// After - public fields
class Counter {
    count = 0; // Public field
    #private = 'secret'; // Private field

    increment() {
        this.count++;
    }

    #privateMethod() { // Private method
        return this.#private;
    }

    getPrivate() {
        return this.#privateMethod();
    }
}

const counter = new Counter();
counter.count; // 0
counter.#private; // SyntaxError
counter.#privateMethod(); // SyntaxError

// Static fields and methods
class MathUtils {
    static PI = 3.14159;
    static #secret = 'private static';

    static double(n) {
        return n * 2;
    }

    static #privateStatic() {
        return this.#secret;
    }
}

MathUtils.PI; // 3.14159
MathUtils.double(5); // 10

// Static initialization blocks
class Database {
    static #connection;

    static {
        // Runs once when class is defined
        this.#connection = createConnection();
    }
}

Array.prototype.at():

const arr = [1, 2, 3, 4, 5];

// Before - negative indexing
arr[arr.length - 1]; // 5
arr[arr.length - 2]; // 4

// After
arr.at(-1); // 5
arr.at(-2); // 4
arr.at(0); // 1

// Works with strings too
'hello'.at(-1); // 'o'

Object.hasOwn():

const obj = { prop: 'value' };

// Before
obj.hasOwnProperty('prop'); // true
// Problem: can be overridden
obj.hasOwnProperty = () => false;
obj.hasOwnProperty('prop'); // false - wrong!

// After
Object.hasOwn(obj, 'prop'); // true - always works

Error.cause:

// Before
try {
    await fetch('/api/data');
} catch (err) {
    throw new Error('Failed to fetch data'); // Lost original error
}

// After
try {
    await fetch('/api/data');
} catch (err) {
    throw new Error('Failed to fetch data', { cause: err });
}

// Access original error
catch (err) {
    console.log(err.message); // 'Failed to fetch data'
    console.log(err.cause); // Original fetch error
}

RegExp Match Indices:

const pattern = /test(\d+)/d; // Note the 'd' flag
const match = pattern.exec('test123');

match.indices; // [[0, 7], [4, 7]]
// [0, 7] - full match position
// [4, 7] - first capture group position

ES2023 (ES14)

Array methods: findLast(), findLastIndex():

const arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// Before - find from start
arr.find(x => x > 3); // 4 (first occurrence)
arr.findIndex(x => x > 3); // 3

// After - find from end
arr.findLast(x => x > 3); // 4 (last occurrence)
arr.findLastIndex(x => x > 3); // 5

// Practical use
const logs = [
    { level: 'info', msg: 'Started' },
    { level: 'error', msg: 'Failed' },
    { level: 'info', msg: 'Retry' },
    { level: 'error', msg: 'Failed again' }
];

const lastError = logs.findLast(log => log.level === 'error');
// { level: 'error', msg: 'Failed again' }

Array.prototype.toSorted(), toReversed(), toSpliced(), with():

const arr = [3, 1, 4, 1, 5];

// Before - mutating methods
arr.sort(); // Modifies arr
arr.reverse(); // Modifies arr
arr.splice(1, 2); // Modifies arr

// After - non-mutating methods
const sorted = arr.toSorted(); // Returns new array
const reversed = arr.toReversed(); // Returns new array
const spliced = arr.toSpliced(1, 2); // Returns new array
const modified = arr.with(2, 99); // Returns new array with arr[2] = 99

// Original array unchanged
console.log(arr); // [3, 1, 4, 1, 5]

// Practical use - immutable updates
const state = [1, 2, 3, 4, 5];
const newState = state.with(2, 99); // [1, 2, 99, 4, 5]

Hashbang Grammar:

#!/usr/bin/env node
// Now valid JavaScript syntax

console.log('Hello from script');

Symbols as WeakMap keys:

const weak = new WeakMap();
const sym = Symbol('key');

weak.set(sym, 'value'); // Now allowed

ES2024 (ES15)

Array Grouping:

const items = [
    { type: 'fruit', name: 'apple' },
    { type: 'vegetable', name: 'carrot' },
    { type: 'fruit', name: 'banana' },
    { type: 'vegetable', name: 'broccoli' }
];

// Before
const grouped = items.reduce((acc, item) => {
    if (!acc[item.type]) acc[item.type] = [];
    acc[item.type].push(item);
    return acc;
}, {});

// After
const grouped = Object.groupBy(items, item => item.type);
// {
//   fruit: [{ type: 'fruit', name: 'apple' }, { type: 'fruit', name: 'banana' }],
//   vegetable: [{ type: 'vegetable', name: 'carrot' }, { type: 'vegetable', name: 'broccoli' }]
// }

// Map.groupBy for Map result
const groupedMap = Map.groupBy(items, item => item.type);

Promise.withResolvers():

// Before
let resolve, reject;
const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
});

// After
const { promise, resolve, reject } = Promise.withResolvers();

// Practical use
class AsyncQueue {
    #queue = [];

    async dequeue() {
        if (this.#queue.length > 0) {
            return this.#queue.shift();
        }

        const { promise, resolve } = Promise.withResolvers();
        this.#resolvers.push(resolve);
        return promise;
    }
}

Atomics.waitAsync():

// Non-blocking wait on SharedArrayBuffer
const buffer = new SharedArrayBuffer(4);
const view = new Int32Array(buffer);

// Before - blocking
Atomics.wait(view, 0, 0); // Blocks thread

// After - non-blocking
const result = Atomics.waitAsync(view, 0, 0);
result.value.then(() => {
    console.log('Value changed');
});

ES2025 (Current)

Duplicate named capture groups in RegExp:

// Now allowed
const pattern = /(?<year>\d{4})-\d{2}|\d{2}-(?<year>\d{4})/;
const match1 = pattern.exec('2025-12');
const match2 = pattern.exec('12-2025');

match1.groups.year; // '2025'
match2.groups.year; // '2025'

Set methods:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

// Union
set1.union(set2); // Set {1, 2, 3, 4, 5}

// Intersection
set1.intersection(set2); // Set {3}

// Difference
set1.difference(set2); // Set {1, 2}

// Symmetric difference
set1.symmetricDifference(set2); // Set {1, 2, 4, 5}

// Subset/superset
set1.isSubsetOf(set2); // false
set1.isDisjointFrom(set2); // false

TypeScript Evolution (2012-2025)

Created: 2012 by Microsoft (Anders Hejlsberg - creator of C#)

Problem it solved:

🎯 JavaScript had no type safety (runtime errors everywhere)
🎯 Large codebases were unmaintainable (refactoring was dangerous)
🎯 No IDE autocomplete/IntelliSense (guessing API)
🎯 Bugs only found at runtime (no compile-time checks)
🎯 Documentation was comments (no enforced contracts)

The breakthrough:

✨ Static typing - Catch errors before running code
✨ IntelliSense - IDE knows what properties/methods exist
✨ Refactoring - Rename safely across entire codebase
✨ Compiles to JavaScript - Works everywhere JS works
✨ Gradual adoption - Can add types incrementally

// JavaScript - Runtime errors
function getUser(id) {
    return fetch(`/api/users/${id}`)
        .then(res => res.json());
}

const user = getUser(123);
console.log(user.name); // Error! user is a Promise, not an object
// Only discover this when running the code

// TypeScript - Compile-time errors
async function getUser(id: number): Promise<User> {
    const res = await fetch(`/api/users/${id}`);
    return res.json();
}

const user = getUser(123);
console.log(user.name); // Error! Type 'Promise<User>' has no property 'name'
// IDE shows error immediately, before running

const user = await getUser(123);
console.log(user.name); // ✅ Works! IDE autocompletes 'name'

TypeScript 1.0 (2014)

Basic Types:

// Primitive types
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;

// Arrays
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b", "c"];

// Tuples
let tuple: [string, number] = ["John", 30];

// Enums
enum Color {
    Red,
    Green,
    Blue
}
let color: Color = Color.Red;

// Any - escape hatch
let anything: any = 4;
anything = "string";
anything = true;

// Functions
function add(a: number, b: number): number {
    return a + b;
}

const multiply = (a: number, b: number): number => a * b;

Interfaces:

interface User {
    id: number;
    name: string;
    email: string;
    age?: number; // Optional
    readonly created: Date; // Readonly
}

function createUser(user: User): void {
    console.log(user.name);
}

// Extending interfaces
interface Admin extends User {
    role: string;
    permissions: string[];
}

TypeScript 1.4 (2015) - Union Types

// Union types
let value: string | number;
value = "hello";
value = 42;

// Type guards
function process(value: string | number) {
    if (typeof value === "string") {
        return value.toUpperCase(); // TypeScript knows it's string
    } else {
        return value.toFixed(2); // TypeScript knows it's number
    }
}

// Literal types
let direction: "north" | "south" | "east" | "west";
direction = "north"; // OK
direction = "up"; // Error

TypeScript 1.6 (2015) - Intersection Types

// Intersection types
interface Loggable {
    log(): void;
}

interface Serializable {
    serialize(): string;
}

type LoggableSerializable = Loggable & Serializable;

class MyClass implements LoggableSerializable {
    log() { console.log("logging"); }
    serialize() { return "{}"; }
}

TypeScript 2.0 (2016) - Major Update

Non-nullable types:

// Before - everything could be null/undefined
let name: string = null; // OK

// After - strictNullChecks
let name: string = null; // Error
let name: string | null = null; // OK

function greet(name: string) {
    console.log(name.toUpperCase()); // Safe - name cannot be null
}

function greet(name: string | null) {
    if (name) {
        console.log(name.toUpperCase()); // Must check first
    }
}

Readonly properties:

interface Point {
    readonly x: number;
    readonly y: number;
}

let point: Point = { x: 10, y: 20 };
point.x = 5; // Error

// Readonly arrays
let arr: ReadonlyArray<number> = [1, 2, 3];
arr.push(4); // Error
arr[0] = 5; // Error

Tagged union types:

interface Square {
    kind: "square";
    size: number;
}

interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}

interface Circle {
    kind: "circle";
    radius: number;
}

type Shape = Square | Rectangle | Circle;

function area(shape: Shape): number {
    switch (shape.kind) {
        case "square":
            return shape.size ** 2; // TypeScript knows it's Square
        case "rectangle":
            return shape.width * shape.height; // Rectangle
        case "circle":
            return Math.PI * shape.radius ** 2; // Circle
    }
}

TypeScript 2.1 (2016) - Advanced Features

Mapped types:

// Make all properties optional
type Partial<T> = {
    [P in keyof T]?: T[P];
};

// Make all properties readonly
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface User {
    name: string;
    age: number;
}

type PartialUser = Partial<User>; // { name?: string; age?: number; }
type ReadonlyUser = Readonly<User>; // { readonly name: string; readonly age: number; }

keyof and lookup types:

interface Person {
    name: string;
    age: number;
}

type PersonKeys = keyof Person; // "name" | "age"

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const person = { name: "John", age: 30 };
const name = getProperty(person, "name"); // string
const age = getProperty(person, "age"); // number

TypeScript 2.8 (2018) - Conditional Types

// Conditional types
type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

// Practical use - extract return type
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
    return { name: "John", age: 30 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number; }

// Exclude/Extract
type Exclude<T, U> = T extends U ? never : T;
type Extract<T, U> = T extends U ? T : never;

type T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T2 = Extract<"a" | "b" | "c", "a" | "f">; // "a"

TypeScript 3.0 (2018) - Tuples and Rest

Tuple improvements:

// Rest elements in tuples
type Strings = [string, string];
type Numbers = [number, number];
type StrStrNumNumBool = [...Strings, ...Numbers, boolean];
// [string, string, number, number, boolean]

// Optional elements
type OptionalTuple = [string, number?];
let t1: OptionalTuple = ["hello"];
let t2: OptionalTuple = ["hello", 42];

TypeScript 3.7 (2019) - Optional Chaining

// Optional chaining (same as JavaScript)
const city = user?.address?.city;

// Nullish coalescing
const name = user?.name ?? "Guest";

// Assertion functions
function assert(condition: any, msg?: string): asserts condition {
    if (!condition) {
        throw new Error(msg);
    }
}

function processValue(value: string | null) {
    assert(value !== null, "Value must not be null");
    // TypeScript knows value is string here
    console.log(value.toUpperCase());
}

TypeScript 4.0 (2020) - Variadic Tuples

// Variadic tuple types
function concat<T extends unknown[], U extends unknown[]>(
    arr1: T,
    arr2: U
): [...T, ...U] {
    return [...arr1, ...arr2];
}

const result = concat([1, 2], ["a", "b"]);
// type: [number, number, string, string]

// Labeled tuple elements
type Range = [start: number, end: number];

function createRange(...[start, end]: Range) {
    // ...
}

TypeScript 4.1 (2020) - Template Literal Types

// Template literal types
type World = "world";
type Greeting = `hello ${World}`; // "hello world"

type Color = "red" | "blue";
type Quantity = "one" | "two";
type SeussFish = `${Quantity | Color} fish`;
// "one fish" | "two fish" | "red fish" | "blue fish"

// Practical use - API routes
type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type Route = "/users" | "/posts" | "/comments";
type APIRoute = `${HTTPMethod} ${Route}`;
// "GET /users" | "POST /users" | ... (12 combinations)

// Intrinsic string manipulation
type Uppercase<S extends string> = intrinsic;
type Lowercase<S extends string> = intrinsic;
type Capitalize<S extends string> = intrinsic;
type Uncapitalize<S extends string> = intrinsic;

type Loud = Uppercase<"hello">; // "HELLO"
type Quiet = Lowercase<"HELLO">; // "hello"

Recursive conditional types:

// Deep readonly
type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object
        ? DeepReadonly<T[P]>
        : T[P];
};

interface Nested {
    a: {
        b: {
            c: number;
        };
    };
}

type ReadonlyNested = DeepReadonly<Nested>;
// All levels are readonly

TypeScript 4.5 (2021) - Awaited Type

// Awaited - unwrap Promise types
type A = Awaited<Promise<string>>; // string
type B = Awaited<Promise<Promise<number>>>; // number

// Practical use
async function fetchUser() {
    return { name: "John", age: 30 };
}

type User = Awaited<ReturnType<typeof fetchUser>>;
// { name: string; age: number; }

TypeScript 4.7 (2022) - Module Detection

ES Module support improvements:

// package.json
{
    "type": "module"
}

// Now .ts files are treated as ES modules by default

TypeScript 4.9 (2022) - satisfies Operator

// Before - lose type information
const config: Record<string, string | number> = {
    host: "localhost",
    port: 3000
};

config.host.toUpperCase(); // Error - might be number

// After - keep specific types
const config = {
    host: "localhost",
    port: 3000
} satisfies Record<string, string | number>;

config.host.toUpperCase(); // OK - TypeScript knows it's string
config.port.toFixed(2); // OK - TypeScript knows it's number

TypeScript 5.0 (2023) - Decorators

Standard decorators:

// Class decorator
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class MyClass {
    // ...
}

// Method decorator
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyKey} with`, args);
        return original.apply(this, args);
    };
}

class Calculator {
    @log
    add(a: number, b: number) {
        return a + b;
    }
}

const type parameters:

// Infer literal types
function makeArray<const T>(arr: T[]): T[] {
    return arr;
}

const arr1 = makeArray([1, 2, 3]); // number[]
const arr2 = makeArray([1, 2, 3] as const); // readonly [1, 2, 3]

TypeScript 5.2 (2023) - using Declarations

// Explicit resource management
{
    using file = openFile("data.txt");
    // file is automatically closed at end of scope
}

// Async disposal
{
    await using connection = await connectToDatabase();
    // connection is automatically closed
}

TypeScript 5.4 (2024) - NoInfer

// Prevent type inference in specific places
function createStore<T>(
    initial: T,
    updater: (current: NoInfer<T>) => T
) {
    // ...
}

// Forces updater parameter to match initial type exactly

TypeScript 5.5 (2024) - Inferred Type Predicates

// Before - manual type predicate
function isString(value: unknown): value is string {
    return typeof value === "string";
}

// After - inferred
function isString(value: unknown) {
    return typeof value === "string";
}
// TypeScript infers the type predicate automatically

Server-Side JavaScript: Node.js & Beyond

Created: 2009 by Ryan Dahl

Problem it solved:

🎯 JavaScript was only for browsers (couldn't build servers)
🎯 Apache/PHP blocked on I/O (one thread per request = slow)
🎯 Couldn't use same language for frontend and backend
🎯 Needed non-blocking I/O for real-time apps (chat, streaming)
🎯 C10K problem (handling 10,000 concurrent connections)

The breakthrough:

✨ V8 engine - Fast JavaScript execution (from Chrome)
✨ Event loop - Non-blocking I/O (handle thousands of connections)
✨ Single language - JavaScript everywhere (frontend + backend)
✨ npm - Largest package ecosystem ever created
✨ Async by default - Perfect for I/O-heavy applications

// Before Node.js - PHP (blocking)
<?php
// Each request blocks a thread
$data = file_get_contents('file.txt'); // Blocks!
$result = mysql_query("SELECT * FROM users"); // Blocks!
echo $data;
?>
// Apache: 1 thread per request = max ~1000 concurrent users

// With Node.js - Non-blocking
const fs = require('fs');
const mysql = require('mysql');

// Handles thousands of concurrent requests
fs.readFile('file.txt', (err, data) => {
    // Doesn't block! Event loop continues
    console.log(data);
});

mysql.query("SELECT * FROM users", (err, results) => {
    // Doesn't block! Event loop continues
    console.log(results);
});
// Node.js: Event loop = handle 10,000+ concurrent users

Node.js Evolution

Node.js 0.x (2009-2015):

// Callback-based APIs
const fs = require('fs');

fs.readFile('file.txt', 'utf8', function(err, data) {
    if (err) throw err;
    console.log(data);
});

// Event emitters
const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}
const emitter = new MyEmitter();

emitter.on('event', () => {
    console.log('Event fired');
});

emitter.emit('event');

Node.js 4.x (2015) - ES6 Support:

// Arrow functions, classes, etc.
const fs = require('fs');

class FileReader {
    read(path) {
        return new Promise((resolve, reject) => {
            fs.readFile(path, 'utf8', (err, data) => {
                if (err) reject(err);
                else resolve(data);
            });
        });
    }
}

Node.js 8.x (2017) - async/await:

const fs = require('fs').promises;

async function readFile(path) {
    try {
        const data = await fs.readFile(path, 'utf8');
        return data;
    } catch (err) {
        console.error(err);
    }
}

Node.js 12.x (2019) - ES Modules:

// package.json
{
    "type": "module"
}

// Now can use ES modules
import fs from 'fs/promises';

const data = await fs.readFile('file.txt', 'utf8');

Node.js 14.x (2020) - Top-level await:

// No need for async wrapper
import { readFile } from 'fs/promises';

const data = await readFile('config.json', 'utf8');
const config = JSON.parse(data);

export default config;

Node.js 16.x (2021) - Timers Promises:

import { setTimeout } from 'timers/promises';

await setTimeout(1000);
console.log('1 second passed');

// AbortController support
const controller = new AbortController();
setTimeout(1000, 'result', { signal: controller.signal });
controller.abort();

Node.js 18.x (2022) - Fetch API:

// Native fetch (no need for node-fetch)
const response = await fetch('https://api.example.com/data');
const data = await response.json();

// Test runner
import { test } from 'node:test';
import assert from 'node:assert';

test('addition', () => {
    assert.strictEqual(1 + 1, 2);
});

Node.js 20.x (2023) - Stable Features:

// Permission model
node --experimental-permission --allow-fs-read=/path script.js

// Single executable applications
node --experimental-sea-config sea-config.json

Alternative Runtimes

Deno (2020):

// Secure by default, TypeScript native
// No package.json, no node_modules

// Permissions required
deno run --allow-net --allow-read script.ts

// URL imports
import { serve } from "https://deno.land/std@0.140.0/http/server.ts";

serve((req) => new Response("Hello World"));

// Top-level await
const data = await fetch("https://api.example.com/data");
const json = await data.json();
console.log(json);

// Built-in tools
deno fmt // Format code
deno lint // Lint code
deno test // Run tests
deno bundle // Bundle code

Bun (2022):

// Fast all-in-one runtime
// Built-in bundler, transpiler, package manager

// Fast startup
console.log("Hello from Bun!");

// Native TypeScript
import type { User } from "./types";

// Built-in SQLite
import { Database } from "bun:sqlite";
const db = new Database("mydb.sqlite");

// Fast package manager
bun install // Much faster than npm

// Built-in test runner
import { expect, test } from "bun:test";

test("addition", () => {
    expect(1 + 1).toBe(2);
});

// Web APIs
const server = Bun.serve({
    port: 3000,
    fetch(req) {
        return new Response("Hello from Bun!");
    }
});

Frameworks & Libraries: Rise and Fall

The jQuery Era (2006-2015)

jQuery - Dominated web development

Peak usage: 2010-2015 (used on 70%+ of websites)

Problem it solved:

🎯 Browser incompatibility nightmare (IE6, IE7, IE8, Firefox, Chrome all different)
🎯 DOM manipulation was verbose and inconsistent
🎯 AJAX was different in every browser
🎯 Event handling was inconsistent
🎯 CSS selectors weren't supported in old browsers

// Before jQuery - Browser hell
// Different code for different browsers
if (document.getElementById) {
    var elem = document.getElementById('myDiv');
} else if (document.all) {
    var elem = document.all['myDiv'];
}

// AJAX - Different in IE vs others
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// Event handling - Different everywhere
if (elem.addEventListener) {
    elem.addEventListener('click', handler, false);
} else if (elem.attachEvent) {
    elem.attachEvent('onclick', handler);
}

// With jQuery - Works everywhere!
$('#myDiv').click(function() {
    $.ajax({
        url: '/api/data',
        success: function(data) {
            $('#result').html(data);
        }
    });
});

Why it succeeded:

Cross-browser compatibility (one API for all browsers)
Simple API ($() for everything)
Plugin ecosystem (10,000+ plugins)
"Write less, do more"

Why it declined:

Modern browsers standardized (querySelector, fetch, classList)
Native APIs improved (no more IE6-8)
Vanilla JS became easier
SPAs needed more structure (React, Vue, Angular)
Performance concerns (manipulating DOM directly)

jQuery plugins ecosystem:

// Thousands of plugins
$('#slider').slick(); // Carousel
$('#datepicker').datepicker(); // Date picker
$('#modal').modal(); // Modals
$('.tooltip').tooltip(); // Tooltips

// jQuery UI
$('#accordion').accordion();
$('#tabs').tabs();
$('#draggable').draggable();

What replaced it:

Native DOM APIs (querySelector, fetch)
Modern frameworks (React, Vue, Angular)
Utility libraries (Lodash)

When it became legacy: ~2017-2018

What replaced it:

Native DOM APIs (querySelector, fetch, classList)
Modern frameworks (React, Vue, Angular)
Utility libraries (Lodash for utilities only)

Pros of jQuery (why it dominated):

✅ Cross-browser compatibility (IE6-11)
✅ Simple, intuitive API
✅ Huge plugin ecosystem (10,000+ plugins)
✅ Easy to learn
✅ Chainable methods
✅ AJAX made simple
✅ Animation built-in

Cons of jQuery (why it died):

❌ Performance overhead (entire library loaded)
❌ DOM manipulation slow for complex UIs
❌ No component model
❌ No state management
❌ Imperative (not declarative)
❌ Large bundle size (30KB+ minified)
❌ Modern browsers don't need it
❌ Not suitable for SPAs

Migration path:

// jQuery → Vanilla JS
$('#id') → document.getElementById('id')
$('.class') → document.querySelectorAll('.class')
$.ajax() → fetch()
$(el).addClass() → el.classList.add()
$(el).on('click', fn) → el.addEventListener('click', fn)

// jQuery → React
$('#app').html(content) → ReactDOM.render(<App />, root)

Current status (2025):

Still used in legacy projects (~30% of websites)
WordPress still includes it (but optional)
Usage declining rapidly (-10% per year)
Not recommended for new projects
Maintenance mode only

The MV* Framework Wars (2010-2015)

Backbone.js (2010)

Status: Dead

When it became legacy: ~2015-2016

Peak usage: 2012-2014

What replaced it: React, Vue, Angular

Pros of Backbone:

✅ Lightweight (7KB)
✅ Flexible, unopinionated
✅ RESTful by default
✅ Simple event system
✅ Works with any template engine
✅ Good for small apps

Cons of Backbone:

❌ Too minimal (needed many plugins)
❌ Boilerplate-heavy
❌ Manual DOM updates
❌ No two-way binding
❌ No component model
❌ Required Underscore.js dependency
❌ Memory leaks common (zombie views)
❌ Routing limited

Migration path:

Backbone → React (most common)
Backbone → Vue (easier migration)
Some stayed on Backbone (legacy apps)

Legacy: Influenced modern frameworks (models, collections, events)

Knockout.js (2010)

Status: Legacy/Maintenance mode

When it became legacy: ~2016-2017

Peak usage: 2011-2014

What replaced it:

Vue.js (similar reactivity, better DX)
React
Angular

Pros of Knockout:

✅ MVVM pattern (clean separation)
✅ Automatic UI updates (observables)
✅ Declarative bindings
✅ No dependencies
✅ Works with any web framework
✅ Good documentation
✅ Two-way binding

Cons of Knockout:

❌ Observable syntax verbose (ko.observable())
❌ Must call observables as functions
❌ No component model (initially)
❌ No virtual DOM (slower updates)
❌ Limited ecosystem
❌ MVVM pattern fell out of favor
❌ Computed observables complex
❌ Memory management issues

Migration path:

Knockout → Vue (easiest, similar concepts)
Knockout → React (more common)
Some enterprise apps still use it

Current status: Still maintained but not recommended for new projects

AngularJS 1.x (2010-2012)

Status: Dead (officially ended support January 1, 2022)

When it became legacy: ~2016 (when Angular 2 released)

Peak usage: 2013-2016 (used by Google, YouTube, Netflix)

Problem it solved:

🎯 jQuery spaghetti code (mixing DOM manipulation with logic)
🎯 No structure for large applications
🎯 Manual DOM updates when data changed
🎯 No two-way data binding (had to sync manually)
🎯 Needed complete framework (routing, HTTP, forms, etc.)

The breakthrough:

✨ Two-way data binding - Change model, view updates automatically
✨ Dependency injection - Testable, modular code
✨ Directives - Extend HTML with custom elements
✨ Complete framework - Everything included

// Before AngularJS - jQuery spaghetti
var users = [];

$('#add-user').click(function() {
    var name = $('#user-name').val();
    users.push({ name: name });

    // Manually update DOM
    $('#user-list').append('<li>' + name + '</li>');
    $('#user-count').text(users.length);
    $('#user-name').val('');
});

// With AngularJS - Two-way binding
angular.module('app', [])
    .controller('MainCtrl', function($scope) {
        $scope.users = [];

        $scope.addUser = function() {
            $scope.users.push({ name: $scope.userName });
            $scope.userName = '';
            // View updates automatically!
        };
    });

<!-- AngularJS template - Declarative -->
<div ng-controller="MainCtrl">
    <input ng-model="userName">
    <button ng-click="addUser()">Add</button>
    <ul>
        <li ng-repeat="user in users">{{user.name}}</li>
    </ul>
    <p>Total: {{users.length}}</p>
</div>

// AngularJS 1.x - Full example
angular.module('app', [])
    .controller('MainCtrl', function($scope, $http) {
        $scope.users = [];

        $http.get('/api/users').then(function(response) {
            $scope.users = response.data;
        });

        $scope.addUser = function(user) {
            $scope.users.push(user);
        };
    });

What replaced it:

Angular 2+ (complete rewrite, difficult migration)
React (most common migration)
Vue (easier migration)

Pros of AngularJS:

✅ Two-way data binding (revolutionary at the time)
✅ Dependency injection
✅ Directives (reusable components)
✅ Complete framework (routing, HTTP, forms)
✅ Google backing
✅ Large community
✅ Good for enterprise apps
✅ Testable (built-in testing support)

Cons of AngularJS:

❌ Digest cycle performance issues (slow with >2000 watchers)
❌ Two-way binding caused unpredictable updates
❌ Steep learning curve (directives, $scope, digest)
❌ $scope confusion (inheritance issues)
❌ Dirty checking inefficient
❌ No component model (initially)
❌ Directive API complex
❌ Version 2 was complete rewrite (no upgrade path)
❌ Too much "magic"
❌ Large bundle size

Migration path:

AngularJS → Angular 2+ (very difficult, complete rewrite)
AngularJS → React (most common, easier)
AngularJS → Vue (easiest migration)
Many apps stayed on AngularJS until 2022

Why the migration was painful:

Zero compatibility between AngularJS and Angular 2+
Different language (TypeScript required)
Different concepts (no $scope, no digest)
Had to rewrite entire app

Current status:

Dead (no security updates after 2022)
Legacy apps being migrated
Not recommended even for maintenance

Ember.js (2011)

Status: Alive but niche (declining)

When it started declining: ~2015-2016

Peak usage: 2013-2016

What's replacing it:

React (most migrations)
Vue
Modern frameworks

Pros of Ember:

✅ Convention over configuration
✅ Complete framework (batteries included)
✅ Ember CLI (best CLI at the time)
✅ Strong opinions (consistency)
✅ Ember Data (powerful ORM)
✅ Backward compatibility (smooth upgrades)
✅ Great for large teams
✅ Stable releases
✅ Good documentation
✅ Addons ecosystem

Cons of Ember:

❌ Too opinionated (hard to deviate)
❌ Steep learning curve
❌ Large bundle size (200KB+)
❌ Slower than React/Vue
❌ Smaller ecosystem than React
❌ Less flexible
❌ Harder to hire developers
❌ "The Ember Way" or nothing
❌ Verbose syntax
❌ Slower innovation

Current usage (2025):

Some large legacy apps (LinkedIn, Apple Music, Discourse)
Convention over configuration still valued
Stable but shrinking community
Hard to justify for new projects
Good for teams that value stability over innovation

Migration path:

Ember → React (most common)
Ember → Vue
Many apps staying on Ember (stable, works well)

Current status:

Still maintained and updated
Octane edition (2019) modernized it
But market share declining
Not recommended for new projects unless specific needs

// Ember.js - still used
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TodoComponent extends Component {
    @tracked todos = [];

    @action
    addTodo(text) {
        this.todos = [...this.todos, { text, done: false }];
    }
}

The Modern Framework Era (2013-Present)

React (2013-Present)

Status: Dominant

Problem it solved:

🎯 jQuery/Backbone couldn't handle complex UIs (Facebook news feed)
🎯 DOM manipulation was slow and hard to reason about
🎯 Two-way data binding (Angular 1) caused performance issues
🎯 Hard to know what changed when state updated
🎯 Needed declarative UI (describe what, not how)

The breakthrough:

✨ Virtual DOM - Diff and update only what changed
✨ One-way data flow - Predictable state management
✨ Components - Reusable, composable UI pieces
✨ JSX - Write HTML in JavaScript (controversial but powerful)

// Before React - jQuery spaghetti
function updateUI(data) {
    $('#user-name').text(data.name);
    $('#user-email').text(data.email);
    if (data.premium) {
        $('#premium-badge').show();
    } else {
        $('#premium-badge').hide();
    }
    // Manually track what changed, update DOM
    // Gets messy fast!
}

// With React - Declarative
function UserProfile({ user }) {
    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
            {user.premium && <span className="badge">Premium</span>}
        </div>
    );
    // React figures out what changed and updates DOM
}

Evolution:

// 2013: Class components
class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    render() {
        return <h1>Count: {this.state.count}</h1>;
    }
}

// 2015: ES6 classes
class Welcome extends React.Component {
    state = { count: 0 };

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <h1>Count: {this.state.count}</h1>
                <button onClick={this.increment}>+</button>
            </div>
        );
    }
}

// 2019: Hooks (game changer)
function Welcome() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
}

// 2020: Custom hooks
function useCounter(initial = 0) {
    const [count, setCount] = useState(initial);

    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initial);

    return { count, increment, decrement, reset };
}

function Counter() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

// 2024: Server Components (Next.js 13+)
// app/page.tsx
async function Page() {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();

    return <div>{json.title}</div>;
}
// Runs on server, no JavaScript sent to client

React Ecosystem:

// State management evolution

// 2015: Redux
import { createStore } from 'redux';

const reducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
};

const store = createStore(reducer);

// 2018: Redux Toolkit (simplified)
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        increment: state => { state.count += 1; }
    }
});

const store = configureStore({
    reducer: { counter: counterSlice.reducer }
});

// 2019: Context + Hooks (built-in)
const CountContext = React.createContext();

function CountProvider({ children }) {
    const [count, setCount] = useState(0);
    return (
        <CountContext.Provider value={{ count, setCount }}>
            {children}
        </CountContext.Provider>
    );
}

function useCount() {
    return useContext(CountContext);
}

// 2020: Zustand (simple)
import create from 'zustand';

const useStore = create(set => ({
    count: 0,
    increment: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
    const { count, increment } = useStore();
    return <button onClick={increment}>{count}</button>;
}

// 2021: Jotai (atomic)
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
    const [count, setCount] = useAtom(countAtom);
    return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// 2022: TanStack Query (server state)
import { useQuery } from '@tanstack/react-query';

function Users() {
    const { data, isLoading } = useQuery({
        queryKey: ['users'],
        queryFn: () => fetch('/api/users').then(r => r.json())
    });

    if (isLoading) return <div>Loading...</div>;
    return <div>{data.map(user => <div key={user.id}>{user.name}</div>)}</div>;
}

Vue.js (2014-Present)

Status: Very popular, especially in Asia

Problem it solved:

🎯 React's JSX was controversial (mixing HTML in JavaScript)
🎯 Angular 2 was too complex (TypeScript required, steep learning curve)
🎯 Needed something easier than Angular, more approachable than React
🎯 Wanted templates (like Angular) but simpler
🎯 Progressive framework (use as little or as much as needed)

The breakthrough:

✨ Approachable - Easiest learning curve of the big 3
✨ Templates - HTML-based (familiar to designers)
✨ Reactive - Like React but simpler
✨ Progressive - Can use just for one component or entire app
✨ Single File Components - HTML, CSS, JS in one file

// React - JSX (controversial)
function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// Angular - Complex
@Component({
    selector: 'app-counter',
    template: '<button (click)="increment()">{{count}}</button>'
})
export class CounterComponent {
    count = 0;
    increment() { this.count++; }
}

// Vue - Simple, familiar templates
<template>
    <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
    data() {
        return { count: 0 };
    }
};
</script>

Evolution:

// 2014: Vue 1.x - Options API
new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

// 2016: Vue 2.x - Improved
Vue.component('counter', {
    data() {
        return { count: 0 };
    },
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button @click="increment">+</button>
        </div>
    `,
    methods: {
        increment() {
            this.count++;
        }
    }
});

// 2020: Vue 3.x - Composition API
import { ref, computed } from 'vue';

export default {
    setup() {
        const count = ref(0);
        const doubled = computed(() => count.value * 2);

        const increment = () => {
            count.value++;
        };

        return { count, doubled, increment };
    }
};

// 2023: Vue 3.3 - Script setup (cleaner)
<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

const increment = () => {
    count.value++;
};
</script>

<template>
    <div>
        <h1>{{ count }}</h1>
        <p>Doubled: {{ doubled }}</p>
        <button @click="increment">+</button>
    </div>
</template>

Vue Ecosystem:

Vuex (2015) → Pinia (2021) - State management
Vue Router - Official routing
Nuxt.js - Full-stack framework (like Next.js for React)

Angular 2+ (2016-Present)

Status: Popular in enterprise

Complete rewrite from AngularJS:

// Angular 2+ (2016)
import { Component } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button (click)="increment()">+</button>
        </div>
    `
})
export class CounterComponent {
    count = 0;

    increment() {
        this.count++;
    }
}

// Angular 14+ (2022) - Standalone components
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-counter',
    standalone: true,
    imports: [CommonModule],
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button (click)="increment()">+</button>
        </div>
    `
})
export class CounterComponent {
    count = 0;

    increment() {
        this.count++;
    }
}

// Angular 16+ (2023) - Signals
import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    standalone: true,
    template: `
        <div>
            <h1>{{ count() }}</h1>
            <button (click)="increment()">+</button>
        </div>
    `
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update(c => c + 1);
    }
}

Pros of Angular 2+:

✅ TypeScript from the start (type safety)
✅ Complete framework (routing, HTTP, forms, testing)
✅ Dependency injection (enterprise-grade)
✅ RxJS integration (powerful async)
✅ Angular CLI (excellent tooling)
✅ Opinionated (consistency in large teams)
✅ Google backing (long-term support)
✅ Great for enterprise
✅ Strong conventions
✅ Ahead-of-Time compilation
✅ Built-in form validation
✅ Internationalization built-in

Cons of Angular 2+:

❌ Steep learning curve (RxJS, TypeScript, DI)
❌ Verbose (lots of boilerplate)
❌ Large bundle size (100KB+ minimum)
❌ Slower than React/Vue
❌ Breaking changes between versions (initially)
❌ RxJS required (complex for beginners)
❌ Decorator-heavy (lots of magic)
❌ Zone.js overhead
❌ Less flexible than React
❌ Smaller ecosystem than React

Why Angular survived:

TypeScript from the start (ahead of its time)
Enterprise adoption (banks, insurance, government)
Complete framework (no decision fatigue)
Google backing (trust and stability)
Strong CLI and tooling
Good for large teams
Backward compatibility improved

When to use Angular (2025):

✅ Enterprise applications
✅ Large teams (need consistency)
✅ TypeScript-first projects
✅ Need complete framework
✅ Long-term projects (stability)

When NOT to use Angular:

❌ Small projects (too heavy)
❌ Need fast learning curve
❌ Performance critical (use React/Svelte)
❌ Small bundle size needed
❌ Startup/fast iteration

Current status (2025):

Alive and well (15% market share)
Angular 17+ with Signals (modern reactivity)
Standalone components (less boilerplate)
Still best for enterprise
Not growing but stable

New Generation Frameworks (2019-Present)

Svelte (2016, popular 2019+)

Status: Growing rapidly

Philosophy: Compile-time framework (no virtual DOM)

<!-- Before: React -->
import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
}

<!-- After: Svelte -->
<script>
    let count = 0;

    function increment() {
        count += 1; // Just mutate!
    }
</script>

<div>
    <h1>{count}</h1>
    <button on:click={increment}>+</button>
</div>

<!-- Reactive declarations -->
<script>
    let count = 0;
    $: doubled = count * 2; // Automatically updates
    $: if (count > 10) {
        alert('Count is high!');
    }
</script>

<!-- SvelteKit (2021) - Full-stack framework -->
<script>
    export let data; // From load function
</script>

<h1>{data.title}</h1>

Pros of Svelte:

✅ Less boilerplate (cleanest syntax)
✅ No virtual DOM (compiles to vanilla JS)
✅ Smallest bundle sizes (10-20KB typical)
✅ Easier to learn (feels like HTML/CSS/JS)
✅ Great developer experience
✅ Reactive by default ($: syntax)
✅ Built-in animations/transitions
✅ Scoped CSS by default
✅ Fast performance
✅ No runtime overhead
✅ True reactivity (not virtual DOM diffing)

Cons of Svelte:

❌ Smaller ecosystem than React
❌ Fewer jobs (but growing)
❌ Less mature (newer framework)
❌ Fewer third-party components
❌ Compiler adds build step
❌ Some edge cases with reactivity
❌ Smaller community
❌ Less Stack Overflow answers
❌ Corporate backing unclear (Rich Harris at Vercel)

When to use Svelte (2025):

✅ New projects (greenfield)
✅ Performance critical apps
✅ Small bundle size needed
✅ Developer experience priority
✅ Content-heavy sites
✅ Interactive visualizations

Current status (2025):

Growing rapidly (10% market share)
SvelteKit stable and mature
Svelte 5 with Runes (new reactivity)
Recommended for new projects
Great for indie developers

Solid.js (2021)

Status: Rising star (niche but growing)

Philosophy: Fine-grained reactivity (like Svelte but JSX)

Peak performance: Fastest framework in benchmarks

// Solid.js
import { createSignal, createEffect } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);

    createEffect(() => {
        console.log('Count is:', count());
    });

    return (
        <div>
            <h1>{count()}</h1>
            <button onClick={() => setCount(count() + 1)}>+</button>
        </div>
    );
}

// No virtual DOM, but JSX
// Extremely fast
// React-like API but different mental model

Pros of Solid.js:

✅ Fastest framework (beats all in benchmarks)
✅ Fine-grained reactivity (no virtual DOM)
✅ JSX (familiar to React developers)
✅ Small bundle size (7KB)
✅ No re-renders (only updates what changed)
✅ React-like API (easier migration)
✅ TypeScript support
✅ Great performance
✅ Signals-based (modern reactivity)

Cons of Solid.js:

❌ Very small ecosystem
❌ Few jobs
❌ Different mental model (not React)
❌ Signals can be confusing
❌ Less mature
❌ Fewer components/libraries
❌ Small community
❌ JSX looks like React but behaves differently
❌ Learning curve (reactivity model)

When to use Solid.js (2025):

✅ Performance is critical
✅ Coming from React (familiar JSX)
✅ Want modern reactivity
✅ Small bundle size needed
✅ Experimental/side projects

Current status (2025):

Niche but growing
SolidStart (meta-framework) maturing
Used by some performance-critical apps
Not recommended for most production apps yet
Great for learning modern reactivity

Qwik (2023)

Status: Experimental but promising

Philosophy: Resumability (instant loading, no hydration)

Creator: Miško Hevery (creator of AngularJS)

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
    const count = useSignal(0);

    return (
        <div>
            <h1>{count.value}</h1>
            <button onClick$={() => count.value++}>+</button>
        </div>
    );
});

// Loads only what's needed
// No hydration, just resumability
// Instant interactive

Pros of Qwik:

✅ Instant loading (resumability)
✅ No hydration (faster than SSR)
✅ Lazy loads everything automatically
✅ Best Time to Interactive (TTI)
✅ JSX (familiar)
✅ Signals-based reactivity
✅ Great for content-heavy sites
✅ Innovative approach

Cons of Qwik:

❌ Very new (experimental)
❌ Tiny ecosystem
❌ Almost no jobs
❌ Different mental model ($ syntax)
❌ Not proven at scale
❌ Small community
❌ Optimizer can be confusing
❌ Build complexity
❌ Not recommended for production yet

When to use Qwik (2025):

✅ Experimental projects
✅ Content-heavy sites (blogs, docs)
✅ Performance is critical
✅ Want to try cutting-edge tech
❌ NOT for production apps yet

Current status (2025):

Experimental
QwikCity (meta-framework) available
Interesting concept but unproven
Wait for more maturity

Meta-Frameworks (Full-Stack)

Next.js (React) - 2016-Present

Status: Industry standard for React

Evolution:

// 2016: Next.js 1.0 - Simple SSR
// pages/index.js
export default function Home() {
    return <h1>Hello Next.js</h1>;
}

// 2018: Next.js 7 - Static export
export async function getStaticProps() {
    const data = await fetch('https://api.example.com/data');
    return { props: { data } };
}

// 2020: Next.js 9.3 - SSG + ISR
export async function getStaticProps() {
    return {
        props: { data },
        revalidate: 60 // Regenerate every 60 seconds
    };
}

// 2022: Next.js 13 - App Router (Server Components)
// app/page.tsx
async function Page() {
    const data = await fetch('https://api.example.com/data');
    return <div>{data.title}</div>;
}

// app/layout.tsx
export default function RootLayout({ children }) {
    return (
        <html>
            <body>{children}</body>
        </html>
    );
}

// 2023: Next.js 13.4 - Stable App Router
// Server Actions
async function createUser(formData: FormData) {
    'use server';

    const name = formData.get('name');
    await db.users.create({ name });
}

// Client component
'use client';
export default function Form() {
    return (
        <form action={createUser}>
            <input name="name" />
            <button>Submit</button>
        </form>
    );
}

Nuxt.js (Vue) - 2016-Present

Status: Standard for Vue

// Nuxt 2 (2018)
export default {
    async asyncData({ $axios }) {
        const data = await $axios.$get('/api/data');
        return { data };
    }
};

// Nuxt 3 (2022) - Composition API
<script setup>
const { data } = await useFetch('/api/data');
</script>

<template>
    <div>{{ data }}</div>
</template>

Remix (React) - 2021

Status: Growing, acquired by Shopify

// Loader (server-side)
export async function loader({ params }) {
    const user = await getUser(params.id);
    return json({ user });
}

// Action (server-side)
export async function action({ request }) {
    const formData = await request.formData();
    await createUser(formData);
    return redirect('/users');
}

// Component
export default function User() {
    const { user } = useLoaderData();

    return (
        <div>
            <h1>{user.name}</h1>
            <Form method="post">
                <input name="name" />
                <button>Update</button>
            </Form>
        </div>
    );
}

Astro (2021)

Status: Popular for content sites

Philosophy: Ship zero JavaScript by default

---
// Server-side code
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
---

<html>
    <body>
        <h1>Blog Posts</h1>
        {posts.map(post => (
            <article>
                <h2>{post.title}</h2>
                <p>{post.excerpt}</p>
            </article>
        ))}
    </body>
</html>

<!-- Can use any framework -->
---
import ReactCounter from './ReactCounter.jsx';
import VueCounter from './VueCounter.vue';
import SvelteCounter from './SvelteCounter.svelte';
---

<ReactCounter client:load />
<VueCounter client:visible />
<SvelteCounter client:idle />

Utility Libraries

Lodash (2012-Present)

Status: Still widely used

// Before Lodash
var users = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
];

var names = users.map(function(u) { return u.name; });
var sorted = users.sort(function(a, b) { return a.age - b.age; });

// With Lodash
import _ from 'lodash';

const names = _.map(users, 'name');
const sorted = _.sortBy(users, 'age');
const grouped = _.groupBy(users, 'age');
const debounced = _.debounce(handleInput, 300);

// Deep clone
const clone = _.cloneDeep(obj);

// Get nested property safely
const value = _.get(obj, 'a.b.c.d', 'default');

Why still used:

Comprehensive utilities
Battle-tested
Tree-shakeable (lodash-es)
Some functions still not in native JS

Alternatives:

Native JS (for many use cases)
Ramda (functional programming)
Just (smaller, modular)

Moment.js → Day.js / date-fns

Moment.js (2011-2020)

Status: Deprecated (maintenance mode)

// Moment.js
moment().format('YYYY-MM-DD');
moment().add(7, 'days');
moment().subtract(1, 'month');

Why it died:

Mutable API (confusing)
Large bundle size
Not tree-shakeable

Replaced by:

// Day.js (2018) - Moment.js compatible API
import dayjs from 'dayjs';

dayjs().format('YYYY-MM-DD');
dayjs().add(7, 'day');

// date-fns (2016) - Functional, tree-shakeable
import { format, addDays, subMonths } from 'date-fns';

format(new Date(), 'yyyy-MM-dd');
addDays(new Date(), 7);

// Native Temporal (Stage 3, coming soon)
Temporal.Now.plainDateISO().toString(); // '2025-12-04'
Temporal.Now.plainDateISO().add({ days: 7 });

Testing Ecosystem Evolution

Test Runners

QUnit (2008) - jQuery's test framework

Status: Dead for new projects

When it became legacy: ~2014-2015

What replaced it: Jasmine, Mocha, Jest

QUnit.test('addition', function(assert) {
    assert.equal(1 + 1, 2);
});

Pros of QUnit:

✅ Simple API
✅ No dependencies
✅ Browser-based testing
✅ Good for jQuery projects

Cons of QUnit:

❌ Limited features
❌ No mocking built-in
❌ Tied to jQuery ecosystem
❌ No async/await support (initially)
❌ Basic assertions only
❌ No code coverage

Current status: Only for legacy jQuery projects

Jasmine (2010)

Status: Legacy/Declining

When it became legacy: ~2016-2017

Peak usage: 2011-2015

What replaced it: Jest, Mocha

describe('Calculator', function() {
    it('should add numbers', function() {
        expect(add(1, 2)).toBe(3);
    });
});

Pros of Jasmine:

✅ BDD syntax (describe/it)
✅ No dependencies
✅ Built-in assertions
✅ Built-in spies/mocks
✅ Browser and Node.js support
✅ Good documentation

Cons of Jasmine:

❌ Slow test execution
❌ No snapshot testing
❌ No code coverage built-in
❌ No watch mode
❌ Configuration complex
❌ Async testing awkward
❌ No parallel execution
❌ Outdated compared to Jest

Migration path: Jasmine → Jest (easy, similar API)

Current status: Still used in Angular projects (default), but Jest preferred

Mocha (2011) + Chai

Status: Still used but declining

When it started declining: ~2017-2018

Peak usage: 2013-2017

What's replacing it: Jest, Vitest

const { expect } = require('chai');

describe('Calculator', () => {
    it('should add numbers', () => {
        expect(add(1, 2)).to.equal(3);
    });
});

Pros of Mocha:

✅ Flexible (bring your own assertion library)
✅ Good async support
✅ Extensible (many plugins)
✅ Works in browser and Node.js
✅ Mature and stable
✅ Good documentation

Cons of Mocha:

❌ Requires separate assertion library (Chai)
❌ Requires separate mocking library (Sinon)
❌ No snapshot testing
❌ No code coverage built-in
❌ Configuration needed
❌ Slower than Jest
❌ No watch mode built-in
❌ More setup required

Migration path: Mocha → Jest or Vitest

Current status (2025):

Still maintained
Used in some legacy projects
Not recommended for new projects
Jest/Vitest better alternatives

Jest (2014, Facebook)

Status: Dominant for React

Problem it solved:

🎯 Mocha/Jasmine required too much setup (test runner + assertion + mocking + coverage)
🎯 No snapshot testing (hard to test React components)
🎯 Slow test runs (no parallelization)
🎯 Mocking was painful (Sinon.js separate library)
🎯 No watch mode (had to rerun manually)

The breakthrough:

✨ Zero config - Works out of the box
✨ All-in-one - Test runner + assertions + mocking + coverage
✨ Snapshot testing - Perfect for React components
✨ Fast - Parallel execution, smart watch mode
✨ Great DX - Interactive, clear error messages

// Before Jest - Mocha + Chai + Sinon + Istanbul
// package.json
"devDependencies": {
    "mocha": "^10.0.0",
    "chai": "^4.3.0",
    "sinon": "^15.0.0",
    "istanbul": "^0.4.5"
}

// test.js
const { expect } = require('chai');
const sinon = require('sinon');

describe('Calculator', () => {
    it('should add', () => {
        expect(add(1, 2)).to.equal(3);
    });

    it('should mock', () => {
        const mock = sinon.stub();
        mock.returns(42);
        expect(mock()).to.equal(42);
    });
});

// Run tests
mocha test.js
// Run coverage
istanbul cover _mocha

// With Jest - Zero config, all-in-one
// package.json
"devDependencies": {
    "jest": "^29.0.0"
}

// test.js
describe('Calculator', () => {
    test('adds numbers', () => {
        expect(add(1, 2)).toBe(3);
    });

    test('mocks functions', () => {
        const mock = jest.fn().mockReturnValue(42);
        expect(mock()).toBe(42);
    });
});

// Run tests with coverage
jest --coverage

// Jest - batteries included
describe('Calculator', () => {
    test('adds numbers', () => {
        expect(add(1, 2)).toBe(3);
    });

    test('mocks functions', () => {
        const mock = jest.fn();
        mock('hello');
        expect(mock).toHaveBeenCalledWith('hello');
    });
});

// Snapshot testing
test('renders correctly', () => {
    const tree = renderer.create(<Component />).toJSON();
    expect(tree).toMatchSnapshot();
});

// Async testing
test('fetches data', async () => {
    const data = await fetchData();
    expect(data).toEqual({ name: 'John' });
});

Pros of Jest:

✅ Zero config (works out of the box)
✅ Fast (parallel execution)
✅ Built-in mocking (jest.fn(), jest.mock())
✅ Snapshot testing (unique feature)
✅ Great error messages
✅ Watch mode (interactive)
✅ Code coverage built-in
✅ Works with React (React Testing Library)
✅ Large community
✅ Facebook backing
✅ Great documentation
✅ Timer mocking (jest.useFakeTimers())

Cons of Jest:

❌ Slow startup (especially large projects)
❌ ESM support problematic (until recently)
❌ Heavy (large dependency)
❌ Can be slow on large codebases
❌ Snapshot tests can be overused
❌ Mocking can be confusing
❌ Global namespace pollution
❌ Configuration can get complex

When to use Jest (2025):

✅ React projects (standard)
✅ Need snapshot testing
✅ Want zero config
✅ Large community support needed

What's replacing Jest: Vitest (for Vite projects)

Current status (2025):

Still dominant (40% market share)
Standard for React
Being challenged by Vitest
Still recommended for most projects

Vitest (2021)

Status: Rising fast (replacing Jest in Vite projects)

Created by: Vite team (Anthony Fu)

Problem it solved:

🎯 Jest was slow with Vite (different module systems)
🎯 Jest's ESM support was problematic
🎯 Vite config and Jest config were separate (duplication)
🎯 Jest startup was slow (especially on large projects)
🎯 Wanted same speed as Vite dev server for tests

The breakthrough:

✨ Uses Vite - Same config, same transforms, same plugins
✨ Extremely fast - Instant startup, fast execution
✨ Jest-compatible API - Easy migration from Jest
✨ Native ESM - No transformation needed
✨ HMR for tests - Tests rerun instantly on change

// Jest with Vite - Slow, separate config
// vite.config.js
export default {
    plugins: [react()],
    // Vite config
};

// jest.config.js
export default {
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
    },
    // Duplicate config!
};

// Slow startup (5-10 seconds)
npm run test

// Vitest - Fast, shared config
// vite.config.js
export default {
    plugins: [react()],
    test: {
        // Test config in same file!
    }
};

// Instant startup (200ms)
npm run test

import { describe, test, expect } from 'vitest';

describe('Calculator', () => {
    test('adds numbers', () => {
        expect(add(1, 2)).toBe(3);
    });
});

Pros of Vitest:

✅ Extremely fast (uses Vite)
✅ Jest-compatible API (easy migration)
✅ Native ESM support
✅ Vite config reuse (no separate config)
✅ Fast HMR for tests
✅ TypeScript support out of the box
✅ Component testing built-in
✅ Watch mode (instant)
✅ Snapshot testing
✅ Code coverage (c8/istanbul)
✅ Multi-threading
✅ Better error messages than Jest

Cons of Vitest:

❌ Newer (less mature than Jest)
❌ Smaller community
❌ Requires Vite (or Vite config)
❌ Some Jest features missing
❌ Less Stack Overflow answers
❌ Fewer plugins

When to use Vitest (2025):

✅ Using Vite (obvious choice)
✅ New projects
✅ Want speed
✅ TypeScript projects
✅ Vue/Svelte/Solid projects

Migration from Jest:

Very easy (API compatible)
Change imports
Update config
Most tests work as-is

Current status (2025):

Rapidly growing (20% market share)
Standard for Vite projects
Recommended for new projects
Will likely overtake Jest

Bun Test (2023)

Status: New, very fast, experimental

import { test, expect } from 'bun:test';

test('addition', () => {
    expect(1 + 1).toBe(2);
});

Pros of Bun Test:

✅ Extremely fast (fastest test runner)
✅ Built into Bun (no install)
✅ Jest-compatible API
✅ TypeScript native
✅ Snapshot testing
✅ Watch mode
✅ Mocking built-in
✅ Zero config

Cons of Bun Test:

❌ Very new (immature)
❌ Requires Bun runtime
❌ Small ecosystem
❌ Missing some Jest features
❌ Not production-ready yet
❌ Limited documentation
❌ Bugs and edge cases

When to use Bun Test (2025):

✅ Already using Bun
✅ Experimental projects
✅ Want maximum speed
❌ NOT for production yet

Current status (2025):

Experimental
Very promising
Wait for more maturity
Good for side projects

End-to-End Testing

Selenium (2004)

Status: Legacy but still used (especially enterprise)

When it became legacy: ~2017-2018

Peak usage: 2008-2016

What's replacing it: Cypress, Playwright

const { Builder, By } = require('selenium-webdriver');

const driver = await new Builder().forBrowser('chrome').build();
await driver.get('http://localhost:3000');
await driver.findElement(By.id('username')).sendKeys('john');
await driver.findElement(By.id('submit')).click();

Pros of Selenium:

✅ Multi-browser support (all browsers)
✅ Multi-language (Java, Python, C#, JS)
✅ Mature and stable
✅ Large community
✅ Works with mobile (Appium)
✅ Grid support (parallel testing)
✅ Industry standard (for years)

Cons of Selenium:

❌ Slow and flaky
❌ Complex setup
❌ No automatic waiting (manual waits needed)
❌ Poor error messages
❌ Verbose API
❌ No time-travel debugging
❌ No automatic screenshots/videos
❌ WebDriver protocol overhead
❌ Hard to debug
❌ Outdated compared to modern tools

When to use Selenium (2025):

✅ Legacy projects already using it
✅ Need Java/Python/C# (not JavaScript)
✅ Enterprise with existing Selenium Grid
❌ NOT recommended for new JavaScript projects

Current status (2025):

Still maintained
Used in enterprise (legacy)
Being replaced by Playwright/Cypress
Not recommended for new projects

Protractor (2013, Angular)

Status: Dead (officially deprecated 2021, end of life 2022)

When it became legacy: 2020-2021

What replaced it:

Cypress (recommended by Angular team)
Playwright
WebdriverIO

Pros of Protractor:

✅ Built for Angular (automatic waiting)
✅ Angular-specific locators
✅ Good for Angular apps

Cons of Protractor:

❌ Only good for Angular
❌ Built on Selenium (slow)
❌ Flaky tests
❌ Complex configuration
❌ Deprecated (no future)

Migration path:

Protractor → Cypress (Angular team recommendation)
Protractor → Playwright

Current status: Dead, migrate immediately

Cypress (2017)

Status: Very popular

describe('Login', () => {
    it('should login successfully', () => {
        cy.visit('/login');
        cy.get('#username').type('john');
        cy.get('#password').type('secret');
        cy.get('#submit').click();
        cy.url().should('include', '/dashboard');
        cy.contains('Welcome, John');
    });
});

// Time travel debugging
// Automatic waiting
// Great DX
// Screenshots/videos

Pros of Cypress:

✅ Amazing developer experience
✅ Time-travel debugging (see every step)
✅ Automatic waiting (no manual waits)
✅ Real-time reloading
✅ Screenshots/videos automatic
✅ Great documentation
✅ Easy to learn
✅ Network stubbing built-in
✅ Great error messages
✅ Interactive test runner
✅ Large community
✅ Component testing

Cons of Cypress:

❌ Runs in browser (architecture limitation)
❌ No multi-tab support
❌ No native events (synthetic events)
❌ Slower than Playwright
❌ Chrome/Edge/Firefox only (no Safari)
❌ Can't test multiple domains easily
❌ Parallel execution requires paid plan
❌ Some limitations due to browser-based architecture

When to use Cypress (2025):

✅ Developer experience priority
✅ Need time-travel debugging
✅ Single-page applications
✅ Don't need Safari testing
✅ Want easy learning curve

Current status (2025):

Still very popular (30% market share)
Great for SPAs
Being challenged by Playwright
Still recommended for many projects

Playwright (2020, Microsoft)

Status: Growing rapidly

import { test, expect } from '@playwright/test';

test('login', async ({ page }) => {
    await page.goto('/login');
    await page.fill('#username', 'john');
    await page.fill('#password', 'secret');
    await page.click('#submit');
    await expect(page).toHaveURL(/dashboard/);
    await expect(page.locator('text=Welcome, John')).toBeVisible();
});

// Multi-browser (Chrome, Firefox, Safari, Edge)
// Parallel execution
// Auto-wait
// Network interception
// Mobile emulation

Pros of Playwright:

✅ Multi-browser (Chrome, Firefox, Safari, Edge)
✅ Faster than Cypress
✅ Parallel execution built-in
✅ Auto-wait (smart waiting)
✅ Network interception
✅ Mobile emulation
✅ Multiple tabs/contexts
✅ Native events (real browser events)
✅ Screenshots/videos/traces
✅ Great for CI/CD
✅ Microsoft backing
✅ Codegen (record tests)
✅ Component testing
✅ API testing built-in
✅ Better architecture than Cypress

Cons of Playwright:

❌ No time-travel debugging (like Cypress)
❌ Steeper learning curve
❌ Less interactive test runner
❌ Smaller community than Cypress
❌ Newer (less mature)
❌ Fewer resources/tutorials

When to use Playwright (2025):

✅ Need Safari testing
✅ Need multi-tab support
✅ Performance critical
✅ CI/CD focused
✅ Need parallel execution
✅ Enterprise projects
✅ New projects (recommended)

Why Playwright is winning:

Faster than Cypress (2-3x)
Better browser support (Safari!)
More powerful API
Better for CI/CD
Microsoft backing (long-term support)
Better architecture (no browser limitations)

Migration from Cypress:

API similar but different
Rewrite tests (no automatic migration)
Worth it for better features

Current status (2025):

Rapidly growing (40% market share)
Industry standard for new projects
Recommended over Cypress for most cases
Will likely become dominant

Puppeteer (2017, Google)

Status: Still used for automation

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

// Headless Chrome automation
// PDF generation
// Scraping
// Not primarily for testing

Pros of Puppeteer:

✅ Chrome DevTools Protocol (powerful)
✅ Great for automation (scraping, PDFs)
✅ Headless Chrome control
✅ Google backing
✅ Good documentation
✅ Fast

Cons of Puppeteer:

❌ Chrome/Chromium only
❌ Not designed for testing (use Playwright)
❌ No multi-browser
❌ Less testing features

When to use Puppeteer (2025):

✅ Web scraping
✅ PDF generation
✅ Screenshots
✅ Browser automation (non-testing)
❌ NOT for E2E testing (use Playwright)

Current status (2025):

Still maintained
Good for automation
Playwright better for testing
Use for scraping/PDFs, not testing

Build Tools & Module Systems

Module Bundlers Evolution

RequireJS (2010) - AMD

Status: Dead

// AMD (Asynchronous Module Definition)
define(['jquery', 'lodash'], function($, _) {
    return {
        doSomething: function() {
            // ...
        }
    };
});

Browserify (2011)

Status: Dead

When it became legacy: ~2015-2016

Peak usage: 2012-2015

What replaced it: Webpack, Rollup

Problem it solved:

🎯 Node.js had require() for modules, browsers didn't
🎯 Wanted to use npm packages in the browser
🎯 No standard module system for browsers (before ES6 modules)
🎯 Had to manually include <script> tags in order

// Before Browserify - Manual script tags in HTML
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="app.js"></script>
// Order matters! Dependencies must load first

// With Browserify - Use Node.js style require()
const $ = require('jquery');
const _ = require('lodash');

// Build
browserify app.js -o bundle.js
// Creates single bundle with all dependencies

Pros of Browserify:

✅ First to bring Node.js modules to browser
✅ Simple concept
✅ npm packages in browser
✅ Unix philosophy (do one thing)
✅ Streaming

Cons of Browserify:

❌ No code splitting
❌ No hot module replacement
❌ Slower than Webpack
❌ Limited features
❌ No tree shaking
❌ No asset handling (CSS, images)
❌ Webpack more powerful

Current status: Dead, use Webpack/Vite/Rollup

Webpack (2012-Present)

Status: Still dominant but challenged

Problem it solved:

🎯 Browserify only handled JavaScript, not CSS/images/fonts
🎯 No code splitting (one giant bundle = slow loading)
🎯 No Hot Module Replacement (had to refresh entire page)
🎯 Complex apps needed asset pipeline (CSS, images, fonts, etc.)
🎯 Needed build optimizations (minification, tree shaking)

Evolution:

// Webpack 1 (2014)
module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader' }
        ]
    }
};

// Webpack 2 (2017) - Tree shaking
module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader' }
        ]
    }
};

// Webpack 4 (2018) - Zero config
// No config needed for simple cases
module.exports = {
    mode: 'production', // or 'development'
    entry: './src/index.js'
};

// Webpack 5 (2020) - Module Federation
module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1',
            remotes: {
                app2: 'app2@http://localhost:3002/remoteEntry.js'
            }
        })
    ]
};

// Code splitting
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
    // Use lodash
});

Pros of Webpack:

✅ Powerful plugin system (thousands of plugins)
✅ Code splitting (dynamic imports)
✅ Hot Module Replacement (HMR)
✅ Handles everything (CSS, images, fonts, etc.)
✅ Large ecosystem
✅ Tree shaking
✅ Production optimizations
✅ Module Federation (micro-frontends)
✅ Mature and battle-tested
✅ Works with any framework
✅ Great for complex projects

Cons of Webpack:

❌ Slow builds (especially large projects)
❌ Complex configuration (webpack.config.js hell)
❌ Steep learning curve
❌ Slow HMR (compared to Vite)
❌ Large config files
❌ Hard to debug
❌ Newer tools much faster

When to use Webpack (2025):

✅ Legacy projects already using it
✅ Need Module Federation
✅ Complex build requirements
✅ Enterprise projects (proven at scale)
❌ NOT recommended for new projects (use Vite)

What's replacing Webpack:

Vite (most new projects)
Turbopack (Next.js)
esbuild (some projects)

Current status (2025):

Still widely used (50% of projects)
Webpack 5 stable
Being replaced by Vite in new projects
Still good for complex needs
Not recommended for new projects unless specific needs

Rollup (2015)

Status: Popular for libraries

Problem it solved:

🎯 Webpack bundles were too large for libraries
🎯 Webpack's tree-shaking wasn't good enough
🎯 Libraries needed multiple output formats (ESM, CJS, UMD)
🎯 Webpack added too much runtime code (overhead)
🎯 ES6 modules needed a bundler that understood them natively

// rollup.config.js
export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'esm' // or 'cjs', 'umd', 'iife'
    },
    plugins: [
        resolve(),
        commonjs(),
        babel()
    ]
};

// Better tree-shaking than Webpack
// Smaller bundles
// ES modules native

Pros of Rollup:

✅ Better tree-shaking than Webpack
✅ Smaller bundles
✅ ES modules native
✅ Simpler config than Webpack
✅ Great for libraries
✅ Multiple output formats (ESM, CJS, UMD)
✅ Fast builds

Cons of Rollup:

❌ Not great for applications (use Vite)
❌ Less features than Webpack
❌ Smaller plugin ecosystem
❌ No HMR (use Vite for that)
❌ Code splitting less mature

When to use Rollup (2025):

✅ Building libraries (npm packages)
✅ Need multiple output formats
✅ Tree-shaking critical
❌ NOT for applications (use Vite)

Use case: Libraries (React, Vue, Svelte all use Rollup)

Current status (2025):

Standard for library builds
Used by Vite for production builds
Not for applications directly

Parcel (2017)

Status: Niche/Declining

When it started declining: ~2020-2021

What replaced it: Vite

Problem it solved:

🎯 Webpack configuration was too complex (webpack.config.js hell)
🎯 Beginners struggled with build tools
🎯 Wanted "just work" experience (zero config)
🎯 Setting up Webpack + Babel + loaders took hours
🎯 Needed faster builds (multi-core processing)

# Before Parcel - Webpack config nightmare
// webpack.config.js (100+ lines)
// .babelrc
// package.json with 20+ dev dependencies
// Hours of setup

# With Parcel - Zero config
parcel index.html

# That's it! Automatically handles:
# - JavaScript (Babel)
# - TypeScript
# - CSS/SCSS
# - Images
# - Hot reload

Pros of Parcel:

✅ Zero config (truly zero)
✅ Fast (multi-core)
✅ Handles everything automatically
✅ Great for beginners
✅ Built-in dev server
✅ HMR out of the box

Cons of Parcel:

❌ Less control than Webpack
❌ Smaller ecosystem
❌ Some edge cases buggy
❌ Slower than Vite
❌ Less mature
❌ Configuration limited when needed

Why it didn't win:

Webpack too entrenched (at the time)
Less control for complex projects
Vite came along (faster, better)

Current status (2025):

Parcel 2 released but not popular
Vite won the "fast bundler" race
Not recommended (use Vite instead)

Vite (2020)

Status: Rising rapidly

Problem it solved:

🎯 Webpack dev server was SLOW (30+ seconds to start on large projects)
🎯 Hot Module Replacement was slow (seconds to see changes)
🎯 Rebuilding entire bundle on every change was wasteful
🎯 Browsers now support ES modules natively - why bundle in dev?
🎯 Developer experience was painful on large projects

The breakthrough:

✨ Dev: Use native ES modules (no bundling!) = instant start
✨ Prod: Use Rollup (optimized bundles)
✨ Pre-bundle dependencies with esbuild (100x faster than Webpack)

// Before Vite - Webpack dev server
npm run dev
// Wait 30-60 seconds...
// Make change
// Wait 3-5 seconds for HMR...

// With Vite
npm run dev
// Server starts in 200ms!
// Make change
// See update in 50ms!

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()]
});

// Dev server
vite

// Build
vite build

Pros of Vite:

✅ Extremely fast dev server (instant start)
✅ Lightning-fast HMR (instant updates)
✅ Native ESM in development
✅ Rollup for production (optimized)
✅ Simple configuration
✅ Great developer experience
✅ Plugin ecosystem growing
✅ TypeScript support
✅ CSS/Asset handling
✅ Framework agnostic
✅ Pre-bundling (esbuild)

Cons of Vite:

❌ Newer (less mature than Webpack)
❌ Some edge cases with legacy code
❌ Smaller plugin ecosystem than Webpack
❌ Dev/prod differences (ESM vs bundled)
❌ Some libraries don't work well with ESM

Why Vite is winning:

10-100x faster dev server than Webpack
Instant HMR (no rebuild)
Better developer experience
Simple configuration
Modern approach (ESM-first)

How it works:

// Development: Native ESM (no bundling!)
import { createApp } from 'vue';
// Browser loads this directly via HTTP/2

// Production: Rollup bundling
// Optimized, tree-shaken, code-split

When to use Vite (2025):

✅ New projects (highly recommended)
✅ Any framework (React, Vue, Svelte, etc.)
✅ Want fast development
✅ Modern browsers target
✅ TypeScript projects

Adoption:

Vue 3 (official build tool)
Svelte (SvelteKit)
Solid.js (SolidStart)
Qwik
React (growing adoption)
Recommended by most frameworks

Current status (2025):

Rapidly growing (30% market share)
Standard for new projects
Recommended over Webpack
Will likely become dominant

esbuild (2020)

Status: Used as build tool in other tools (not standalone)

Creator: Evan Wallace (Figma)

// Extremely fast (written in Go)
require('esbuild').build({
    entryPoints: ['app.js'],
    bundle: true,
    outfile: 'out.js'
});

Pros of esbuild:

✅ Extremely fast (10-100x faster than Webpack)
✅ Written in Go (native performance)
✅ TypeScript/JSX built-in
✅ Tree shaking
✅ Minification
✅ Source maps
✅ Simple API

Cons of esbuild:

❌ Limited features (by design)
❌ No HMR
❌ No code splitting (initially)
❌ Not a complete build tool
❌ Limited plugin ecosystem
❌ Not meant for direct use

When to use esbuild (2025):

✅ As part of other tools (Vite uses it)
✅ Simple bundling needs
✅ Speed critical
❌ NOT for full applications (use Vite)

How it's used:

Vite uses esbuild for pre-bundling dependencies
Some projects use it directly for simple builds
Building blocks for other tools

Current status (2025):

Widely used indirectly (via Vite, etc.)
Not meant as standalone build tool
Proven technology

Turbopack (2022, Vercel)

Status: In development (beta)

Creator: Vercel (Tobias Koppers, creator of Webpack)

// Webpack successor (written in Rust)
// Used in Next.js 13+
// next dev --turbo

Pros of Turbopack:

✅ Extremely fast (written in Rust)
✅ Incremental computation (caches everything)
✅ Webpack successor (by same author)
✅ Designed for scale
✅ Vercel backing

Cons of Turbopack:

❌ Still experimental (not production-ready)
❌ Only for Next.js (currently)
❌ Not standalone yet
❌ Limited documentation
❌ Unproven at scale

When to use Turbopack (2025):

✅ Next.js 13+ (experimental)
❌ NOT for production yet
❌ NOT standalone

Current status (2025):

Beta in Next.js
Promising but not ready
Wait for stable release
Future looks bright

Bun (2023)

Status: All-in-one tool

# Bundler built-in
bun build ./index.tsx --outdir ./dist

# Extremely fast
# No configuration needed

Transpilers

Babel (2014-Present)

Status: Still essential

Problem it solved:

🎯 ES6 released but browsers didn't support it (2015)
🎯 Wanted to use new JavaScript features (arrow functions, classes, etc.)
🎯 Had to wait years for browser support
🎯 Different browsers supported different features
🎯 JSX needed transformation (React)

The breakthrough:

✨ Write modern JavaScript, run anywhere - Transpiles ES6+ to ES5
✨ Plugin system - Transform any syntax
✨ Polyfills - Add missing features (Promise, Array.from, etc.)
✨ JSX support - Transform React JSX to JavaScript
✨ Target specific browsers - Only transpile what's needed

// 2015 - Problem: Browsers don't support ES6
// Write this (ES6)
const add = (a, b) => a + b;
class Person {
    constructor(name) {
        this.name = name;
    }
}

// But browsers only understand this (ES5)
var add = function(a, b) {
    return a + b;
};
function Person(name) {
    this.name = name;
}

// Babel solves this - Write ES6, Babel converts to ES5
// You write modern code, users get compatible code

Evolution:

// 2015: Babel 6 - Modular
{
    "presets": ["es2015", "react"],
    "plugins": ["transform-class-properties"]
}

// 2018: Babel 7 - @babel/
{
    "presets": [
        ["@babel/preset-env", {
            "targets": "> 0.25%, not dead"
        }],
        "@babel/preset-react"
    ]
}

// What it does
// Input (ES6+)
const add = (a, b) => a + b;
class Person {
    name = "John";
}

// Output (ES5)
var add = function(a, b) {
    return a + b;
};
var Person = function Person() {
    this.name = "John";
};

Why still needed:

Browser compatibility
JSX transformation
TypeScript (alternative to tsc)
Experimental features

SWC (2020)

Status: Growing (Rust-based, faster)

// 20x faster than Babel
// Used by Next.js, Parcel, Deno

// .swcrc
{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true
        },
        "transform": {
            "react": {
                "runtime": "automatic"
            }
        }
    }
}

Task Runners

Task Runners: Grunt (2012) → Gulp (2013) → npm scripts

Grunt (2012)

Status: Dead

When it became legacy: ~2015-2016

What replaced it: Gulp, then npm scripts

Problem it solved:

🎯 No standard way to automate build tasks (minify, concat, compile)
🎯 Had to manually run multiple commands
🎯 Build scripts were bash/shell scripts (not cross-platform)
🎯 Needed task automation in JavaScript

// Before Grunt - Manual commands
uglifyjs app.js -o app.min.js
sass styles.scss styles.css
imagemin images/* -o dist/images
// Run each command manually!

// With Grunt - Automated tasks
module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            build: {
                src: 'app.js',
                dest: 'app.min.js'
            }
        },
        sass: {
            dist: {
                files: {
                    'styles.css': 'styles.scss'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.registerTask('default', ['uglify', 'sass']);
};

// Run all tasks
grunt

Pros of Grunt:

✅ First popular task runner
✅ Large plugin ecosystem
✅ Configuration-based (declarative)
✅ Easy to understand

Cons of Grunt:

❌ Slow (file I/O heavy)
❌ Verbose configuration
❌ Temporary files everywhere
❌ Not streaming
❌ Complex for simple tasks

Current status: Dead, don't use

Gulp (2013)

Status: Legacy/Declining

When it became legacy: ~2017-2018

What replaced it: npm scripts, build tools (Webpack, Vite)

Problem it solved:

🎯 Grunt was too slow (wrote temp files to disk constantly)
🎯 Grunt configuration was verbose and hard to read
🎯 Wanted streaming (in-memory processing)
🎯 Needed code over configuration (more flexible)

// Grunt - Configuration-based (slow, verbose)
grunt.initConfig({
    uglify: {
        build: {
            src: 'app.js',
            dest: 'app.min.js'
        }
    }
});
// Writes temp files to disk

// Gulp - Code-based (fast, streaming)
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');

gulp.task('scripts', function() {
    return gulp.src('src/**/*.js')
        .pipe(uglify())           // In-memory streaming
        .pipe(gulp.dest('dist'));
});

gulp.task('styles', function() {
    return gulp.src('src/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.parallel('scripts', 'styles'));

Pros of Gulp:

✅ Streaming (faster than Grunt)
✅ Code over configuration
✅ Simpler than Grunt
✅ Good plugin ecosystem
✅ Flexible

Cons of Gulp:

❌ Another abstraction layer
❌ npm scripts can do most things
❌ Build tools handle bundling better
❌ Maintenance overhead
❌ Less relevant with modern tools

Current status: Still used in some legacy projects, not recommended

npm scripts (2010-Present)

Status: Standard

What replaced: Grunt, Gulp

// package.json
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "test": "vitest",
        "lint": "eslint src",
        "format": "prettier --write src",
        "preview": "vite preview"
    }
}

Pros of npm scripts:

✅ No extra dependencies
✅ Simple and direct
✅ Standard across projects
✅ Easy to understand
✅ No abstraction layer
✅ Works with any tool

Cons of npm scripts:

❌ Limited for complex tasks
❌ Cross-platform issues (Windows vs Unix)
❌ No streaming
❌ Can get messy for complex workflows

When to use (2025):

✅ Always (standard approach)
✅ Simple task running
✅ Calling build tools

Modern approach:

npm/pnpm/yarn scripts for task running
Build tools (Vite, Webpack) for bundling
No need for Grunt/Gulp

Package Management

npm (2010-Present)

Status: Default, still dominant

Problem it solved:

🎯 No standard way to share JavaScript libraries
🎯 Had to manually download and include libraries
🎯 No dependency management (had to track versions manually)
🎯 No way to publish/discover packages
🎯 Dependency hell (conflicting versions)

The breakthrough:

✨ Central registry - One place for all packages (npmjs.com)
✨ Automatic dependencies - Install package + all its dependencies
✨ Version management - Semantic versioning (^, ~, exact)
✨ Scripts - Run tasks (npm run build, npm test)
✨ Largest ecosystem - 2+ million packages

// Before npm - Manual download
// 1. Go to jQuery website
// 2. Download jquery.min.js
// 3. Copy to project
// 4. Add <script src="jquery.min.js"></script>
// 5. Repeat for every library
// 6. Track versions manually
// 7. Update manually

// With npm - Automatic
npm install jquery
// Downloads jquery + all dependencies
// Tracks versions in package.json
// Updates with npm update

# Evolution
npm install express # 2010

npm install --save express # 2012-2016

npm install express # 2017+ (--save default)

npm ci # 2018 (clean install for CI)

# package.json
{
    "dependencies": {
        "express": "^4.18.0"
    },
    "devDependencies": {
        "typescript": "^5.0.0"
    }
}

# package-lock.json (2016)
# Ensures consistent installs

Yarn (2016)

Status: Still popular

Problem it solved:

🎯 npm was slow (sequential installs)
🎯 npm was non-deterministic (different installs could differ)
🎯 No offline mode
🎯 Security concerns (no checksums)
🎯 Poor monorepo support

The breakthrough:

✨ Parallel installs - Much faster than npm
✨ Lockfile - Deterministic installs (yarn.lock)
✨ Offline cache - Install without internet
✨ Workspaces - Better monorepo support
✨ Security - Checksums for packages

# npm (2016) - Slow
npm install
# Takes 2-3 minutes, sequential

# Yarn (2016) - Fast
yarn install
# Takes 30 seconds, parallel!

# Yarn 1 (2016) - Faster than npm
yarn add express

# Yarn 2/3 (Berry) (2020) - Plug'n'Play
yarn set version berry

# .yarnrc.yml
nodeLinker: pnp # No node_modules!

# Workspaces
{
    "workspaces": ["packages/*"]
}

Why Yarn:

Faster (initially)
Workspaces (monorepos)
Offline mode
Deterministic

pnpm (2017)

Status: Growing rapidly

# Efficient disk usage (hard links)
pnpm install express

# Strict node_modules structure
# Prevents phantom dependencies

# Workspaces
{
    "pnpm": {
        "workspaces": ["packages/*"]
    }
}

Why pnpm is winning:

Saves disk space (shared dependencies)
Faster than npm
Strict (catches bugs)
Great for monorepos

Disk usage comparison:

npm: 1 GB for 3 projects
Yarn: 1 GB for 3 projects
pnpm: 350 MB for 3 projects

Bun (2023)

Status: Fastest

# Extremely fast
bun install

# Compatible with npm
# 10-20x faster

Current Landscape (2025)

Frontend Frameworks

Market Share (approximate):

React (40%) - Still dominant
- Huge ecosystem
- Job market leader
- Meta backing
- Next.js standard
Vue (20%) - Strong second
- Easier learning curve
- Great documentation
- Popular in Asia
- Nuxt.js mature
Angular (15%) - Enterprise
- TypeScript native
- Complete framework
- Enterprise adoption
- Google backing
Svelte (10%) - Rising
- Best DX
- Smallest bundles
- SvelteKit mature
- Growing fast
Others (15%)
- Solid.js (performance)
- Qwik (resumability)
- Preact (React alternative)
- Alpine.js (lightweight)

Meta-Frameworks (Recommended)

Don't use frameworks alone anymore!

React → Next.js or Remix
Vue → Nuxt.js
Svelte → SvelteKit
Solid → SolidStart
Angular → Analog (new)

Why meta-frameworks:

SSR/SSG out of the box
Routing
API routes
Optimizations
Better DX

State Management (2025)

React:

TanStack Query - Server state
Zustand - Client state (simple)
Jotai - Atomic state
Redux Toolkit - Complex apps
Context + Hooks - Simple apps

Vue:

Pinia - Official (replaced Vuex)

Angular:

NgRx - Redux-like
Signals - Built-in (Angular 16+)

Build Tools (2025)

Recommended:

Vite - Modern projects
Webpack - Legacy/complex needs
Turbopack - Next.js
Bun - All-in-one

For libraries:

Rollup or tsup

Testing (2025)

Unit/Integration:

Vitest - Modern (Vite projects)
Jest - Established (React)
Bun Test - Bun projects

E2E:

Playwright - Best overall
Cypress - Great DX

Package Managers (2025)

Recommended:

pnpm - Best for most
npm - Default, reliable
Yarn - Workspaces
Bun - Speed

TypeScript (2025)

Status: Industry standard

Adoption:

80%+ of new projects
Required for most jobs
All major frameworks support it
Better tooling

Recommendation: Use TypeScript for everything

Runtime (2025)

Server-side:

Node.js - Standard
Bun - Fast alternative
Deno - Secure alternative

Edge:

Cloudflare Workers
Vercel Edge
Deno Deploy

What to Learn in 2025

For Beginners

JavaScript fundamentals
- ES6+ features
- Async/await
- Modules
- Array methods
TypeScript basics
- Types, interfaces
- Generics
- Type inference
React + Next.js
- Hooks
- Server Components
- App Router
Modern tooling
- Vite
- pnpm
- Vitest

For Returning Developers

If you left in 2010 (jQuery era):

Learn:

ES6+ (let/const, arrow functions, classes, modules)
async/await
React or Vue
TypeScript
Next.js or Nuxt.js
Modern build tools (Vite)

If you left in 2015 (Early React):

Learn:

React Hooks (replaced classes)
TypeScript
Server Components (Next.js 13+)
Modern state management (TanStack Query, Zustand)
Vite

If you left in 2020:

Learn:

Server Components
Signals (Angular, Solid)
Bun/Deno
Astro (for content sites)
Playwright (testing)

Key Takeaways

What Died

jQuery - Native APIs good enough
AngularJS 1.x - Replaced by Angular 2+
Backbone.js - Too minimal
Grunt/Gulp - npm scripts enough
Moment.js - Too large, mutable
Bower - npm won
CoffeeScript - ES6+ made it obsolete

What Survived

React - Adapted (Hooks, Server Components)
Vue - Evolved (Composition API)
Angular - Complete rewrite
Node.js - Still standard
npm - Still default
Webpack - Still used (but challenged)
TypeScript - Now essential

What's New and Hot

Vite - Fast builds
pnpm - Efficient packages
Vitest - Fast testing
Playwright - Best E2E
Bun - Fast runtime
Server Components - New paradigm
Signals - Fine-grained reactivity
Astro - Content sites

The Biggest Changes

TypeScript everywhere (2012 → 2025)
Frameworks required (jQuery → React/Vue/Angular)
Build tools essential (None → Webpack → Vite)
Server-side rendering (SPA → SSR/SSG)
Component-based (jQuery → Components)
Type safety (Dynamic → Static typing)
Modern JavaScript (ES5 → ES2025)
Testing standard (Optional → Required)
Monorepos common (Single → Workspaces)
Edge computing (Server → Edge)

Conclusion

JavaScript has evolved from a simple scripting language to a comprehensive ecosystem powering everything from websites to servers to mobile apps to desktop applications.

The journey:

1995-2005: Birth and browser wars
2005-2009: AJAX and jQuery revolution
2009-2015: Node.js and modern frameworks
2015-2020: ES6+ and React dominance
2020-2025: TypeScript, Server Components, and performance

The future:

More server-side rendering
Better performance (Signals, Resumability)
Type safety everywhere
Edge computing
AI integration
WebAssembly integration

For developers returning to JavaScript: The ecosystem is more mature, more powerful, and more complex. But the fundamentals remain: build great user experiences, write maintainable code, and keep learning.

Welcome back to JavaScript! 🎉

Technology Status Summary Table

Frontend Frameworks

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
jQuery	Legacy	2017-2018	Native APIs, React, Vue	❌ Don't use for new projects
Backbone.js	Dead	2015-2016	React, Vue, Angular	❌ Migrate away
Knockout.js	Legacy	2016-2017	Vue, React	❌ Migrate away
AngularJS 1.x	Dead	2016 (EOL 2022)	Angular 2+, React, Vue	❌ Migrate immediately
Ember.js	Declining	2015-2016	React, Vue	⚠️ Only if already using
React	Dominant	-	-	✅ Highly recommended
Vue	Strong	-	-	✅ Highly recommended
Angular 2+	Stable	-	-	✅ Good for enterprise
Svelte	Growing	-	-	✅ Recommended for new projects
Solid.js	Niche	-	-	⚠️ Experimental/side projects
Qwik	Experimental	-	-	⚠️ Not production-ready

Testing Frameworks

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
QUnit	Dead	2014-2015	Jest, Mocha	❌ Don't use
Jasmine	Declining	2016-2017	Jest, Vitest	⚠️ Only for Angular legacy
Mocha	Declining	2017-2018	Jest, Vitest	⚠️ Legacy projects only
Jest	Dominant	-	Vitest (for Vite)	✅ Standard for React
Vitest	Growing	-	-	✅ Recommended for Vite projects
Bun Test	Experimental	-	-	⚠️ Not production-ready

E2E Testing

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Selenium	Legacy	2017-2018	Playwright, Cypress	⚠️ Only for legacy/multi-language
Protractor	Dead	2020 (EOL 2022)	Playwright, Cypress	❌ Migrate immediately
Cypress	Popular	-	Playwright (partially)	✅ Good for SPAs
Playwright	Growing	-	-	✅ Recommended for new projects
Puppeteer	Niche	-	-	✅ For automation, not testing

Build Tools

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Browserify	Dead	2015-2016	Webpack, Rollup	❌ Don't use
Webpack	Mature	-	Vite (for apps)	⚠️ Legacy projects, complex needs
Rollup	Stable	-	-	✅ For libraries only
Parcel	Declining	2020-2021	Vite	❌ Use Vite instead
Vite	Growing	-	-	✅ Highly recommended for apps
esbuild	Tool	-	-	✅ As part of other tools
Turbopack	Experimental	-	-	⚠️ Not production-ready

Task Runners

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Grunt	Dead	2015-2016	Gulp, npm scripts	❌ Don't use
Gulp	Legacy	2017-2018	npm scripts	⚠️ Legacy projects only
npm scripts	Standard	-	-	✅ Always use

Package Managers

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Bower	Dead	2015	npm	❌ Don't use
npm	Standard	-	-	✅ Default, reliable
Yarn	Stable	-	-	✅ Good for monorepos
pnpm	Growing	-	-	✅ Recommended for most
Bun	Experimental	-	-	⚠️ Experimental

Meta-Frameworks

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Next.js	Dominant	-	-	✅ Standard for React
Nuxt.js	Strong	-	-	✅ Standard for Vue
Remix	Growing	-	-	✅ Good alternative to Next.js
SvelteKit	Stable	-	-	✅ Standard for Svelte
Astro	Growing	-	-	✅ Great for content sites

State Management (React)

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Redux	Mature	-	Redux Toolkit	⚠️ Use Redux Toolkit instead
Redux Toolkit	Standard	-	-	✅ For complex state
MobX	Declining	-	Zustand, Jotai	⚠️ Legacy projects only
Context API	Built-in	-	-	✅ For simple state
Zustand	Growing	-	-	✅ Recommended for client state
Jotai	Growing	-	-	✅ Recommended for atomic state
TanStack Query	Standard	-	-	✅ Required for server state

Utility Libraries

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Lodash	Stable	-	Native JS (partial)	✅ Still useful
Underscore	Legacy	2015	Lodash	❌ Use Lodash
Moment.js	Deprecated	2020	date-fns, Day.js	❌ Migrate away
date-fns	Standard	-	-	✅ Recommended
Day.js	Standard	-	-	✅ Recommended (smaller)

Runtimes

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Node.js	Standard	-	-	✅ Industry standard
Deno	Niche	-	-	⚠️ Experimental/specific use cases
Bun	Experimental	-	-	⚠️ Promising but not production-ready

Quick Decision Guide (2025)

Starting a New Project?

Frontend Framework:

React → Use Next.js (most jobs, largest ecosystem)
Vue → Use Nuxt.js (easier learning curve, great DX)
Svelte → Use SvelteKit (best DX, smallest bundles)
Angular → Only if enterprise/large team

Build Tool:

Vite (recommended for 90% of projects)
Webpack (only if specific needs)

Testing:

Unit: Vitest (if using Vite) or Jest (if React)
E2E: Playwright (recommended) or Cypress (if prefer DX)

Package Manager:

pnpm (recommended for most)
npm (default, reliable)
yarn (if need workspaces)

State Management (React):

Server state: TanStack Query (required)
Client state: Zustand (simple) or Jotai (atomic)
Complex: Redux Toolkit

TypeScript:

✅ Always use TypeScript (industry standard)

Migration Priority Guide

Migrate Immediately (Dead/EOL)

AngularJS 1.x → Angular/React/Vue (EOL 2022)
Protractor → Playwright/Cypress (EOL 2022)
Moment.js → date-fns/Day.js (deprecated)
Bower → npm/pnpm (dead)
Grunt → npm scripts (dead)

Migrate Soon (Legacy)

jQuery → React/Vue + Native APIs
Backbone/Knockout → Modern framework
Mocha/Jasmine → Jest/Vitest
Selenium → Playwright (if JavaScript)
Gulp → npm scripts
Webpack → Vite (for new features)

Can Wait (Still Supported)

Redux → Redux Toolkit (same ecosystem)
Jest → Vitest (if moving to Vite)
Cypress → Playwright (both good)
npm → pnpm (both work fine)

Last updated: December 4, 2025 - 30 Years of JavaScript

Coil and Ktor in Kotlin Multiplatform Compose project

Nayden Gochev — Fri, 14 Jun 2024 09:22:50 +0000

Many people are trying but having a hard time adding Coil in a Multiplatform compose project that works on both JVM/Android/iOS and WASM.

Now we have to use Ktor since okHttp is android only for now.
We will be using:

Coil 3.0 https://coil-kt.github.io/coil/
Ktor 3.0 with wasm support

After spending half a day making it work I decide to share it for others.

I will be using the latest versions that support wasm as of 14.06.2024, for later readers and experimenting you might want to upgrade the versions.

1) Libraries and versions

In short first you need to add ktor. In your libs.versions.toml add

[versions]

ktor = "3.0.0-wasm2"

[libraries]
ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
ktor-client-java = { group = "io.ktor", name = "ktor-client-java", version.ref = "ktor" }
ktor-serialization-kotlinx-json = { group = "io.ktor", name = "ktor-serialization-kotlinx-json", version.ref = "ktor" }
ktor-client-serialization = { group = "io.ktor", name = "ktor-client-serialization", version.ref = "ktor" }
ktor-client-content-negotiation = { group = "io.ktor", name = "ktor-client-content-negotiation", version.ref = "ktor" }
ktor-client-json = { group = "io.ktor", name = "ktor-client-json", version.ref = "ktor" }
ktor-client-logging = { group = "io.ktor", name = "ktor-client-logging", version.ref = "ktor" }

now you can also create a bundle since this makes your build.gradle.kts far smaller so just add the bundle as well

[bundles]
ktor-common = ["ktor-client-core", "ktor-client-json", "ktor-client-logging", "ktor-client-serialization", "ktor-client-content-negotiation", "ktor-serialization-kotlinx-json"]

Now you can stop here if you only need to use ktor in your multiplatform compose projects, in such case scroll down to point 2 updating your build script, however if you want to use coil you need 4 extra dependancies

Add this version

[versions]
coilComposeCore = "3.0.0-alpha06"

and this 4 libraries

[libraries]

coil = { module = "io.coil-kt.coil3:coil", version.ref = "coilComposeCore" }
coil-compose-core = { module = "io.coil-kt.coil3:coil-compose-core", version.ref = "coilComposeCore" }
coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coilComposeCore" }
coil-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor", version.ref = "coilComposeCore" }

Now you are good to go to your build.gradle.kts file

updating your build script

Open your build.gradle.kts

add maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental") to your repositories so you can download the ktor wasm version

allprojects {
    repositories {
        google()
        mavenCentral()
maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
    }
}

then in commonMain.dependancies add

commonMain.dependencies {
....
            implementation(libs.bundles.ktor.common)
            implementation(libs.coil.compose.core)
            implementation(libs.coil.compose)
            implementation(libs.coil)
            implementation(libs.coil.network.ktor)

in Android dependancies add

        androidMain.dependencies {
....
  implementation(libs.ktor.client.okhttp)
        }

in iOS/Apple dependancies add

      iosMain.dependencies {
            implementation(libs.ktor.client.darwin)
        }

in JVM dependancies add

 jvmMain.dependencies {
            ....
            implementation(libs.ktor.client.java)
        }

Thats it more or less for dependancies.

NOTE you might need also kotlinx.serialization, if you have it ignroe this and scroll to 3 how to verify coil is working.
so in libs add

[versions]

kotlinx-serialization = "1.6.3"

[libraries]

kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinx-serialization" }

then in your gradle kts file

plugins {
....
    alias(libs.plugins.kotlinx.serialization)
}

and only in

commonMain.dependencies {
....
implementation(libs.kotlinx.serialization.json)

Thats it you are good to use Ktor in your multiplatform compose project or Ktor + Coil .

How to verify coil is working ?

Example how to use coil can be found over the internet but in short in your App.kt in commonMain add this function

fun getAsyncImageLoader(context: PlatformContext)=
    ImageLoader.Builder(context).crossfade(true).logger(DebugLogger()).build()

Then in your App function just add this

@Composable
internal fun App() = AppTheme() {

    setSingletonImageLoaderFactory { context ->
        getAsyncImageLoader(context)
    }
.... rest code

and then you can use Coil.. for example like this :

                            AsyncImage(
                                model = "https://1.bp.blogspot.com/-m4g5Q9WZuLw/YO7FxYJsnsI/AAAAAAAA6fs/nyDiNA_6EHMrPw3qRLJ7FcR1-MoC4rkZwCLcBGAsYHQ/s0/javabeer.jpg",
                                placeholder = painterResource(Res.drawable.ic_cyclone),
                                contentDescription = null,
                                contentScale = ContentScale.Crop,
                                modifier = Modifier.clip(CircleShape)
                            )

I hope this is helpful for someone ! And go enjoy coding with multiplatform compose, I hope I saved you the 4 hours I lost.

P.S. I use kotlin 2.0 and compose 1.6.11 and serialization 1.6.3

Creating UX with TEXT(markdown)

Nayden Gochev — Thu, 31 Mar 2022 18:33:16 +0000

Hello everyone, I would like to present an IDEA or a sideproject ;) I play with for a while now.

Who am I

I am a coder/programmer, not a UX person but very often I have to create some UX screens. Also, I know many of you are creating UX screens quite fast in tools like Figma and etc but it still takes time to create the wireframes, align everything to export it to share it and so on.

I am a HUGE fan of Markdown so I was thinking can we use Markdown to create a mockup ? or wireframes?
So at the end, I created something I call utext spelt as "you text" so you text and get UX.

The POC

Currently, I have only POC the grammar and language and parser are created using https://pegjs.org/ as parser/translator of the code.

You can play with the project see here https://utext.github.io/

if you click on the "?" and wait a bit you will see some examples.
But just to show if you want to display a login form for example it will look like this :


===Login===
username : ___
password: *___
===

Which generates this

if you want to customize the buttons you can for example


===Login===
username : ___
password: *___
===[login][dont login]===

Will give you this:

The idea is to VISUALLY explain what and how it should look and voala you have the wireframe. I even went a step further you can export this as HTML code even and even change the theme if you want to see how it looks with different UI.

All the elements supported are basically everything from HTML + some bootsrap elements. You can check them in the help at the ? in the website.

A Card example will be something like this

---Bootstrap Cards works too---
I am the content [random btn]

you can otuput a table too : 

|header1|header2|
|col1   |col2   |
|col1|col2|
---
*Note should start and end with at least 3 dashes*

Which will generate this :

Any feedback is welcome :) I just made it for fun :) and just want to hear how this looks to you :) any comments ?

A yes most markdown stuff like image or heading and etc just work, go play with it :) bugs are expected ! :)

P.S. Since it is a plain JavaScript (no server side) you can save only in gist in your github account or load a gist... or copy paste :)

Reddit In Comics Style

Nayden Gochev — Thu, 05 Nov 2020 12:22:12 +0000

Hello guys, as a follow up of my previous post almost an year ago https://dev.to/gochev/dev-to-in-web-comics-style-36ca which was to make this amazing webside https://dev.to in comics style (it is a bit outdated btw) I just tried with Reddit.

Again I am no CSS or frontend person I just love comics
And again the REDDIT css will be broken very soon because their selectors and CSS classes looks like this

.Y4MkVr6trrdypfZVUkpIA, ._2vkeRJojnV7cb9pMlPHy7d

So I guess they are server side randomly generated and they change from time to time.

Still I will enjoy it till I can.

I have used an extension Stylus for chrome to apply the additional CSS on top of the reddit.com default css.

The CSS I wrote can be found here
https://gist.github.com/gochev/eccfab4b9038ff460a3eb1f9ca49c5b3

After applying it your reddit will look like this on small view:

Or like this in general

The article read view looks like this :

I just hope reddit can make a new style since the old one is so so ugly. Even linkedin had an updated style since today.. cmon :) it's about time.

I hope someone can improve it and actually make it better.
Right now there are only 2 important bits. One is the general borders change :

    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 30% 2% 162% 3%/9% 96% 2% 99% !important;

And another one for more article or more "boxed" shaped boxes

    border: solid black;
    border-color: black;
    border-width: 3px 3px 5px 5px;

And of course about the titles font:

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

h3{
    font-family: Bangers !important;
    font-size:22px;
}

Well that's it folks I hope you enjoy it.

Learn Flutter & Dart in 2020 or stick with React ?

Nayden Gochev — Fri, 07 Feb 2020 15:52:49 +0000

Hello everyone,

First of all I have to share I am a Java developer I do NOT do frontend (usually) I do not write mobile apps as well, however I was very impressed by the Flutter presentations and the architecture of Flutter in fact first Dart is a lot like Java and second Flutter is a lot like Swing (The defacto standard Java GUI toolkit) works the same, however it works for different desktop operating systems and not mobile operating systems, since it is released in 1998.

So if anyone is not aware Flutter is a GUI toolkit lets say that gives you the possibility to write a cross mobile applications. It also have an alpha version for a Mac applications (and very, very basic version for Windows and Linux) and it has a Web version in beta.

So the promise is .. lets write once runs everywhere, yup we know where this goes.

However flutter renders everything with Skia, a 2D graphics rendering library that is used..well for Chrome. So it should be pretty fast. Also google claim that they support 60 fps for mobile apps which also sounded amazing. Btw I have to share if you run the debug version of your flutter app it is hell of a slow, you have to make a release build to see this 60 fps.

Anyway it will become better, it will become faster, if google doesn't cancel it. however how is it today ?

I am organizer of a Java conference in my country called jPrime (https://jprime.io) we already have a PWA for the agenda but I was like, lets validate flutter by writing an agenda native app.

So what I did:
Opened the documentation saw the widgets, saw some layout objects (there are TONS) and said lets write.

I watched also 3 video tutorials how to create interface and I have to say the Dart was a bit weird but hey... lets give it a try.

I created a new project.

The final app looked like this:

Keep in mind this are the sessions from last year, since the agenda for 2020 is not yet available but hey... I needed some DATA !

Yes you can click it around GestureSupport class was great.

So my first issue I have to share is Dart. Dart is a language from 2012, that no one actually knows. It is like JavaScript but not really, it is like Java but has functions, it has crazy things like "dynamic" and usually a JSON is converted to Map but what this dynamic is and how to convert it to String lets say was not an easy task and I basically used something like: `${thejson[field]}` yup I put it inside a raw string in order to make it a String (facepalm).

The good thing with dart is they have removed the "new" keyword, at some point .. so you can write things like this:

FlatButton(
  child: Row(
    children: <Widget>[
      Text("Wednesday"),
      Text("(27.05.2020)"),
    ],
  ),
  onPressed: () {},
  color: Colors.deepPurple,
  textColor: Colors.white,
  splashColor: Colors.purpleAccent,
),

which basically is the same as

FlatButton(
  child: new Row(
    children: <Widget>[
      new Text("Wednesday"),
      new Text("(27.05.2020)"),
    ],
  ),
  onPressed: () {},
  color: Colors.deepPurple,
  textColor: Colors.white,
  splashColor: Colors.purpleAccent,
),

You get it there is no requirement for "new" which is great, but it is still a bit.. long right ? This is just for a single button :

12 lines for a single button, so 24 for the two (yes I can create a Widget or a funciton/method). The things is that creating of widget is not easy as in React it is kinda same but you have to extend StatelessWidget and it is like a Class Component in React but with a lot more typing.. and if you need to have a State.. a lot more typing. So basically they are creating REACT with ugly Dart Syntax where the only plus is that there is no "new".

Btw this looks a lot like JavaFX Script, or as it was called in the beginning F3 ? Just check this out

Frame {
            title: "Hello World JavaFX"
            width: 200
            height: 50
            content: Label {
                text: "Hello World"
            }
            visible: true
     }

This is from 2007. It is a bit the same isn't it ?

But the things become a LOT more complex .. ones you need to create the agenda card component. You See in Flutter you dont have CSS, you dont have styles, you have decorators, with properties, a lot of properties, everywhere and a lot of wrapping of rows, columns, wraps, expanded(like a flex widget) and other craziness which might be good for someone that doesn't know CSS and don't want to learn it, but hey I also don't know it.. and this is painful. The only plus is there is constant for everything and the IDE helps but not that match, it helps only with wrapping/unwrapping.

So as an example this component:

Simple right ?
Check the dart/flutter code

Container(
            child: Padding(
              padding: const EdgeInsets.all(6.0),
              child: Card(
                elevation: 8.0,
                margin: new EdgeInsets.symmetric(horizontal: 6.0, vertical: 6.0),
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: _talksHallA[i].id != _talksHallB[i].id ? MainAxisAlignment.spaceBetween : MainAxisAlignment.center,
                      children: <Widget>[
                        if (_talksHallA[i].id != _talksHallB[i].id)
                          Favorite(session: _talksHallA[i], toggleFavorite: _toggleSessionFavorite,),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                            border: Border(
                              bottom:
                                  BorderSide(width: 1.0, color: Colors.grey),
                              top: BorderSide(width: 1.0, color: Colors.grey),
                              left: BorderSide(width: 1.0, color: Colors.grey),
                              right:
                                  BorderSide(width: 1.0, color: Colors.grey),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(4.0),
                            child: Text(
                              _talksHallA[i].sessionTime,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600),
                            ),
                          ),
                        ),
                        if (_talksHallA[i].id != _talksHallB[i].id)
                          Favorite(session: _talksHallB[i], toggleFavorite: _toggleSessionFavorite,),
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment:
                          (_talksHallA[i].id != _talksHallB[i].id)
                              ? MainAxisAlignment.spaceBetween
                              : MainAxisAlignment.center,
                      children: <Widget>[
                        if (_talksHallA[i].id !=
                            _talksHallB[i].id) //two columns
                          Expanded(
                            child: GestureDetector(
                              onTap: () async {
                                showDialog(
                                    context: context,
                                    builder: (BuildContext context) {
                                      return _getTalkDetailsWidget(_talksHallA[i]);
                                    });
                              },
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    decoration: BoxDecoration(
                                        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
                                        border: Border(
                                          bottom:
                                          BorderSide(width: 1.0, color: Colors.blue),
                                          top: BorderSide(width: 1.0, color: Colors.blue),
                                          left: BorderSide(width: 1.0, color: Colors.blue),
                                          right:
                                          BorderSide(width: 1.0, color: Colors.blue),
                                        )
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(2.0),
                                      child: Text(
                                        "Hall A",
                                      ),
                                    ),
                                  ),
                                  _getTalksTitleWidget(_talksHallA[i]),
                                  if (_talksHallA[i].lectorName != null &&
                                      _talksHallA[i].lectorName.isNotEmpty)
                                    Text(
                                      _talksHallA[i].lectorName,
                                      style:
                                      TextStyle(fontWeight: FontWeight.w200),
                                    ),
                                  if (_talksHallA[i].coLectorName != null &&
                                      _talksHallA[i].coLectorName.isNotEmpty)
                                    Text(
                                      _talksHallA[i].coLectorName,
                                      style:
                                      TextStyle(fontWeight: FontWeight.w200),
                                    ),

                                ],
                              ),
                            ),
                            flex: 4,
                          ),
                        if (_talksHallA[i].id ==
                            _talksHallB[i].id) //just one title
                          Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(_talksHallA[i].title,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold),),
                            ),

                          ),
                        if (_talksHallA[i].id != _talksHallB[i].id)
                          Expanded(
                            child: GestureDetector(
                              onTap: () async {
                                showDialog(
                                    context: context,
                                    builder: (BuildContext context) {
                                      return _getTalkDetailsWidget(_talksHallB[i]);
                                    });
                              },
                              child: Column(
                                children: <Widget>[
                                  Container(
                                      decoration: BoxDecoration(
                                        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
                                        border: Border(
                                          bottom:
                                          BorderSide(width: 1.0, color: Colors.green),
                                          top: BorderSide(width: 1.0, color: Colors.green),
                                          left: BorderSide(width: 1.0, color: Colors.green),
                                          right:
                                          BorderSide(width: 1.0, color: Colors.green),
                                        )
                                      ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(2.0),
                                      child: Text(
                                        "Hall B",
                                      ),
                                    ),
                                  ),

                                  _getTalksTitleWidget(_talksHallB[i]),
                                  if (_talksHallB[i].lectorName != null &&
                                      _talksHallB[i].lectorName.isNotEmpty)
                                    Text(
                                      _talksHallB[i].lectorName,
                                      style:
                                          TextStyle(fontWeight: FontWeight.w200),
                                    ),
                                  if (_talksHallB[i].coLectorName != null &&
                                      _talksHallB[i].coLectorName.isNotEmpty)
                                    Text(
                                      _talksHallB[i].coLectorName,
                                      style:
                                      TextStyle(fontWeight: FontWeight.w200),
                                    ),
                                ],
                              ),
                            ),
                            flex: 4,
                          ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          )

And this is in a loop, this is crazy, guys, this ... is ... ABSURD.
Also the amount of Parentheses and Brackets is absurd. I even had to install rainbow brackets or something plugin to find which is which it is crazy yes there are some IDE features like showing the closing element next to the ), I know I watched Google IO :D

So the whole app (first tab of the app) was made for about 8 hours.

Lastly I had and I have 0 experience with React Native so I said .. well lets see how this ones goes... I installed Expo... I generated a project.. I found an toolkit having Cards called UI Kitten I added it.

And for 2 hours I created something that looks like this:

The react code is a lot smaller, I used inline styles just to make it look BIGGER however.
The buttons for example the code is just

<View style={{flexDirection: "row", flex: 1, justifyContent:"space-evenly"}}>
            <Button size='small'> Wednesday (27.05.2020)</Button>
            <Button size='small'> Thursday (27.05.2020)</Button>
          </View>

A lot shorter.
The card itself is:

talksHallA.map((talk, i) => {
                return <Card style={{margin: 10}}>
                  <View style={{justifyContent: "space-between", paddingBottom: 10, flexDirection: "row"}}>
                    <Icon name="heart-outline" width={26} height={26} fill='#3366FF'/>
                    <Text style={{
                      borderColor: "grey",
                      borderStyle: "solid",
                      borderWidth: 1,
                      padding: 4,
                      borderRadius: 12
                    }}> {talk.sessionTime} </Text>
                    <Icon name="heart-outline" width={26} height={26} fill='#3366FF'/>
                  </View>
                  <View style={talk.id !== talksHallB[i].id ? twoColumns : oneColumns}>
                    <Text style={talk.id !== talksHallB[i].id ? {flexWrap: "wrap", flex: 0.5, flexDirection: "column"}: ''}>
                      {talk.title} {'\n'}
                      <Text style={{fontWeight: "200", textAlign: "center"}}>{talk.lecturerName}</Text>
                      { talk.coLecturerName ? <Text style={{fontWeight: "200", textAlign: "center"}}>{'\n'}{talk.coLecturerName}</Text> : "" }
                    </Text>
                    <Text style={talk.id !== talksHallB[i].id ? {flexWrap: "wrap", flex: 0.5}: ''}>
                      {talk.id !== talksHallB[i].id ? talksHallB[i].title: ''} {'\n'}
                      <Text style={{fontWeight: "200", textAlign: "center"}}>{talksHallB[i].lecturerName}</Text>
                      { talksHallB[i].coLecturerName ? <Text style={{fontWeight: "200", textAlign: "center"}}>{'\n'}{talksHallB[i].coLecturerName}</Text> : "" }
                    </Text>
                  </View>
                </Card>
              })}

oh yes and I had two variables for two of the styles for 1 column and 2 columns

 let twoColumns = {justifyContent: "space-between", flexDirection: "row"};
  let oneColumns = {justifyContent:"center", flexDirection:"row"};

As an end I will say: Flutter is fun, but.... but ... :) it is not the silver bullet at least now, it sounds promising but I will wait to see Google IO 2020, maybe they will have a proper web support (web without css sounds like an idea) or maybe they will kill it, after all this is google. In any case right now it is like the next JavaFX or Flash... :) and it is good for demo. But thats all.

Infinite trial ? a.k.a. WinRar style trail.

Nayden Gochev — Wed, 15 Jan 2020 13:13:08 +0000

After mentioning https://plugins.jetbrains.com/plugin/13607-merge-request-integration-ce--code-review-for-gitlab
to a college he noticed the nice "trial" text.

Even the rest of the text is a bit funny ;P

jPrime CFP is open

Nayden Gochev — Fri, 13 Dec 2019 11:09:24 +0000

Call for papers

for jPrime conference is now open !

Submit your talk here https://jprime.io/cfp

About jPrime

jPrime is a conference with talks on Java, various languages on the JVM, mobile, web and best practices. Its sixth edition will be held on 27th and 28th May 2020 in Sofia Tech Park.

It's run by the Bulgarian Java User Group (http://jug.bg) and backed by the biggest companies in the country.

jPrime features a combination of great international speakers along with the best presenters from Bulgaria and the Balkans. It is divided in two tracks and provides great opportunities for learning, hacking, networking and fun.

We do not cover the plain tickets but we do cover all the diners, the transportation from and to the airport, the hotel and well basically the whole stay here, we even do an networking event after the conference with some sightseeing in our country.

_Once again the cfp can be accessed here https://jprime.io/cfp _.

Keep in mind we always HAVE streaming, completely FREE and we always have all the recordings available (so it might help you to apply later to some other conferences like DEVOXX or JOKER) some time after the conference at our youtube channel

https://www.youtube.com/user/BulgarianJUG

And you can check some some conference photos in flickr: https://www.flickr.com/photos/132936671@N08/albums/with/72157669160528575

Conferences CFP tag in DEV.TO ?

Nayden Gochev — Fri, 13 Dec 2019 09:28:15 +0000

Hello everyone,

I love DEV.TO and I would ask you what do you think about having a tag for conferences CFP or conferences in general ? @ben any comments ?

I am organizer

together with 5 other Java developers to a Java conference in my country Bulgaria called jPrime - http://jprime.io and since Lanyrd is dead now our cfp is announced only on twitter but maybe here is also the right place? What do you think ?

About jPrime

In our case the conference is not free, but it is organized by the Bulgarian Java User Group and the income is 100% reinvested in next year and other events of the Bulgarian Java User Group in the country.
We do not cover the plain tickets but we do cover all the diners, the transportation from and to the airport, the hotel and well basically the whole stay here, we even do an networking event after the conference with some sightseeing in our country.

So yes I also announce the cfp https://jprime.io/cfp here and now and adding #cfp and #conferences as tags.

Lastly we always HAVE streaming, completely FREE and we always have all the recordings available some time after the conference at our youtube channel

https://www.youtube.com/user/BulgarianJUG

And you can check some conference photos in flickr: https://www.flickr.com/photos/132936671@N08/albums/with/72157669160528575