0

I have a SliverAppBar with 'snap' and 'floating' both set to true. When the user scrolls down, the AppBar disappears, which is expected. The problem occurs when the user scrolls up and then taps on a button in the AppBar. As you can see from the GIF below, the AppBar snaps shut instead of going to the appropriate page. I noticed that this only happens if the scroll view is still moving when the user taps the button. Does anyone know how I can fix this?

enter image description here

SliverAppBar(
  snap: true,
  floating: true,
  backgroundColor: Colors.white,
  forceElevated: true,
  elevation: 2.0,
  shadowColor: Colors.black26,
  leading: IconButton(
    onPressed: () {
      Navigator.push(
        context,
        PageTransition(
          child: const MyAppBarMenu(),
          type: PageTransitionType.leftToRightJoined,
          duration: const Duration(milliseconds: 400),
          reverseDuration: const Duration(milliseconds: 150),
          curve: Curves.easeOutExpo,
          childCurrent: Container(),
        ),
      );
    },
    icon: ValueListenableBuilder(
        valueListenable: AppData.isLoggedIn,
        builder: (context, bool isLoggedIn, child) {
          return ValueListenableBuilder(
              valueListenable: AppData.userInfo,
              builder: (context, Map<String, dynamic> userInfo, _) {
                if (isLoggedIn) {
                  String imgUrl = '';
                  String points = '';
                  if (userInfo.isNotEmpty) {
                    imgUrl = '${AppData.domain}/VIEWUSER/${userInfo['Photo']}';
                    points = userInfo['points'] ?? '';
                  }
                  return Badge(
                    showBadge: (points != '' && points != '0'),
                    badgeColor: Colors.white,
                    shape: BadgeShape.square,
                    animationDuration: const Duration(seconds: 0),
                    padding: const EdgeInsets.symmetric(vertical: 1.0, horizontal: 2.0),
                    borderRadius: BorderRadius.circular(16.0),
                    position: BadgePosition.bottomEnd(bottom: -2.0, end: -12.0),
                    badgeContent: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 2.0),
                      child: Text(points, style: MyFonts.blackText12bold),
                    ),
                    borderSide: const BorderSide(width: 0.5, color: Colors.black54),
                    child: Builder(builder: (context) {
                      if (userInfo['Photo'] != '') {
                        return ClipOval(
                          child: CachedNetworkImage(
                            httpHeaders: AppData.myHeaders,
                            imageUrl: imgUrl,
                            placeholder: (context, url) => const Icon(Icons.account_circle, color: Colors.grey),
                            errorWidget: (context, url, error) => const Icon(Icons.account_circle, color: Colors.grey),
                          ),
                        );
                      } else {
                        return const Icon(Icons.account_circle, color: Colors.grey);
                      }
                    }),
                  );
                } else {
                  return const Icon(Icons.account_circle, color: Colors.grey);
                }
              });
        }),
    iconSize: 32.0,
  ),
  title: OutlinedButton(
    style: OutlinedButton.styleFrom(
      primary: MyColors.theme,
      backgroundColor: Colors.white,
      side: const BorderSide(color: Colors.grey, width: 1.0),
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(32.0))),
    ),
    onPressed: () {
      Navigator.pushNamed(context, '/search');
    },
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: const [
        Text(
          '搜尋',
          style: TextStyle(color: Colors.grey),
        ),
        Icon(
          Icons.search_rounded,
          color: Colors.grey,
        ),
      ],
    ),
  ),
  actions: [
    Row(
      children: [
        IconButton(
          onPressed: () => Navigator.pushNamed(context, '/news'),
          icon: ValueListenableBuilder(
              valueListenable: AppData.unreadNewsIds,
              builder: (context, Set<String> unreadNewsIds, _) {
                return Badge(
                    showBadge: unreadNewsIds.isNotEmpty,
                    position: BadgePosition.topEnd(top: -4.0, end: -4.0),
                    badgeContent: Text(
                      (unreadNewsIds.length > 9) ? unreadNewsIds.length.toString() : ' ${unreadNewsIds.length.toString()} ',
                      style: MyFonts.whiteText12bold,
                    ),
                    padding: const EdgeInsets.all(2.0),
                    child: const Icon(Icons.notifications_none_rounded, color: Colors.grey));
              }),
          iconSize: 32.0,
        ),
        const MyCartButton(),
        const SizedBox(width: 8.0),
      ],
    )
  ],
);
1
  • Update: making snap = false seems to have fixed it. But it's not ideal. If anyone has a solution while keeping snap = true, please let me know.
    – Eric Su
    Feb 11, 2022 at 7:03

1 Answer 1

1

From the official flutter documentation for sliverAppBar found here you could set the pinned property to true, floating to true, and snap to false.

here's a quick example:

SliverAppBar(
  expandedHeight: 150.0,
  pinned: true,
  snap: false,
  floating: true,
  flexibleSpace: const FlexibleSpaceBar(
    title: Text('Available seats'),
  ),
  actions: <Widget>[
    IconButton(
      icon: const Icon(Icons.add_circle),
      tooltip: 'Add new entry',
      onPressed: () { /* ... */ },
    ),
  ]
)
3
  • Have you tried to minimally reproduce the error, like create a simple screen with just the SliverAppBar , a button and a dummy list to simulate the same behavior ?
    – Tim
    Feb 11, 2022 at 6:54
  • Sorry, deleted my comment from earlier. Setting snap = false made the problem go away. I still want to keep pinned = false to make use of the floating feature. But it won't work with snap = true.
    – Eric Su
    Feb 11, 2022 at 7:01
  • something to note, The property snap can only be set to true if floating is also true. as you can see here api.flutter.dev/flutter/material/SliverAppBar-class.html
    – Tim
    Feb 11, 2022 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.