Flutter Core

Skill: Flutter Core Mechanics

Purpose

This hub covers how Flutter actually works: BuildContext, widget lifecycle, rendering, keys, layout constraints, and theming. Understanding these fundamentals prevents many "mystery" bugs in UI, performance, and navigation.

When to use

• You see layout overflows, "unbounded constraints", or unpredictable sizes.
• You are confused about why context "doesn't work here".
• Lists, animations, or forms lose state unexpectedly.

When NOT to use

• If your issue is purely data/state architecture, start at state/SKILL.md.
• If your issue is platform APIs (permissions, notifications), start at platform/SKILL.md.

Core concepts

• Widget vs Element vs RenderObject: configuration vs instance vs layout/paint.
• Constraints: parents constrain children; children choose size within constraints.
• Identity: keys control how elements match widgets across rebuilds.

Recommended patterns

• Learn the layout rules before adding "fix" widgets.
• Use keys intentionally, mostly ValueKey.
• Keep heavy work out of build.
• Use ThemeExtensions and tokens to avoid scattered styling.

Minimal example

Routing to the right doc:

- Context timing/scoping -> build_context.md
- Lifecycle/cancellation/dispose -> widget_lifecycle.md
- Layout overflows/unbounded -> layout_constraints.md
- List identity/state loss -> keys.md
- Performance pipeline -> rendering_pipeline.md
- Global theming -> theming_foundations.md

Edge cases

• Nested navigators and overlays can change which context you need.
• Keys can fix state issues but also create new ones if misused.

Common mistakes

• Calling showDialog in initState without a post-frame callback.
• Using Expanded inside unbounded parents (e.g., Column in SingleChildScrollView).

Testing strategy

• Use widget tests to lock in layout behavior and lifecycle interactions.

Related skills

• UI: Responsive layouts
• Performance: Rebuilds
• Navigation: Testing