Day 02 Day 2

Day 2

Day 2

~1 hour Intermediate Hands-on Precision AI Academy

Today's Objective

By the end of this lesson you will understand state management deeply enough to apply it immediately in real projects.

bash.txt
BASH
flutter pub add provider
dart.txt
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.txt
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