How to 'setState' only to the appBar icons instead of 'notifyListeners'

Question

I have an appBar with one icon, this icon has a number which have to be updated after I change somethings in the app. I was using notifyListeners(), but this command is cleaning a list I need so I have to update that number in appbar without notifyListeners().

I tried to call SetState but it doesn't worked.. is there a way to update only the app bar?

In provider which I include more items:

  void setBadge() {
    _number = number;
    notifyListeners(); // this line I dropped out
  }

App bar Icon widget:

class AppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<Cart>(
      child: IconButton(
        icon: Icon(Icons.shopping_bag_outlined),
        onPressed: () async {
          Navigator.of(context).pushNamed(ROUTE_CART);
        },
      ),
      builder: (_, cart, child) {
        return BagBadge(
          child: child,
          value: cart.isEmpty ? '' : cart.number.toString(),
        );
      },
    );
  }
}

BagBadge:

class BagBadge extends StatelessWidget {
  final Widget child;
  final String value;

  BagBadge({
    @required this.child,
    @required this.value,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        child,
        if (value != '')
          Positioned(
            right: value.length < 4 ? 20 : 10,
            top: 30,
            child: Container(
              padding: EdgeInsets.all(value.length < 4 ? 2 : 3),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Theme.of(context).accentColor
              ),
              constraints: BoxConstraints(
                minHeight: 16,
                minWidth: 16,
              ),
              child: Text(
                value,
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
              ),
            ),
          )
      ],
    );
  }
}

I want to update the value of BagBadge without `notifyListeners()` — , Aug 19 '21 at 19:36
The appBar is on the screen... What is the difference? What is the expected result and what is the actual result? — stacktrace2234, Aug 19 '21 at 19:42
Current Result: Not updating the number stacked with the icon in AppBar. Expected Result: Update the number in AppBar — , Aug 19 '21 at 19:43
The AppBarWidget is a stateless widget for you. Modify it to be a stateful widget. — stacktrace2234, Aug 19 '21 at 19:45

score 0 · Accepted Answer · answered Aug 19 '21 at 19:44

Edit: this would work only if you use a stateful widget. With stateless widget the change won't be shown.

You can try something like this:

import 'package:flutter/material.dart';

class AppBarWidget extends StatefulWidget {
  @override
  _AppBarWidgetState createState() => _AppBarWidgetState();
}

class _AppBarWidgetState extends State<AppBarWidget> {
  int _appBarValue = 0;

  @override
  Widget build(BuildContext context) {
    return Consumer<Cart>(
      child: IconButton(
        icon: Icon(Icons.shopping_bag_outlined),
        onPressed: () async {
          Navigator.of(context).pushNamed(ROUTE_CART);
        },
      ),
      builder: (_, cart, child) {
        return BagBadge(
          child: child,
          value: _appBarValue == 0 ? '' : '$appBarValue',
        );
      },
    );
  }
}

  setAppBarValue(int value) {
     setState(() { _appBarValue = value; });
  }
}

Whenever you want to change the value, just call the setAppBarValue() function.

Please edit the question and show us how the code exactly looks like. How the appBar built, how do you try to change the value... — stacktrace2234, Aug 19 '21 at 21:16
Maybe is there a way to use `notifyListeners()` but only for the icon consumer? — , Aug 20 '21 at 14:07

How to 'setState' only to the appBar icons instead of 'notifyListeners'

1 Answers1