I am trying to achieve something similar to this where I have background, circle avatar, and title, and when scrolling up the avatar disappears but the title remains. What I have been able to do is get the background image applied, and the sliver title to remain but I cannot work out how to have title outside the FlexibleSpaceBar, nor how to have the CircleAvatar 50% over the background.
SliverAppBar.large(
expandedHeight: 200.0,
floating: true,
pinned: true,
snap: true,
flexibleSpace: FlexibleSpaceBar(
title: _buildProfileName(user),
background: Stack(
children: [
Container(
decoration: const BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.black54, BlendMode.darken),
image: AssetImage(
"assets/images/landing/hedge-trimmer.jpg"),
fit: BoxFit.cover,
),
),
),
Positioned(
top:
175.0, // (background container size) - (circle height / 2)
left: MediaQuery.of(context).size.width / 2 - 50,
child: Center(
child: CircleAvatar(
child: CircleAvatar(
backgroundImage: (user.profileImageUrl!.isEmpty
? const AssetImage('assets/images/Logo.png')
: CachedNetworkImageProvider(
user.profileImageUrl!))
as ImageProvider<Object>?,
radius: 45,
),
radius: 50,
backgroundColor: Colors.white,
),
),
),
],
),
),
),
This above produces something that is close to what I am after just not completely
I think you are almost there. You can expand the
SliverAppBar
to include the bottom white space below. Here is the example code: