Canvas Customization and Image Addition、Selecting importHistoryDemoData After Image Load、Simplified Color Option for Text Editor

[iOSyan]

Hello, I have a few more requests that I would like to inquire about whether they can be addressed. Thank you very much!

1. I hope that when entering, it's a blank canvas where I can set the canvas size. I want to directly add a new image to the canvas, and only one image can be selected. Images should be able to be zoomed in, zoomed out, and rotated using two fingers. (Just like the UI design shows.)
2. Is it possible to select importHistoryDemoData after loading the image?
3. The text editor should not display color selection. Only one color should be defaulted.
   

[hm21]

Hi, I will answer your questions below directly in the same order.


1: To do this, you can follow the example here.


2: I'm not sure if I understand you correctly because importHistoryDemoData is just a demo state history to show the user how the import of a state history can look like. However, if you want to import or export the state history (for example Layers) you can do it like below:

editorKey.currentState!.importStateHistory(ImportStateHistory.fromJson('...'));
editorKey.currentState!.exportStateHistory(configs: ExportEditorConfigs());

You can also see a complete example here.


3: I released version 3.0.5 where you can replace the current color picker with SizedBox.shrink() which removes the color picker.

 return ProImageEditor.asset(
      ExampleConstants.of(context)!.demoAssetPath,
      key: editorKey,
      callbacks: ProImageEditorCallbacks(
        onImageEditingStarted: onImageEditingStarted,
        onImageEditingComplete: onImageEditingComplete,
        onCloseEditor: onCloseEditor,
      ),
      configs: ProImageEditorConfigs(
        customWidgets: ImageEditorCustomWidgets(
          colorPickerTextEditor: (setColor) {
            return const SizedBox.shrink();
          },
        ),
      ),
    );

[iOSyan]

Thank you for your response. The second and third points have resolved my issues.

Regarding the first point, I understand that in the MoveableBackgroundImageExample, I can use two fingers to manipulate the image.

However, more importantly, I hope to be able to enter the editing interface without selecting an image first. The editing interface should initially be a blank canvas where I can choose an image or start drawing after entering. The size of the canvas should be adjustable. Is there a way to achieve this? Thank you!

[hm21]

You can do it like in the example. The only thing you need to change is the part where it creates a transparent background, where you set your background color and size. Below is an example. And I released version 3.0.6 which will resolve an issue when you manually add a layer like we do in the example below.

// Dart imports:
import 'dart:async';
import 'dart:io';
import 'dart:math';
import 'dart:ui' as ui;

// Flutter imports:
import 'package:example/pages/pick_image_example.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

// Package imports:
import 'package:pro_image_editor/pro_image_editor.dart';

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

  @override
  State<MoveableBackgroundImageExample> createState() =>
      _MoveableBackgroundImageExampleState();
}

