Build High-Quality Flutter Widgets

This skill covers Flutter widget development - the Flutter framework, Dart language, and modern mobile UI patterns, focused on efficient, maintainable, performant widgets following Flutter best practices. Core principles: composition over inheritance, building custom widgets from existing Flutter primitives:

class CustomCard extends StatelessWidget {
  final String title;
  final Widget child;
  final VoidCallback? onTap;

  const CustomCard({
    Key? key,
    required this.title,
    required this.child,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: Theme.of(context).textTheme.titleLarge,
              ),
              const SizedBox(height: 8),
              child,
            ],
          ),
        ),
      ),
    );
  }
}

and preferring StatelessWidget over StatefulWidget - using StatefulWidget only for mutable state, contrasted via a static profile-header widget and an interactive expandable card that toggles expansion via setState.

Performance optimization covers const constructors (a loading-indicator widget built entirely with const for widget-instance caching) and Builder widgets to limit rebuild scope (a counter example where only the Builder-wrapped text rebuilds on state change, not the surrounding static text). Layout best practices cover responsive design with LayoutBuilder/MediaQuery (a responsive container capping width at 600 on wide screens) and safe-area and padding handling (a container wrapping content in SafeArea and Padding). State-management integration is shown via a Consumer pattern that branches on loading/error/loaded states to render the appropriate child widget.

Custom painting and animation is demonstrated via a progress-ring widget delegating to a CustomPainter subclass that draws an arc proportional to progress using Canvas.drawArc, with shouldRepaint controlling redraw behavior. Testing and debugging covers making widgets testable by avoiding direct dependencies (a testable button accepting a callback and an optional Key) and a matching testWidgets test that pumps the widget, taps it by key, and asserts the callback fired.

Key recommendations: use meaningful widget names describing their purpose, always provide required parameters as named parameters, document with /// doc comments, implement ==/hashCode for value-based widgets, use theme data instead of hardcoded colors and sizes, use Flutter Inspector for layout debugging, profile widget rebuilds with Flutter DevTools, add semantic labels for accessibility, and use RepaintBoundary for frequently-animating widgets.

Use it when building or reviewing Flutter widgets - choosing StatelessWidget versus StatefulWidget, optimizing rebuilds with const/Builder/RepaintBoundary, building responsive layouts, integrating state management via Consumer widgets, or writing custom painters and widget tests. It is not a full app-architecture or state-management-selection guide - it is scoped to the widget layer itself: composition, performance, layout, and testing.

Given a UI requirement, it produces Dart widget code (Stateless or Stateful as appropriate), a custom painter for complex graphics, responsive layout wrappers, and a matching widget test.

Built on Flutter/Dart core widgets (StatelessWidget, StatefulWidget, LayoutBuilder, MediaQuery, CustomPainter, a Provider-style Consumer state-management widget) and the flutter_test widget-testing framework.

Flutter developers writing or optimizing widgets for performance, layout responsiveness, and testability.