Создаем гироскопический параллакс-эффект во Flutter

Недавно я рассказал, как создать параллакс эффект при скролле с помощью виджета CustomPaint

Сегодня расскажу, как, сделав небольшой апгрейд, можно оживить картинку при простом наклоне телефона.

Вспомним, что уже реализовано:

1. Экран со списком элементов, где каждый элемент - это картинка с подписью

2. Бэкграунд, который также смещается при скролле, но чуть медленнее, чем элементы в списке

import 'dart:math' show Random;
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

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

  @override
  State<ParallaxScreen> createState() => _ParallaxScreenState();
}

class _ParallaxScreenState extends State<ParallaxScreen> {
  // get an array of random ids
  late final List<int> ids = List.generate(10, (index) => Random().nextInt(500));

  // controller to handle scrolling of items
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _Background(
        scrollController: _scrollController,
        child: ListView.builder(
          controller: _scrollController,
          itemCount: ids.length,
          itemBuilder: (context, index) {
            final int id = ids[index];
            return ItemCard(id: id);
          },
        ),
      ),
    );
  }
}

class ItemCard extends StatelessWidget {
  const ItemCard({
    super.key,
    required this.id,
  });

  final int id;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(
        horizontal: 20,
        vertical: 20,
      ),
      clipBehavior: Clip.hardEdge,
      width: double.maxFinite,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.4),
        borderRadius: BorderRadius.circular(20),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 10,
            spreadRadius: 5,
          ),
        ],
      ),
      child: Stack(
        children: [
          Image.network(
            'https://picsum.photos/id/$id/500/300', // get an image from network by id
            width: double.maxFinite,
          ),
          Positioned(
            left: 20,
            bottom: 20,
            child: Text(
              'Image $id',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _Background extends StatefulWidget {
  const _Background({
    required this.child,
    required this.scrollController,
  });
  final Widget child;
  final ScrollController scrollController;

  @override
  State<_Background> createState() => _BackgroundState();
}

class _BackgroundState extends State<_Background> {
  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  ui.Image? _image;
  // logic for downloaiding an image as ui.Image object
  Future<void> _loadImage() async {
    const imageProvider = NetworkImage('https://picsum.photos/id/307/600/4000'); // get background image. You can use anyone you want
    final ImageStreamListener listener = ImageStreamListener((info, _) {
      setState(() {
        _image = info.image;
      });
    });
    final ImageStream stream = imageProvider.resolve(const ImageConfiguration());
    stream.addListener(listener);
  }

  @override
  void dispose() {
    _image?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _image != null ? _BackgroundImagePainter(widget.scrollController, _image!) : null,
      child: widget.child,
    );
  }
}

class _BackgroundImagePainter extends CustomPainter {
  final ScrollController controller;
  final ui.Image image;
  const _BackgroundImagePainter(this.controller, this.image) : super(repaint: controller);

  @override
  void paint(Canvas canvas, Size size) {
    final imageWidth = image.width.toDouble();
    final imageHeight = image.height.toDouble();
    final aspectRatio = imageWidth / imageHeight;

    final src = Rect.fromLTWH(
      0,
      0,
      imageWidth,
      imageHeight,
    );
    final deltaY = -controller.offset * 0.6;
    final dst = Rect.fromLTWH(
      0,
      deltaY,
      size.width,
      size.width / aspectRatio,
    );
    canvas.drawImageRect(
      image,
      src,
      dst,
      Paint()..filterQuality = FilterQuality.high,
    );
  }

  @override
  bool shouldRepaint(_BackgroundImagePainter oldDelegate) => controller.offset != oldDelegate.controller.offset;
}

Чтобы реагировать на наклоны телефона, нужно получать данные с датчиков устройства. Поэтому данный кейс актуален только на устройствах с акселерометром и гироскопом

Акселерометр - если супер просто, то это датчик, который измеряет ускорение (акселерацию) при движении устройства в реальном времени в трех проекциях. Единица измерения или м/c^2, или значение от 0 до 1 (нормированное относительно ускорения свободного падения 9.8 м/с^2). Если, например, телефон лежит на столе, то по оси Z абсолютное значение ускорения будет либо 9.8, либо 1

Гироскоп - датчик, который показывает, с какой скоростью повернули устройство относительно такой-то оси. Единица измерения или °/с, или рад/с. Если тело в покое, то датчик показывает нулевые значения

Существующие библиотеки

Для получения данных с этих датчиков есть несколько готовых решений на pub.dev

flutter_sensors

Это пример библиотеки, которая без обновлений существует уже более 2-х лет, поддерживается в текущей версии flutter и dart и вполне достойно выполняет свои задачи. В ранних проектах я пользовался именно этой библиотекой

sensors_plus

Это пример другой библиотеки, у которой проще API, по сравнению с flutter_sensors, а также не требуются дополнительные настройки разрешений в AndroidManifest.xml для Android или info.plist для iOS.
Еще одно отличие, что при расчете ускорения используются разные единицы. Это стоит учитывать при миграции с одной библиотки на другую.

В данном примере воспользуемся sensors_plus

Быстрый апгрейд

1. Добавим библиотеку sensors_plus в pubspec.yaml

name: parallax_with_sensors_example
description: "A new Flutter project."
publish_to: "none"
version: 0.1.0

environment:
  sdk: ">=3.2.6 <4.0.0"

dependencies:
  flutter:
    sdk: flutter
  sensors_plus: any # Add this line

dev_dependencies:
  flutter_lints: ^2.0.0
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

2. Добавим импорт в файл, где реализован виджет экрана

import 'dart:async';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:sensors_plus/sensors_plus.dart'; // add this line

3. Поправим реализацию ParallaxScreen

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<AccelerometerEvent>(
        stream: accelerometerEventStream(samplingPeriod: SensorInterval.uiInterval),
        builder: (context, snapshot) {
          final x = snapshot.data?.x ?? 0;
          final y = snapshot.data?.y ?? 0;
          return AnimatedContainer(
            duration: const Duration(milliseconds: 100),
            transform: Matrix4.identity()..translate(x * 10, y * 10),
            child: CustomPaint(
              painter: _image != null ? _BackgroundImagePainter(widget.scrollController, _image!) : null,
              child: widget.child,
            ),
          );
        });
  }

Что имеем при такой реализации:

1. Используем StreamBuilder, потому что данные из датчиков поступают в виде стрима;
   Для тех, кто не сильно разбирается в стримах в dart, но знаком, например, с YouTube (ТыТруба), то может провести аналогию со стримами, когда в другом конце земного шара какой-то блогер что-то показывает, а все остальные пользователи могут это увидеть в реальном времени. Там блогер закидывает, грубо говоря, картинку в трубу (Sink), а пользователи получают эту картинку из трубы (Stream).
   С датчиками примерно то же самое: в реальном времени собираются данные с определенной частотой и передаются в Sink. Кто подключится к Stream этой трубы, тот будет получать эти данные

2. Данные поступают в виде единиц/десяток, поэтому для повышения чувствительности умножаем на 10 (на ваше усмотрение)

3. Полем samplingPeriod задается частота, с которой следует собирать данные с датчиков

4. В примере кода данные берутся с акселерометра. При таком выборе сохраняется положение картинки после завершения наклона. Если, например, использовать гироскоп, то после завершения вращения картинка вернется в исходное положение.
   Тут тоже каждый выбирает под свои цели

5. AnimatedContainer - используется просто для плавности анимации

Вариант, как можно оставить список статичным и перемещать только картинку на бэкграунде:

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        StreamBuilder<AccelerometerEvent>(
            stream: accelerometerEventStream(samplingPeriod: SensorInterval.uiInterval),
            builder: (context, snapshot) {
              final x = snapshot.data?.x ?? 0;
              final y = snapshot.data?.y ?? 0;
              return AnimatedContainer(
                duration: const Duration(milliseconds: 100),
                transform: Matrix4.identity()..translate(x * 10, y * 10),
                child: CustomPaint(
                  size: Size.infinite,
                  painter: _image != null ? _BackgroundImagePainter(widget.scrollController, _image!) : null,
                ),
              );
            }),
        widget.child,
      ],
    );
  }

Заключение

Сегодня рассмотрели простой вариант, как можно дополнительно добавить в приложение отзывчивость при взаимодействии с реальным миром на примере реализации гироскопического параллакс эффекта

Если понравился материал, поставьте ⬆️, чтобы я понимал, что тема интересна и писал больше подобных статей