Diff btw stateless and stateful widget and explain

Overview

StatelessWidget and StatefulWidget are the two fundamental widget types in Flutter. The key difference is that StatefulWidget can change over time (mutable state), while StatelessWidget cannot (immutable).

---

Comparison Table

---

StatelessWidget

Definition

A widget that never changes once built. Immutable configuration.

Structure

dartCopy
class WelcomeScreen extends StatelessWidget {
  final String userName;
  
  const WelcomeScreen({required this.userName});
  
  @override
  Widget build(BuildContext context) {
    return Text('Welcome, $userName!');
  }
}

Characteristics

• Single method: Only build()
• Cannot change: Properties are final
• Lightweight: No State object
• Performance: Efficient for static content

When to Use

• Static text/images
• Layout containers
• Icons and styling
• Content that doesn't change

Example

dartCopy
class ProfileCard extends StatelessWidget {
  final String name;
  final String email;
  final String avatarUrl;
  
  const ProfileCard({
    required this.name,
    required this.email,
    required this.avatarUrl,
  });
  
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          CircleAvatar(backgroundImage: NetworkImage(avatarUrl)),
          Text(name, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          Text(email, style: TextStyle(color: Colors.grey)),
        ],
      ),
    );
  }
}

---

StatefulWidget

Definition

A widget that can change over time. Has mutable state managed by a State object.

Structure

dartCopy
class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0; // Mutable state
  
  void _increment() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_counter'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Characteristics

• Two classes: Widget + State
• Mutable state: Can change via setState()
• Lifecycle methods: initState(), dispose(), etc.
• Heavier: More memory and overhead

When to Use

• Forms and input fields
• Animations
• Data fetching/loading states
• Interactive elements (buttons, checkboxes)
• Anything that changes over time

Example

dartCopy
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';
  bool _isLoading = false;
  
  Future<void> _login() async {
    if (_formKey.currentState!.validate()) {
      setState(() => _isLoading = true);
      
      // Simulate API call
      await Future.delayed(Duration(seconds: 2));
      
      setState(() => _isLoading = false);
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: 'Email'),
            onChanged: (value) => _email = value,
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            onChanged: (value) => _password = value,
          ),
          _isLoading
            ? CircularProgressIndicator()
            : ElevatedButton(
                onPressed: _login,
                child: Text('Login'),
              ),
        ],
      ),
    );
  }
}

---

Key Differences Explained

1. State Management

StatelessWidget:

dartCopy
// Cannot change this value
final String title = 'Hello';

StatefulWidget:

dartCopy
// Can change via setState()
String title = 'Hello';

void updateTitle() {
  setState(() {
    title = 'Goodbye';
  });
}

2. Rebuild Mechanism

StatelessWidget: Rebuilds only when parent rebuilds

StatefulWidget: Rebuilds when:

• Parent rebuilds
• setState() is called
• Dependencies change

3. Memory Footprint

StatelessWidget:

• Single object (widget)
• ~100 bytes

StatefulWidget:

• Two objects (widget + state)
• ~200-300 bytes

---

When to Choose Which

Choose StatelessWidget If:

• ✅ Data is static
• ✅ No user interaction
• ✅ No animations
• ✅ Display-only content
• ✅ Performance is critical

Choose StatefulWidget If:

• ✅ Data changes over time
• ✅ User input/interaction
• ✅ Animations
• ✅ API calls/async operations
• ✅ Form handling

---

Best Practices

Rule of Thumb: Start with StatelessWidget. Convert to StatefulWidget only when needed.

dartCopy
// ✅ Good - Use StatelessWidget for static content
class AppTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('My App');
  }
}

// ❌ Bad - Unnecessary StatefulWidget
class AppTitle extends StatefulWidget { ... }

// ✅ Good - Use const for better performance
class AppTitle extends StatelessWidget {
  const AppTitle();
  
  @override
  Widget build(BuildContext context) {
    return const Text('My App');
  }
}

---

Common Pitfalls

❌ Using StatefulWidget unnecessarily

dartCopy
// Bad - No state changes
class DisplayText extends StatefulWidget { ... }

✅ Use StatelessWidget instead

dartCopy
// Good
class DisplayText extends StatelessWidget { ... }

❌ Forgetting setState()

dartCopy
// Bad - UI won't update
void increment() {
  counter++; // Missing setState()!
}

✅ Always use setState()

dartCopy
// Good
void increment() {
  setState(() {
    counter++;
  });
}

---

Resources

• StatefulWidget Documentation
• StatelessWidget Documentation
• Building Interactive Apps