parallax_bg 2.0.1 parallax_bg: ^2.0.1 copied to clipboard
Create beautiful & interactive parallax backgrounds
parallax_bg #
Create beautiful & interactive parallax backgrounds for your apps and games.
You can find another working example in SlideIT Mobile Game
Usage #
Add following command in your pubspec.yaml & install package
parallax_bg:2.0.1
or run
flutter pub add parallax_bg
Import in your dart page
import 'package:parallax_bg/parallax_bg.dart';
Add following to create background wrapper
ParallaxBackground(
backgroundImage: "assets/images/galaxy.jpg",
parallaxType: _parallaxType,
foregroundChilds: [
ParallaxItem(
child: Image.asset("assets/images/planet.png"),
offset: _planetOffset),
ParallaxItem(
child: Image.asset("assets/images/meteor.png"),
offset: _meteorOffset),
],
// fallback: true,
);
Change/Add/Remove ParallaxItem for foreground items
ParallaxItem(
child: Image.asset("assets/images/meteor.png"),
offset: _meteorOffset),
ParallaxBackground
PROPERTY | TYPE | REQUIRED | DETAILS |
---|---|---|---|
backgroundImage | string | yes | Image path from asset folder |
foregroundChilds | List | yes | Widgets to create foreground layers |
child | Widget | no | Child widget to draw over all parallax widgets |
reverse | boolean | no | Move foreground items in reverse direction. Default false |
fallback | boolean | no | If true render the items normally when there are no sensors available. If false, it will show a error message in visible area. Default false |
ParallaxItem
PROPERTY | TYPE | REQUIRED | DETAILS |
---|---|---|---|
child | Widget | yes | Child widget to draw over background as parallax item |
offset | boolean | no | Offset values to calculate distance to move items when moving device. Need separate value for each item. Default 5 |