ChangeNotifier example

readme.md

ChangeNotifier example

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

class Item {
  Item({required this.name});

  String name;
}

class CartState extends ChangeNotifier {
  final List<Item> _items = [];

  List<Item> get items => _items;

  int get totalPrice => _items.length * 42;

  void add(Item item) {
    _items.add(item);
    notifyListeners();
  }

  void removeAll() {
    _items.clear();
    notifyListeners();
  }
}

class CartStateScope extends InheritedNotifier<CartState> {
  const CartStateScope({
    super.key,
    super.notifier,
    required super.child,
  });

  static CartState of(BuildContext context) {
    final result =
        context.dependOnInheritedWidgetOfExactType<CartStateScope>()?.notifier;
    assert(result != null, 'No CartStateScope found in context');
    return result!;
  }
}

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with ChangeNotifier {
  late CartState cartState;

  @override
  void initState() {
    cartState = CartState()..addListener(notifyListeners);
    super.initState();
  }

  @override
  void dispose() {
    cartState.removeListener(notifyListeners);
    super.dispose();
  }

  void _addAProduct(String name) {
    cartState.add(Item(name: name));
  }

  @override
  Widget build(BuildContext context) {
    return CartStateScope(
      notifier: cartState,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                'Your Last Product:',
              ),
              ProductName(),
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            FloatingActionButton(
              onPressed: () => _addAProduct('Phone'),
              tooltip: 'Add a phone',
              child: const Icon(Icons.phone),
            ),
            FloatingActionButton(
              onPressed: () => _addAProduct('Laptop'),
              tooltip: 'Add a product',
              child: const Icon(Icons.laptop),
            ),
          ],
        ),
      ),
    );
  }
}

class ProductName extends StatelessWidget {
  const ProductName({super.key});

  @override
  Widget build(BuildContext context) {
    return Text(
      CartStateScope.of(context).items.isEmpty
          ? 'Nothing!'
          : CartStateScope.of(context).items.last.name,
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}