Implementing Live Photo Gesture and Video Integration in Flutter

The article introduces the concept of Live Photo (real‑time photo) on iOS and describes how to obtain its two files—a HEIC image and a companion video—by exporting from the Photos app or using the photo_manager package.

It then explains how to display the Live Photo in a Flutter app, using the ExtendedImage widget to render the image and a VideoPlayer widget for the video, while synchronizing both with gesture handling.

The core implementation is shown in the _buildVideo method, which calculates the destination rectangle based on the current gesture state, adjusts for aspect‑ratio differences, and wraps the video widget in a CustomSingleChildLayout to follow the image’s transform.

Widget _buildVideo(ExtendedImageGestureState? imageGestureState) {
    final Size size = MediaQuery.of(context).size;
    final Rect destinationRect = widget.buildWithImageRect
        ? GestureWidgetDelegateFromState.getRectFormState(
            Offset.zero & size,
            imageGestureState!,
          )
        : GestureWidgetDelegateFromState.getRectFormState(
            Offset.zero & size,
            imageGestureState!,
            width: _controller.value.size.width,
            height: _controller.value.size.height,
          );
    // ... (rest of the method as in the source) ...
    return child;
  }

Utility functions such as getRectFormState compute the final drawing rectangle by considering slide‑out offsets, scaling, and fitting options, while GestureDetails provides the current scale and translation values.

Special handling is required when the video’s aspect ratio differs from the image’s; the article shows how to use a FittedBox with BoxFit.cover to preserve visual fidelity.

For slide‑out gestures, the ExtendedImageSlidePage widget’s onSlidingPage callback and the isSliding flag allow pausing playback, and the GestureConfig ’s gestureDetailsIsChanged callback together with a debounce timer detects when a gesture ends.

ExtendedImageSlidePage(
  key: slidePageKey,
  onSlidingPage: (ExtendedImageSlidePageState state) {
    _isSliding.value = state.isSliding;
  },
);

Additional listeners on pointer events ensure that playback only resumes after the user lifts their finger, avoiding premature continuation.

The article concludes with a link to the full example repository and notes that the same approach can be applied to other gesture‑driven media interactions in Flutter.