So I’ve a reasonably easy difficulty. I’ve a picture. Shall we say its ‘property/pictures/person.png’. I would like that picture to seem within the high left of the app (In the midst of the white circle). When the person scrolls downward, the title, and outline each disappear after which the Go Premium button get pinned to the highest. I desire a person png to seem within the TOP LEFT nook within the MIDDlE of the white circle, after which when the person scrolls down, I would like the person png to go down a bit and place itself to the left of the Go Premium button, within the small hole. I would like this to work for various telephones too, so hardcoding is allowed IF it might work for a smaller telephone. Thanks!
Right here is a picture of my app earlier than scroll: 
Right here is one after scroll: 
CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor:
const Color.fromARGB(12, 14, 13, 3).withOpacity(1),
centerTitle: false,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: SizedBox(
width: size.width * .7,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color.fromARGB(255, 255, 0, 0)),
child: const Text(
'Go Premium!',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
),
),
pinned: true,
expandedHeight: 165,
titleSpacing: 15,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Stack(
children: [
Positioned(
top: -size.width * .08,
left: -size.width * .08,
child: Transform.translate(
offset: const Offset(-30, -30),
child: const CircleButton(),
),
),
Positioned(
left: size.width * .2,
top: size.height * .09,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('JustLift',
style: TextStyle(
color:
Color.fromARGB(255, 252, 250, 250),
fontWeight: FontWeight.bold,
fontSize: 50)),
Text(
element,
style: TextStyle(
color: Color.fromARGB(255, 158, 154, 154),
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
],
),
),
],
),
),
),
