Created
January 18, 2023 21:42
-
-
Save dhruvilp/ab87c73efe9ce441eff87dc5a0fb3252 to your computer and use it in GitHub Desktop.
Parallax effect for landing page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: const ParallaxEffectScreen(), | |
); | |
} | |
} | |
class ParallaxEffectScreen extends StatefulWidget { | |
const ParallaxEffectScreen({Key? key}) : super(key: key); | |
@override | |
State<ParallaxEffectScreen> createState() => _ParallaxEffectScreenState(); | |
} | |
class _ParallaxEffectScreenState extends State<ParallaxEffectScreen> { | |
String? asset; | |
double divOne = 0; | |
double divFive = 0; | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: NotificationListener( | |
onNotification: (notify) { | |
if (notify is ScrollUpdateNotification) { | |
setState(() { | |
divOne += notify.scrollDelta! / 1; | |
divFive += notify.scrollDelta! / 5; | |
}); | |
} | |
return true; | |
}, | |
child: Stack( | |
children: <Widget>[ | |
ListView( | |
children: <Widget>[ | |
Container( | |
decoration: const BoxDecoration( | |
gradient: LinearGradient( | |
begin: Alignment.topCenter, | |
end: Alignment(0.5, 0.0), | |
colors: [ | |
Color.fromRGBO(130, 0, 94, 1), | |
Colors.lightBlue | |
], | |
tileMode: TileMode.mirror), | |
), | |
height: 1200, | |
), | |
], | |
), | |
ParallaxText( | |
colour: Colors.white, | |
left: 170 - divOne * 3, | |
top: 120 + divFive, | |
text: "Demo of", | |
), | |
ParallaxText( | |
colour: Colors.white, | |
left: 20 + divOne * 2, | |
top: 400 + divFive / 2, | |
text: "Parallex\n Scrolling", | |
), | |
ParallaxImage( | |
left: 20, | |
top: 100 - divOne, | |
height: 200, | |
width: 200, | |
asset: "photo6", | |
widget: ParallaxText( | |
colour: const Color.fromRGBO(130, 0, 94, 1), | |
left: 150 - divOne * 3, | |
top: 20 + divOne + divFive, | |
text: "Demo of", | |
), | |
), | |
ParallaxImage( | |
left: 200 - divOne, | |
top: 350 - divOne, | |
height: 300, | |
width: 300, | |
asset: "photo7", | |
widget: ParallaxText( | |
colour: const Color.fromRGBO(130, 0, 94, 1), | |
left: -180 + divOne * 3, | |
top: 50 + divOne + divFive / 2, | |
text: "Parallax\n Scrolling", | |
), | |
), | |
ParallaxText( | |
colour: Colors.white, | |
left: divFive, | |
top: 720 - divOne, | |
text: "Be creative", | |
), | |
ParallaxImage( | |
left: 95, | |
top: 700 - divOne, | |
height: 400, | |
width: 230, | |
asset: "photo3", | |
widget: ParallaxText( | |
colour: const Color.fromRGBO(130, 0, 94, 1), | |
left: -95 + divFive, | |
top: 20, | |
text: "Be creative", | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} | |
class ParallaxText extends StatelessWidget { | |
const ParallaxText({ | |
Key? key, | |
required this.left, | |
required this.top, | |
required this.text, | |
required this.colour, | |
}) : super(key: key); | |
final double left; | |
final double top; | |
final String text; | |
final Color colour; | |
@override | |
Widget build(BuildContext context) { | |
return Positioned( | |
left: left, | |
top: top, | |
child: Text( | |
text, | |
style: TextStyle( | |
color: colour, | |
fontWeight: FontWeight.w900, | |
fontSize: 60.0, | |
fontFamily: "Helvetica", | |
), | |
), | |
); | |
} | |
} | |
class ParallaxImage extends StatelessWidget { | |
const ParallaxImage({ | |
Key? key, | |
required this.left, | |
required this.top, | |
required this.asset, | |
required this.height, | |
required this.width, | |
required this.widget, | |
}) : super(key: key); | |
final double left; | |
final double top; | |
final String asset; | |
final double height; | |
final double width; | |
final Widget widget; | |
@override | |
Widget build(BuildContext context) { | |
return Positioned( | |
left: left, | |
top: top, | |
child: Container( | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
fit: BoxFit.cover, | |
image: ExactAssetImage("assets/images/$asset.png")), | |
borderRadius: BorderRadius.circular(12.0)), | |
height: height, | |
width: width, | |
child: Stack( | |
children: <Widget>[widget], | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment