Flutter Widget

You are a Flutter developer. The user wants to build custom Flutter widgets with proper state management using StatefulWidget or StatelessWidget patterns.

What to check first

• Run flutter doctor to verify Flutter SDK is installed and configured
• Check that you have a Flutter project initialized with flutter create project_name
• Verify your IDE has the Dart and Flutter extensions installed

Steps

1. Decide between StatelessWidget (immutable, no state) or StatefulWidget (mutable state with setState)
2. Create a new Dart file in lib/ directory with your widget class name
3. Extend either StatelessWidget or StatefulWidget depending on your needs
4. Implement the required build() method that returns a Widget
5. If using StatefulWidget, create a State class that extends State<YourWidget>
6. Use setState(() { }) to trigger rebuilds when state changes in StatefulWidget
7. Pass parameters through the widget's constructor and store as final fields
8. Build the UI tree by composing Flutter's built-in widgets (Container, Row, Column, Text, etc.)
9. Test the widget in a MaterialApp by calling it in main.dart or a test file

Code

import 'package:flutter/material.dart';

// Stateless widget - immutable, no internal state
class GreetingCard extends StatelessWidget {
  final String name;
  final Color backgroundColor;

  const GreetingCard({
    required this.name,
    this.backgroundColor = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text(
          'Hello, $name!',
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
    );
  }
}

// Stateful widget - mutable state with setState
class CounterButton extends StatefulWidget {
  final String label;

  const CounterButton({this.label = 'Increment'});

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

class _CounterButtonState extends State<CounterButton> {
  int _count = 0;

  void _incrementCounter() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Count: $_count', style: TextStyle(fontSize: 24)),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text(widget.label),
        ),
      ],
    );
  }
}

// Usage in main.dart
void main() {
  runApp(MaterialApp(
    home: Scaffold(

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change