I’m using SliverAppBar with flexibleSpace:
SliverAppBar(
expandedHeight: 280,
pinned: true,
leadingWidth: 44,
stretch: true,
elevation: 0,
backgroundColor: context.colors.colorClubSectionAppBar,
actions: [
...
],
leading: GestureDetector(
...
),
flexibleSpace: LayoutBuilder(
builder: (context, constraints) {
const maxExtent = 322.0;
final currentExtent = constraints.biggest.height;
_iconScale = currentExtent / maxExtent;
return Stack(
children: [
FlexibleSpaceBar(
centerTitle: true,
collapseMode: CollapseMode.pin,
title: InvisibleExpandedHeader(
child: Text(
widget.section.name,
style: title3SemiBold.copyWith(
color: context.colors.colorTextWhiteFixed,
),
),
),
background: Stack(
fit: StackFit.expand,
alignment: Alignment.bottomCenter,
children: [
CachedNetworkImage(
imageUrl: widget.section.background,
fit: BoxFit.cover,
),
Positioned(
right: 0,
bottom: _iconScale <= 1 ? 80 : 80 * _iconScale,
child: Transform.scale(
scale: _iconScale <= 1 ? 1 : _iconScale,
alignment: Alignment.topRight,
child: CachedNetworkImage(
imageUrl: widget.section.extraIcon,
width: 170,
height: 170,
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Stack(
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
),
child: Container(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 20),
decoration: BoxDecoration(
color: context.colors.colorBase,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(widget.section.name, style: title25Semibold),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Text(
widget.section.description,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: textRegular.copyWith(
color: context.colors.colorTextAccentSecondary,
),
),
),
Divider(
height: 0,
color: context.colors.colorOutlineStrong,
),
...
),
But when I scroll up so that overscroll appears and the AppBar “stretches”, I see an artifact in the form of a strip like in the picture (Android only). For iOS it works fine. I think this occurs due to LayoutBuilder, but not sure. Please tell me the solution