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?
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),
],
)
],
);