Flutter transform translate appbar leading Button to top on scrolling - flutter

Question

I want translate leading Button in app bar when scrolling like below.
button will translate according with scrolled amount.
and this is what i tried and got. Same thing happened but its not changing with scrolled amount which is not smooth as well
How can i achieve this kind of smooth transtion based on scrolled amount??
This is my current code
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
final scrollcontroller = ScrollController();
late AnimationController animationController;
#override
void initState() {
super.initState();
scrollcontroller.addListener(onScroll);
animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
animationController.addListener(() {
setState(() {});
});
}
onScroll() {
if (scrollcontroller.offset < 15) {
animationController.reverse();
print(animationController.value);
} else if (scrollcontroller.offset > 15) {
animationController.forward();
print(animationController.value);
}
}
#override
Widget build(context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
leading: Transform.translate(
offset: Offset(0, -animationController.value * 35),
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
),
title: Text("test"),
),
backgroundColor: Color(0xFF51d3e3),
body: NotificationListener<UserScrollNotification>(
onNotification: (notification) {
if (notification.direction == ScrollDirection.forward) {
// print("Scrolling up");
} else if (notification.direction == ScrollDirection.reverse) {
// print("Scrolling down");
// print(scrollcontroller.offset);
}
return true;
},
child: Container(
padding: EdgeInsets.only(left: 20, right: 20, top: 20),
child: ListView.builder(
controller: scrollcontroller,
itemCount: 9,
itemBuilder: (content, index) {
return Container(
padding: EdgeInsets.symmetric(vertical: 12),
child: PlaceholderCardTall(
height: 200,
color: const Color(0xFF99D3F7),
backgroundColor: Color(0xFFC7EAFF)),
);
},
),
),
),
}
}

Answer 1

You can use SliverPersistentHeader, play with shrinkOffset.
class CSLVW extends StatelessWidget {
const CSLVW({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverPersistentHeader(
pinned: true,
delegate: CustomAppBar(),
),
SliverToBoxAdapter(
child: Container(height: 1133),
),
],
),
);
}
}
class CustomAppBar extends SliverPersistentHeaderDelegate {
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
var factionDatabaseSnapshot;
return Container(
color: Colors.purple,
height: maxExtent,
child: Stack(
children: [
Positioned(
left: 20,
top: -shrinkOffset + 10,
child: IconButton(
onPressed: null,
icon: Icon(Icons.ac_unit),
),
)
],
),
);
}
#override
double get maxExtent => kToolbarHeight * 1.5;
#override
double get minExtent => kToolbarHeight;
#override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
false;
}