Configure Snapping

VideoEditor SDK supports several configuration options to customize the snapping behavior globally for all sprites in the editor. For a detailed explanation of how to configure different editor views, refer to this guide.

In this example configuration, the editor's snapping behavior is configured to act as a guide for the user to see where the sprites should be placed. A use case could be that an application displays the videos both in rectangular as well as in circular shapes which requires the editor to indicate in which area the sprites' visibility is best.

Rotational snapping#

Sprites snap based on their rotation. By default, the sprites snap to angles in 45-degree steps (0, 45 ... 315)

`enabled`#

By default, the snapping is enabled when rotating a sprite. In this example, this behavior is disabled since only the outer positional snapping guides are needed.

Positional snapping#

Sprites also snap based on their position on the canvas.

Inner positional snapping#

By default, sprites snap to the horizontal and vertical center lines. In this example, the inner positional snapping behavior is disabled.

`snapToVerticalCenter`#

If set to true (by default) the center of the sprite snaps to a vertical line indicating the center of the video. In this example, this behavior is disabled since only the outer positional snapping guides are needed.

`snapToHorizontalCenter`#

If set to true (by default) By default the center of the sprite snaps to a horizontal line indicating the center of the video. In this example, this behavior is disabled since only the outer positional snapping guides are needed.

Outer positional snapping#

Sprites snap to the border of the video along horizontal and vertical lines. By default, these lines are placed at a distance of 10% of the smaller side of the video from the border (corresponding to 0.1). In this example, we want to increase this distance to 15% to define the visibility of the video.


import 'package:catalog/models/code_example.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

class VideoSnappingConfigurationExample extends CodeExample {
  @override
  void invoke() async {
    // Create [SnappingOptions] to configure the snapping behavior.
    final snappingOptions = SnappingOptions(
        // The [RotationSnappingOptions] allow to modify the snapping behavior
        // for rotating a sprite.
        rotation: RotationSnappingOptions(
            // By default the snapping is enabled when rotating a sprite.
            // For this example this behavior is disabled since only the
            // outer positional snapping guides are needed.
            enabled: false
            ),

        // The [PositionSnappingOptions] allow to modify the snapping behavior
        // for moving a sprite.
        position: PositionSnappingOptions(
            // By default the center of the sprite snaps to a vertical
            // line indicating the center of the image.
            // For this example this behavior is disabled since only the
            // outer positional snapping guides are needed.
            snapToVerticalCenter: false,

            // By default the center of the sprite snaps to a horizontal
            // line indicating the center of the image.
            // For this example this behavior is disabled since only the
            // outer positional snapping guides are needed.
            snapToHorizontalCenter: false,

            // By default the sprite snaps to a horizontal line
            // on the bottom of the image. This value is measured in normalized
            // coordinates relative to the smaller side of the edited image and
            // defaults to 10% (0.1).
            // For this example the value is set to 15% (0.15) to define the
            // visibility area of the image.
            snapToBottom: 0.15,

            // By default the sprite snaps to a horizontal line
            // on the top of the image. This value is measured in normalized
            // coordinates relative to the smaller side of the edited image and
            // defaults to 10% (0.1).
            // For this example the value is set to 15% (0.15) to define the
            // visibility area of the image.
            snapToTop: 0.15,

            // By default the sprite snaps to a vertical line
            // on the left of the image. This value is measured in normalized
            // coordinates relative to the smaller side of the edited image and
            // defaults to 10% (0.1).
            // For this example the value is set to 15% (0.15) to define the
            // visibility area of the image.
            snapToLeft: 0.15,

            // By default the sprite snaps to a vertical line
            // on the right of the image. This value is measured in normalized
            // coordinates relative to the smaller side of the edited image and
            // defaults to 10% (0.1).
            // For this example the value is set to 15% (0.15) to define the
            // visibility area of the image.
            snapToRight: 0.15
            ));

    // Create a [Configuration] instance.
    final configuration = Configuration(snapping: snappingOptions);

    try {
      // Add a video from the assets directory.
      final video = Video("assets/Skater.mp4");

      // Open the video editor and handle the export as well as any occurring errors.
      final result =
          await VESDK.openEditor(video, configuration: configuration);

      if (result != null) {
        // The user exported a new video successfully and the newly generated video is located at `result.video`.
        print(result.video);
      } else {
        // The user tapped on the cancel button within the editor.
        return;
      }
    } catch (error) {
      // There was an error generating the video.
      print(error);
    }
  }
}