0

Appbar is bugged on the released version only when i use a streambuilder inside the badgeContent on a Badge widget. It shows a white overlay on the appbar when i run the released version and it works just fine on the debug version. 

      appBar: AppBar(
      elevation: 0,
      title: showProfileIcon == true
          ? IconButton(
              onPressed: () {
                Navigator.pushNamed(context, ProfilePage.id);
              },
              icon: const Icon(FontAwesomeIcons.solidUser))
          : null,
      actions: showShoppingCartIcon == true
          ? [
              badges.Badge(
                position: badges.BadgePosition.topEnd(top: 0, end: 2),
                showBadge: true,
                ignorePointer: false,
                badgeContent: StreamBuilder(
                    stream: _firestore
                        .collection('ShoppingCart')
                        .doc(_auth.currentUser!.uid)
                        .snapshots(),
                    builder: (context, AsyncSnapshot snapshot) {
                      if (!snapshot.hasData) {
                        return const Text('.');
                      } else {
                        int cartListItemsLength =
                            snapshot.data['Cart'].length;
                        return Positioned(
                          top: 3.0,
                          left: 4.0,
                          child: Text(
                            cartListItemsLength.toString(),
                            style: const TextStyle(color: kPrimaryColor),
                          ),
                        );
                      }
                    }),
                badgeStyle: const badges.BadgeStyle(
                  shape: badges.BadgeShape.circle,
                  badgeColor: kLightGreyColor,
                  elevation: 0,
                ),
                child: IconButton(
                    onPressed: () {
                      Navigator.pushNamed(context, ShoppingCart.id);
                    },
                    icon: const Icon(FontAwesomeIcons.cartShopping)),
              ),
            ]
          : customActions),

This how it looks like on debug version: enter image description here


This is how it looks like on release version: enter image description here


I tried to use a plain Text widget without a streambuilder inside the badgeContent to check whether the problem is from the Badge package or from the streambuilder itself and it just worked fine without the overlay that appears on the release version.



I'm using flutter build apk --release

to build the apk release version.

maghraby
  • 33
  • 5
  • I'm not sure what causes the overlay, but I would suggest making the streambuilder the parent of the badge widget. That way you can make it such that the badge is not yet shown while there is no data (instead of returning Text('.')), unless that is desired behaviour, of course. If that does not fix the problem, I can imagine there is instead a problem with your Firebase configuration. – Wessel May 19 '23 at 12:47
  • @wessel I did that and it gave the same results on the released version. i'm not sure what may i've done wrong with my firebase configuration bc everything else related to firebase works fine in both release and debug version. but i believe it has something to do with building the released apk version cause it just works fine when i test it on the debug version. – maghraby May 19 '23 at 13:28
  • What if you replace the firebase stream with a simple stream such as Stream.periodic(Duration(seconds: 1), (count) => count); ? If the issue still persists with such a basic stream, I would suggest reporting the issue on the Flutter GitHub repo: https://github.com/flutter/flutter/issues – Wessel May 20 '23 at 17:29
  • @Wessel i tried the simple stream and it still persists on display the same overlay, and ive already reported there on flutter github repo and still no one answered yet. – maghraby May 21 '23 at 00:35
  • @Wessel I tried installing the release version on a different device, still giving the same results. – maghraby May 21 '23 at 00:55
  • Hmm, last things I can suggest is switching to the Badge class of the material library: https://api.flutter.dev/flutter/material/Badge-class.html as opposed to the badges package, as the issue might be with the package instead – Wessel May 21 '23 at 10:13
  • @Wessel I'll try that but I'm pretty sure it has nothing to do with the package because i tried to make it only a text widget wrapped inside the stream builder without both of the iconbutton and the badge and it gave the same results. The whole issue is resulted from streambuilder being implemented inside appbar and I don't know any alternatives that will provide the badge with number of shopping cart items instead. – maghraby May 21 '23 at 15:29
  • I don't know what kind of state management you're using, but if its Riverpod you might be able to use a Streamprovider (https://riverpod.dev/docs/providers/stream_provider). Other state management packages might have similar solutions to this. With a Streamprovider, there is no need for a StreamBuilder – Wessel May 22 '23 at 05:37
  • @Wessel I tried to use the normal Badge class of the material library instead of the Badge package one, and surprisingly, it worked so fine on the release version. I'm so confused rn because i've already tried already a lots of different methods that didn't include using the Badge package and it was giving the same overlay outcome. Thank you so much for your help. – maghraby May 23 '23 at 00:56

0 Answers0