Flutter/Dart - 文本值未正确显示

Question

I am trying to create a shopping cart using provider and display the number of items currently in the cart on my homepage. When I create my cart icon with a text widget overlaid, the value being shown does not reflect the number of items in the cart.

Here is my code:

 class OurShoppingBasketIcon extends StatelessWidget {
  const OurShoppingBasketIcon({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: InkWell(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ShoppingBasketScreen()),
          );
        },
        child: Stack(
          children: <Widget>[
            new Icon(
              Icons.shopping_cart_outlined,
              color: Colors.white,
            ),
            new Positioned(
              right: 0,
              child: new Container(
                padding: EdgeInsets.all(1),
                decoration: new BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(6),
                ),
                constraints: BoxConstraints(
                  minWidth: 12,
                  minHeight: 12,
                ),
                child: Text(
                  context.read<ShoppingBasket>().items.length.toString(),
                  style: new TextStyle(
                    color: Colors.white,
                    fontSize: 8,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

This is where the icon is implemented:

  class OurHomePage extends StatefulWidget {
  @override
  _OurHomePageState createState() => _OurHomePageState();
}

class _OurHomePageState extends State<OurHomePage> {

  @override
  Widget build(BuildContext context) {
    return Consumer<OurUser>(
      builder: (_, user, __) {
        return ChangeNotifierProvider<SignInViewModel>(
          create: (_) => SignInViewModel(context.read),
          builder: (_, child) {
            return Scaffold(
              appBar: AppBar(
                title: Text("My app"),
                actions: [
                  OurShoppingBasketIcon(),
                  IconButton(
                    icon: Icon(
                      Icons.logout,
                      color: Colors.white,
                    ),
                    onPressed: () {
                      context.read<FirebaseAuthService>().signOut();
                    },
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

There are 2 items in the cart as of writing this:

But the icon on the homepage does not change:

Here is my main.dart:

  void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(
    MultiProvider(
      providers: [
        Provider(
          create: (_) => FirebaseAuthService(),
        ),
        StreamProvider<OurUser>(
            create: (context) =>
                context.read<FirebaseAuthService>().onAuthStateChanged),
        ChangeNotifierProvider.value(
          value: ShoppingBasket(),
        ),
      ],
      child: MaterialApp(theme: OurTheme().buildTheme(), home: OurHomePage()),
    ),
  );
}

Answer 1

perhaps if you watch for the value it will be updated dynamically:

 context.watch<ShoppingBasket>().items.length.toString(), //<-- watch instead of read

Answer 2

The OurHomePage needs to be wrapped in the Provider<ShoppingBasket> .

return Provider<ShoppingBasket>(
      create: (context) => ShoppingBasket(),
      child: Consumer<OurUser>(
      builder: (_, user, __) {
        return ChangeNotifierProvider<SignInViewModel>(
          create: (_) => SignInViewModel(context.read),
          builder: (_, child) {
            return Scaffold(
              appBar: AppBar(
                title: Text("My app"),
                actions: [
                  OurShoppingBasketIcon(),
                  IconButton(
                    icon: Icon(
                      Icons.logout,
                      color: Colors.white,
                    ),
                    onPressed: () {
                      context.read<FirebaseAuthService>().signOut();
                    },
                  ),
                ],
              ),
              ),
            );
          },
        );

Answer 3

I forgot to NotifyListeners() in my Change Notifier class:

  class ShoppingBasket extends ChangeNotifier {
  Map<String, SingleBasketItem> _items = {};

  Map<String, SingleBasketItem> get items {
    return {..._items};
  }

  void addItem(String id) {
    _items.putIfAbsent(
      id,
      () => SingleBasketItem(id),
    );
    notifyListeners(); //HERE
  }