Flutter Creative Editor

With Flutter, this SDK provides a highly customizable and extensible solution for creating and editing designs on mobile devices. Whether you need basic design editing or a full-featured design creation experience, the SDK is designed to cater to your requirements.

Key Capabilities of the React Native Mobile Design Editor SDK#

Transforms

Perform operations like cropping, rotating, and resizing design elements.

Templating

Create and apply design templates with placeholders and text variables for dynamic content.

Placeholders & Lockable Design

Constrain templates to guide your users’ design and ensure brand consistency.

Asset Management

Import and manage images, shapes, and other assets to build your designs.

Design Collage

Arrange multiple elements on a single canvas to create complex layouts.

Text Editing

Add and style text blocks with various fonts, colors, and effects.

Client-Side Processing

All design editing operations are executed directly on the device, with no need for server dependencies.

Headless & Automation

Programmatically edit designs within your application using the engine API.

Customizable UI

Build and integrate custom UIs tailored to your application’s design needs.

Supported Platforms#

The Flutter SDK leverages a single creative engine to ensure seamless support across iOS, Android, Web, and Desktop platforms. This guarantees consistent features, interoperable designs, and uniform rendering across all platforms.

Prerequisites#

This version requires Flutter 3.16.0, Dart 2.12.0, iOS 16, Swift 5.10 (Xcode 15.4), and Android 7 as the minimum specifications. Ensure your pubspec.yml file contains the required dependencies:

dependencies:
    flutter:
        sdk: flutter
    imgly_editor: 1.34.0

Supported File Types#

The SDK supports various image formats for loading, editing, and exporting within your Flutter application, including:

• JPG
• PNG
• SVG
• WEBP
• TGA

Individual assets or entire designs can be exported as PDF, JPG, PNG, TGA or RBG8 binary files.

Understanding the Flutter Creative Editor SDK Architecture & API#

The following sections provide an overview of the key components of the Flutter Mobile Design Editor UI and its API architecture.

If you're ready to start integrating the SDK into your Flutter application, check out our Getting Started guide or dive into the guides section.

Design Editor UI#

The Flutter Design Editor UI is designed for intuitive and platform independent design creation. Here are the main components and customizable elements within the UI:

• Canvas: The central interaction area where users create and modify design content.
• Tool Bar: Offers essential editing options such as adjustments, filters, effects, or adding text, organized by relevance.
• Context Menu: Displays contextual editing options for selected elements, streamlining the user experience.

CreativeEngine#

CreativeEngine is the core of the Flutter Design Editor SDK, responsible for rendering and managing design scenes. It offers features such as:

• Scene Management: Create, load, save, and modify design scenes programmatically.
• Block Management: Manage design elements like shapes, text, and images.
• Asset Management: Load and manage assets such as images and SVGs from various sources.
• Variable Management: Define and manipulate variables for dynamic content within scenes.
• Event Handling: Subscribe to events like block creation or updates for real-time interaction.

Customizing the Flutter Design Editor#

The SDK provides a wide range of customisation choices, from simple configuration changes to more advanced customizations involving custom asset sources and hooking into UIEvents.

Role-Based Customization#

Switch between "Creator" and "Adopter" roles to control the editing experience. The "Creator" role allows setting constraints on template elements, while the "Adopter" role is focused on adapting these elements.

• Creator: Set constraints and manage template settings.
• Adopter: Edit elements within the bounds set by the Creator.

Basic Customizations#

Configure the editor by passing a configuration object during initialization:

    final settings = EditorSettings(
        license: "YOUR_LICENSE",
        userId: "YOUR_USER_ID",
        baseURL: URL(string: "https://cdn.img.ly/packages/imgly/cesdk-engine/1.34.0/assets")!
    );

Explore further customization options by visiting the configuration guide.

500M+

video and photo creations are powered by IMG.LY every month