Create beautiful & interactive parallax backgrounds for your apps and games.
You can find another working example in SlideIT Mobile Game
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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent