I am creating a simple flutter web page with an architecture like this.
final scrollController = new ScrollController();
return Scaffold(
body: SingleChildScrollView(
controller: scrollController,
child: Column(
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [SplashInfo(), Blobs()],
)),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Performance(
scrollController: scrollController,
),
PortfolioSplash(),
],
)),
],
)));
My goal is to play animations in some Widgets when the user scrolls down to them. Currently I have a solution that involves sending the scrollController in as an argument to the widgets I want to animate. See the Performance() widget.
In the widgets I add listeners to the controller that plays the animation at a hard-coded threshhold. My implementation looks like this:
void initState() {
super.initState();
animationController = AnimationController(vsync: this, duration: _duration)
..addListener(() {
setState(() {});
});
animation = Tween(begin: 0.0, end: 12.5).animate(animationController);
var listener;
removeListener() {
this.widget.scrollController.removeListener(listener);
}
listener = () {
if (this.widget.scrollController.offset >=
MediaQuery.of(context).size.height * 0.3 &&
animationController.status == AnimationStatus.dismissed) {
animationController.forward();
removeListener();
}
};
WidgetsBinding.instance.addPostFrameCallback(
(_) => this.widget.scrollController.addListener(listener));
}
This seems like a bad way to achieve this. Firstly hard-coding the scrolling thresholds. Also, there seems to be some performance issues with this implementation.