simple_parallax 0.1.0 copy "simple_parallax: ^0.1.0" to clipboard
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 #

Pub Version Maintainer License Maintenance Flutter Status Generic badge

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),
          ],
        ),
      ),
    );
  }
}
3
likes
160
points
27
downloads

Publisher

verified publishercomapps.be

Weekly Downloads

This Flutter plugin provides a simple and customizable parallax effect for your applications.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_web_plugins, provider, web

More

Packages that depend on simple_parallax