如何在Flutter中实现图片跟随设备移动的效果？

要实现图片随设备移动而偏移的效果，核心是利用设备的加速度传感器获取姿态数据，再动态调整图片位置，具体步骤如下：

1. 添加传感器依赖 #

首先在项目中引入sensor_plus包，用于获取设备加速度数据：

flutter pub add sensor_plus

2. 完整实现代码 #

下面是可直接运行的示例代码，实现图片随设备倾斜而偏移的效果：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[100],
        body: const ImageFollowDevice(),
      ),
    );
  }
}

class ImageFollowDevice extends StatefulWidget {
  const ImageFollowDevice({super.key});

  @override
  State<ImageFollowDevice> createState() => _ImageFollowDeviceState();
}

class _ImageFollowDeviceState extends State<ImageFollowDevice> {
  // 存储加速度数据，x对应左右倾斜，y对应前后倾斜
  double _accelX = 0;
  double _accelY = 0;
  // 控制最大偏移量，避免图片移出屏幕
  final double _maxOffset = 50;

  @override
  void initState() {
    super.initState();
    // 监听加速度传感器数据
    accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        // 调整系数，控制偏移灵敏度，可根据需求修改
        _accelX = event.x * 10;
        _accelY = event.y * 10;
        // 限制偏移范围
        _accelX = _accelX.clamp(-_maxOffset, _maxOffset);
        _accelY = _accelY.clamp(-_maxOffset, _maxOffset);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Transform.translate(
        // 根据加速度数据偏移图片
        offset: Offset(_accelX, _accelY),
        child: Image.asset(
          'assets/your_image.png', // 替换成你的图片路径
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

关键说明 #

• 传感器监听：通过accelerometerEvents实时获取设备X、Y轴的加速度值，这些值对应设备的倾斜方向
• 偏移控制：通过clamp方法限制最大偏移量，防止图片移出可视区域；调整乘法系数可以改变偏移的灵敏度
• 位置调整：使用Transform.translate组件动态修改图片的偏移量，实现跟随效果

注意：记得在pubspec.yaml中配置图片资源路径，并且在Android的AndroidManifest.xml中添加传感器权限：<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION"/>，iOS无需额外权限。

内容的提问来源于stack exchange，提问作者ToKu404