Flutter Core Concepts

Layout

Flutter UI is constraint-driven. Understanding the parent-to-child layout contract is essential to avoid overflow, jitter, and brittle composition.

Widget Taxonomy

Stateless vs Stateful

class CounterLabel extends StatelessWidget {
  const CounterLabel({super.key, required this.value});
  final int value;

  @override
  Widget build(BuildContext context) => Text('Count: $value');
}

class CounterButton extends StatefulWidget {
  const CounterButton({super.key});

  @override
  State<CounterButton> createState() => _CounterButtonState();
}

Composition

Prefer many focused widgets over giant build methods. Smaller widgets improve readability, testability, and rebuild isolation.

Constraints

Constraint Flow

• Parent sends min/max constraints to child.
• Child chooses size inside constraints.
• Parent positions child.

Responsive Example

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      final isWide = constraints.maxWidth >= 900;
      return isWide
          ? Row(children: [Expanded(child: Sidebar()), Expanded(flex: 3, child: Content())])
          : Column(children: [Header(), Expanded(child: Content())]);
    },
  );
}

Theming

ThemeData

final appTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF1565C0)),
  useMaterial3: true,
  textTheme: Typography.blackMountainView,
);

Tokens

Centralize spacing, color, and typography constants. Avoid scattering hardcoded visual values across feature widgets.

Rendering

Rebuilds

• Use const constructors for static subtrees.
• Extract dynamic nodes to isolate rebuild scope.
• Use profiler timeline before introducing micro-optimizations.

Engineering Notes

Create a shared UI architecture guide: widget naming conventions, layout standards, and theme extension rules.

Common Mistakes

• Using nested Rows/Columns without understanding constraint propagation.
• Hardcoding paddings and colors per screen.
• Building entire pages in one widget class, making refactors risky.

Practice Scope

Build a responsive dashboard screen with reusable widgets, centralized theme tokens, and two adaptive breakpoints.

Back to roadmap: Flutter Roadmap