class _MoveableBackgroundImageExampleState
    extends State<MoveableBackgroundImageExample> {
  final _editorKey = GlobalKey<ProImageEditorState>();

  late final StreamController<bool> _openEditorStreamCtrl;
  late final StreamController _updateUIStreamCtrl;
  late final ScrollController _bottomBarScrollCtrl;
  late Uint8List _transparentBytes;

  /// Better sense of scale when we start with a large number
  final double _initScale = 20;
  final _bottomTextStyle = const TextStyle(fontSize: 10.0, color: Colors.white);

  final Size _backgroundCanvasSize = const Size(1000, 1000);
  final Color _backgroundCanvasColor = Colors.white;

  @override
  void initState() {
    _openEditorStreamCtrl = StreamController.broadcast();
    _updateUIStreamCtrl = StreamController.broadcast();
    _bottomBarScrollCtrl = ScrollController();
    super.initState();
  }

  @override
  void dispose() {
    _openEditorStreamCtrl.close();
    _updateUIStreamCtrl.close();
    _bottomBarScrollCtrl.dispose();
    super.dispose();
  }

  void _openPicker(ImageSource source) async {
    final ImagePicker picker = ImagePicker();
    final XFile? image = await picker.pickImage(source: source);

    if (image == null) return;

    Uint8List? bytes;

    bytes = await image.readAsBytes();

    if (!mounted) return;
    await precacheImage(MemoryImage(bytes), context);
    var decodedImage = await decodeImageFromList(bytes);

    if (!mounted) return;
    if (kIsWeb ||
        (!Platform.isWindows && !Platform.isLinux && !Platform.isMacOS)) {
      Navigator.pop(context);
    }

    _editorKey.currentState?.addLayer(
      StickerLayerData(
        offset: Offset.zero,
        scale: _initScale * 0.5,
        sticker: Image.memory(
          bytes,
          width: decodedImage.width.toDouble(),
          height: decodedImage.height.toDouble(),
          fit: BoxFit.cover,
        ),
      ),
    );
    setState(() {});
  }

  void _chooseCameraOrGallery() async {
    /// Open directly the gallery if the camera is not supported
    if (!kIsWeb &&
        (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {
      _openPicker(ImageSource.gallery);
      return;
    }

    if (!kIsWeb && Platform.isIOS) {
      showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) => CupertinoTheme(
          data: const CupertinoThemeData(),
          child: CupertinoActionSheet(
            actions: <CupertinoActionSheetAction>[
              CupertinoActionSheetAction(
                onPressed: () => _openPicker(ImageSource.camera),
                child: const Wrap(
                  spacing: 7,
                  runAlignment: WrapAlignment.center,
                  children: [
                    Icon(CupertinoIcons.photo_camera),
                    Text('Camera'),
                  ],
                ),
              ),
              CupertinoActionSheetAction(
                onPressed: () => _openPicker(ImageSource.gallery),
                child: const Wrap(
                  spacing: 7,
                  runAlignment: WrapAlignment.center,
                  children: [
                    Icon(CupertinoIcons.photo),
                    Text('Gallery'),
                  ],
                ),
              ),
            ],
            cancelButton: CupertinoActionSheetAction(
              isDefaultAction: true,
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Cancel'),
            ),
          ),
        ),
      );
    } else {
      showModalBottomSheet(
        context: context,
        showDragHandle: true,
        constraints: BoxConstraints(
          minWidth: min(MediaQuery.of(context).size.width, 360),
        ),
        builder: (context) {
          return Material(
            color: Colors.transparent,
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.only(bottom: 24, left: 16, right: 16),
                child: Wrap(
                  spacing: 45,
                  runSpacing: 30,
                  crossAxisAlignment: WrapCrossAlignment.center,
                  runAlignment: WrapAlignment.center,
                  alignment: WrapAlignment.spaceAround,
                  children: [
                    MaterialIconActionButton(
                      primaryColor: const Color(0xFFEC407A),
                      secondaryColor: const Color(0xFFD3396D),
                      icon: Icons.photo_camera,
                      text: 'Camera',
                      onTap: () => _openPicker(ImageSource.camera),
                    ),
                    MaterialIconActionButton(
                      primaryColor: const Color(0xFFBF59CF),
                      secondaryColor: const Color(0xFFAC44CF),
                      icon: Icons.image,
                      text: 'Gallery',
                      onTap: () => _openPicker(ImageSource.gallery),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    }
  }

  Future<void> _createBackgroundCanvas() async {
    double width = _backgroundCanvasSize.width;
    double height = _backgroundCanvasSize.height;

    final recorder = ui.PictureRecorder();
    final canvas = Canvas(
        recorder, Rect.fromLTWH(0, 0, width.toDouble(), height.toDouble()));
    final paint = Paint()..color = _backgroundCanvasColor;
    canvas.drawRect(
        Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble()), paint);

    final picture = recorder.endRecording();
    final img = await picture.toImage(width.toInt(), height.toInt());
    final pngBytes = await img.toByteData(format: ui.ImageByteFormat.png);

    _transparentBytes = pngBytes!.buffer.asUint8List();
  }

  Size get _editorSize => Size(
        MediaQuery.of(context).size.width -
            MediaQuery.of(context).padding.horizontal,
        MediaQuery.of(context).size.height -
            kToolbarHeight -
            kBottomNavigationBarHeight -
            MediaQuery.of(context).padding.vertical,
      );

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () async {
        LoadingDialog loading = LoadingDialog();
        await loading.show(
          context,
          configs: const ProImageEditorConfigs(),
          theme: ThemeData.dark(),
        );

        await _createBackgroundCanvas();

        if (context.mounted) await loading.hide(context);

        if (!context.mounted) return;
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => _buildEditor(),
          ),
        );
      },
      leading: const Icon(Icons.pan_tool_alt_outlined),
      title: const Text('Movable background image'),
      subtitle: const Text('Includes how to add multiple images.'),
      trailing: const Icon(Icons.chevron_right),
    );
  }

  Widget _buildEditor() {
    return LayoutBuilder(builder: (context, constraints) {
      return ProImageEditor.memory(
        _transparentBytes,
        key: _editorKey,
        callbacks: ProImageEditorCallbacks(
          onImageEditingComplete: (bytes) async {
            print('Done ${bytes.length}');
          },
          mainEditorCallbacks: MainEditorCallbacks(
            onOpenSubEditor: (editor) => _openEditorStreamCtrl.add(true),
            onCloseSubEditor: (editor) => _openEditorStreamCtrl.add(false),
            onUpdateUI: () {
              _updateUIStreamCtrl.add(null);
            },
          ),
        ),
        configs: ProImageEditorConfigs(
            designMode: platformDesignMode,
            imageGenerationConfigs: ImageGeneratioConfigs(
              generateOnlyDrawingBounds: true,

              /// Set the pixel ratio manually. You can also set this value higher than the device pixel ratio for higher quality.
              customPixelRatio: max(
                _editorSize.width / MediaQuery.of(context).size.width,
                _editorSize.height / MediaQuery.of(context).size.height,
              ),
            ),

            /// Crop-Rotate, Filter and Blur editors are not supported
            cropRotateEditorConfigs:
                const CropRotateEditorConfigs(enabled: false),
            filterEditorConfigs: const FilterEditorConfigs(enabled: false),
            blurEditorConfigs: const BlurEditorConfigs(enabled: false),
            customWidgets: ImageEditorCustomWidgets(
              bottomNavigationBar: _bottomNavigationBar(constraints),
            ),
            imageEditorTheme: const ImageEditorTheme(
              uiOverlayStyle: SystemUiOverlayStyle(
                statusBarColor: Colors.black,
              ),
              background: Colors.transparent,
              paintingEditor:
                  PaintingEditorTheme(background: Colors.transparent),

              /// Optionally remove background
              /// cropRotateEditor: CropRotateEditorTheme(background: Colors.transparent),
              /// filterEditor: FilterEditorTheme(background: Colors.transparent),
              /// blurEditor: BlurEditorTheme(background: Colors.transparent),
            ),
            stickerEditorConfigs: StickerEditorConfigs(
              enabled: false,
              initWidth:
                  (_editorSize.aspectRatio > _backgroundCanvasSize.aspectRatio
                          ? _editorSize.height
                          : _editorSize.width) /
                      _initScale,
              buildStickers: (setLayer, scrollController) {
                // Optionally your code to pick layers
                return const SizedBox();
              },
            )),
      );
    });
  }

  Widget _bottomNavigationBar(BoxConstraints constraints) {
    return StreamBuilder(
      stream: _updateUIStreamCtrl.stream,
      builder: (_, __) {
        return Scrollbar(
          controller: _bottomBarScrollCtrl,
          scrollbarOrientation: ScrollbarOrientation.top,
          thickness: isDesktop ? null : 0,
          child: BottomAppBar(
            /// kBottomNavigationBarHeight is important that helperlines will work
            height: kBottomNavigationBarHeight,
            color: Colors.black,
            padding: EdgeInsets.zero,
            child: Center(
              child: SingleChildScrollView(
                controller: _bottomBarScrollCtrl,
                scrollDirection: Axis.horizontal,
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    minWidth: min(constraints.maxWidth, 500),
                    maxWidth: 500,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        FlatIconTextButton(
                          label: Text('Add Image', style: _bottomTextStyle),
                          icon: const Icon(
                            Icons.image_outlined,
                            size: 22.0,
                            color: Colors.white,
                          ),
                          onPressed: _chooseCameraOrGallery,
                        ),
                        FlatIconTextButton(
                          label: Text('Paint', style: _bottomTextStyle),
                          icon: const Icon(
                            Icons.edit_rounded,
                            size: 22.0,
                            color: Colors.white,
                          ),
                          onPressed:
                              _editorKey.currentState?.openPaintingEditor,
                        ),
                        FlatIconTextButton(
                          label: Text('Text', style: _bottomTextStyle),
                          icon: const Icon(
                            Icons.text_fields,
                            size: 22.0,
                            color: Colors.white,
                          ),
                          onPressed: _editorKey.currentState?.openTextEditor,
                        ),
                        FlatIconTextButton(
                          label: Text('Emoji', style: _bottomTextStyle),
                          icon: const Icon(
                            Icons.sentiment_satisfied_alt_rounded,
                            size: 22.0,
                            color: Colors.white,
                          ),
                          onPressed: _editorKey.currentState?.openEmojiEditor,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

[iOSyan]

This is very helpful, thank you!

Now I have a small issue: when adding an image from the gallery, nothing happens after selecting the image. I have to swipe the screen for the image to display. This happens on an Android phone.

Screenrecorder-2024-06-11-11-00-47-536.mp4

[hm21]

There was a problem in version < 3.0.6 that setState wasn't called when adding a layer. Are you already using the latest version 3.0.8 and this problem still exists there? If not, you can update and try again, it should work then.

[iOSyan]

It's work, thanks!