Flutter背景视差效果插件parallax_bg的使用

Flutter背景视差效果插件parallax_bg的使用

创建美观且交互式的视差背景效果，适用于你的应用程序和游戏。

你可以在 SlideIT移动游戏 中找到另一个工作示例。

使用方法

在pubspec.yaml文件中添加以下命令并安装包：

dependencies:
  parallax_bg: 2.0.1

或者运行以下命令：

flutter pub add parallax_bg

导入包

在Dart页面中导入包：

import 'package:parallax_bg/parallax_bg.dart';

创建背景包装器

添加以下代码来创建背景包装器：

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,
);

更改/添加/移除ParallaxItem

更改或添加前景项：

ParallaxItem(
  child: Image.asset("assets/images/meteor.png"),
  offset: _meteorOffset),

ParallaxBackground属性

ParallaxItem属性

许可证

MIT许可证

完整示例Demo

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:parallax_bg/parallax_bg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _planetOffset = 1;
  double _meteorOffset = 5;

  bool _loading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(mainAxisSize: MainAxisSize.max, children: [
          Expanded(
              child: _loading
                  ? Center(child: CircularProgressIndicator())
                  : _parallaxBody()),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Text("Planet"),
                Expanded(
                  child: Slider(
                    value: _planetOffset,
                    onChanged: (val) {
                      setState(() {
                        _planetOffset = val;
                      });
                    },
                    min: 1,
                    max: 10,
                  ),
                ),
                Text(_planetOffset.toStringAsFixed(0)),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              children: [
                Text("Meteor"),
                Expanded(
                  child: Slider(
                    value: _meteorOffset,
                    onChanged: (val) {
                      setState(() {
                        _meteorOffset = val;
                      });
                    },
                    min: 5,
                    max: 20,
                  ),
                ),
                Text(_meteorOffset.toStringAsFixed(0)),
              ],
            ),
          ),
        ]),
      ),
    );
  }

  _parallaxBody() {
    return ParallaxBackground(
      backgroundImage: "assets/images/galaxy.jpg",
      foregroundChilds: [
        ParallaxItem(
            child: Image.asset("assets/images/planet.png"),
            offset: _planetOffset),
        ParallaxItem(
            child: Image.asset("assets/images/meteor.png"),
            offset: _meteorOffset),
      ],
      // fallback: true,
    );
  }
}