Flutter Smooth Parallax Effect For Login and Intro Screens

Let’s start..

sensors: ^0.4.2+6

Let’s code..

class PerspectiveZoomDemo extends StatefulWidget {
PerspectiveZoomDemo({
Key key,
}) : super(key: key);

@override
_PerspectiveZoomDemoState createState() => _PerspectiveZoomDemoState();
}

class _PerspectiveZoomDemoState extends State<PerspectiveZoomDemo> {
AccelerometerEvent acceleration;
StreamSubscription<AccelerometerEvent> _streamSubscription;

int planetMotionSensitivity = 4;
int bgMotionSensitivity = 2;

@override
void initState() {
_streamSubscription = accelerometerEvents.listen((AccelerometerEvent event) {
setState(() {
acceleration = event;
});
});
super.initState();
}

@override
void dispose() {
_streamSubscription.cancel();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Stack(
children: <Widget>[
Positioned(
top: acceleration.y * bgMotionSensitivity,
bottom: acceleration.y * -bgMotionSensitivity,
right: acceleration.x * -bgMotionSensitivity,
left: acceleration.x * bgMotionSensitivity,
child: Align(
child: Image.asset(
"assets/images/bg.jpg",
height: 1920,
fit: BoxFit.fitHeight,
),
),
),
Positioned(
top: acceleration.y * planetMotionSensitivity,
bottom: acceleration.y * -planetMotionSensitivity,
right: acceleration.x * -planetMotionSensitivity,
left: acceleration.x * planetMotionSensitivity,
child: Align(
child: Image.asset(
"assets/images/earth_2.png",
width: 250,
),
),
),
],
),
),
);
}
}

Explanation:

Results:

Problem & Solution:

Applied Solution:

AnimatedPositioned(
duration: Duration(milliseconds: 250),
top: acceleration.y * bgMotionSensitivity,
bottom: acceleration.y * -bgMotionSensitivity,
right: acceleration.x * -bgMotionSensitivity,
left: acceleration.x * bgMotionSensitivity,
child: Align(
child: Image.asset(
"assets/images/bg.jpg",
height: 1920,
fit: BoxFit.fitHeight,
),
),
),
AnimatedPositioned(
duration: Duration(milliseconds: 250),
top: acceleration.y * planetMotionSensitivity,
bottom: acceleration.y * -planetMotionSensitivity,
right: acceleration.x * -planetMotionSensitivity,
left: acceleration.x * planetMotionSensitivity,
child: Align(
child: Image.asset(
"assets/images/earth_2.png",
width: 250,
),
),
),

Explanation:

Results:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store