I am trying to implement a parallax effect in the flutter web and have followed up the procedure to bring that effect in it but it seems it is not reflecting in the UI as expected.
I tried adding all the necessary stuffs but still the effect is not showing up. I added all the positioned widgets, declared variables as topOne and topTwo, added the notification listener.
Here's my code snippet:
body: SingleChildScrollView(
child: NotificationListener(
onNotification: (v) {
if (v is ScrollUpdateNotification) {
setState(() {
topOne = topOne - v.scrollDelta / 3;
topTwo = topTwo - v.scrollDelta / 1;
});
}
},
child: SafeArea(
child: Column(
children: [
Stack(
children: [
NavBar(
h: h / 1.2,
w: w / 1,
sel0: false,
sel1: false,
sel2: true,
sel3: false,
sel4: false,
)
],
),
SizedBox(
height: h / 12,
),
Container(
height: h / 1,
width: w / 1,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.grey[100],
AppColors.getWhite(),
]),
),
child: Stack(
children: [
Positioned(
top: 30,
left: 30,
child: Text(
'F L EX',
style:
TextStyle(fontSize: 500, color: Colors.white),
),
),
Positioned(
top: topOne, //I wanted this to move in the normal speed
left: 100,
child: Container(
height: h / 1.1,
width: w / 1.2,
decoration: BoxDecoration(color: Colors.white,
// borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: AppColors.getGrey(),
blurRadius: 60.0,
),
]),
),
),
Positioned(
top: 80,
left: 150,
child: RotationTransition(
turns: new AlwaysStoppedAnimation(50 / 360),
child: Container(
height: h / 6,
width: w / 12,
decoration: BoxDecoration(
border: Border.all(
color: AppColors.getGrey(), width: 4)),
),
),
),
Positioned(
top: topTwo, // I wanted this to move slow than the above
left: 200,
child: Text(
'WE DO IT ALL.',
style: GoogleFonts.roboto(
fontSize: 30,
fontWeight: FontWeight.normal,
color: AppColors.getBlack()),
),
),