Day 2 of 5

State Management

Flutter has several state management options. Today you will start with setState for local state, then graduate to Provider — the most common lightweight solution — for shared app state.

bash
flutter pub add provider
dart
// Counter with setState (local)
class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});
  @override State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: Text('$_count', style: const TextStyle(fontSize: 48)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}
dart
// Provider pattern — shared state
// lib/providers/cart_provider.dart
import 'package:flutter/foundation.dart';

class CartProvider extends ChangeNotifier {
  final List<String> _items = [];
  List<String> get items => List.unmodifiable(_items);

  void add(String item) {
    _items.add(item);
    notifyListeners(); // rebuilds listening widgets
  }
}

// main.dart — wrap app
ChangeNotifierProvider(
  create: (_) => CartProvider(),
  child: const MyApp(),
)

// Any widget
final cart = context.watch<CartProvider>();
// or read without rebuilding:
context.read<CartProvider>().add('Apple');

Exercise: Build a Shopping Cart

  1. Create a ProductListScreen with 5 hardcoded products
  2. Add CartProvider with add/remove/total methods
  3. Wrap main.dart with ChangeNotifierProvider
  4. Show cart badge in the AppBar using context.watch
  5. Build a CartScreen that lists added items

Day 2 Summary

Finished this lesson?