simple_parallax 0.1.0 simple_parallax: ^0.1.0 copied to clipboard
This Flutter plugin provides a simple and customizable parallax effect for your applications.
SimpleParallax Plugin for Flutter #
This Flutter plugin provides a simple and customizable parallax effect for your applications. Easily create stunning visual experiences by incorporating parallax scrolling into your widgets.
Features #
- Smooth parallax scrolling for background images.
- Configurable scroll speed for the parallax effect.
- Simple integration with your existing Flutter projects.
- Uses provider for state management ensuring efficient updates.
Usage #
To use this plugin, wrap your scrollable content with the "SimpleParallax" and provide the path to your background image. Adjust the speed parameter to control the intensity of the parallax effect.
Exemple of SimpleParallaxContainer #
class MyApp extends StatelessWidget {
/// App demo constructor
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
height: 300, // Optional
width: 600, // Optional
child: SimpleParallaxContainer(
height: 300, // Optional
imagePath: 'assets/images/background.jpg',
speed: 0.3, // Optional
autoSpeed: true, // Optional
decal: 1.0, // Optional
child: Column(
children: List<Widget>.generate(
20,
(int index) => Container(
height: 100,
margin: const EdgeInsets.symmetric(vertical: 10),
color: Colors.white.withOpacity(0.8),
child: Center(child: Text('Item $index')),
),
),
),
),
),
),
),
);
}
}
Exemple of SimpleParallaxWidget #
class MyApp extends StatelessWidget {
/// App demo constructor
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SimpleParallaxWidget(
children: <Widget>[
Container(
color: Colors.red,
padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 0),
child: const SizedBox(
height: 50,
),
),
const SimpleParallaxItem(
imagePath: 'assets/images/background.jpg',
height: 300,
child: Center(
child: Text('TEST 1'),
),
),
Container(
color: Colors.greenAccent,
child: const SizedBox(
height: 250,
),
),
const SimpleParallaxItem(
imagePath: 'assets/images/background.jpg',
height: 300,
child: Center(
child: Text('TEST 2'),
),
),
Container(height: 500, color: Colors.blueGrey),
],
),
),
);
}
}