Version 4.0.0 new customWidgets and removed hardcode Whatsapp design

[hm21]

Over the past few days/weeks, many of you have asked me to add more “custom widgets” and let you interact with them more. Some of you asked me also how to change the WhatsApp design.
So I decided to completely rewrite the “custom widgets” part and remove the hard-coded WhatsApp design. This decision brings with it some breaking-changes, and below I will explain a bit more about it and what it means for you.

New “custom widgets”

Over time, the amount of custom widgets grows more and more. That's why it's time to separate them from the specific editor. This means that now you can find all widgets in a subclass of the specific editor. For example, widgets from the paintEditor can be found in the class CustomWidgetsPaintEditor. This will make it easier to customize the specific editor.

Before, it was a bit difficult to handle the state communication between the editor and the custom widget. The problem here is that the custom widget is generated outside the editor, so it will not be updated when we rebuild the editor. To make it a lot simpler, I created the widgets ReactiveCustomWidget and ReactiveCustomAppbar. Each custom widget that needs to be rebuilt now also provides a rebuildStream. You can add this stream directly to the new reactive widget that will update your custom widget. Below you can see how this works:

bottomBar: (cropRotateEditor, rebuildStream) =>
    ReactiveCustomWidget(
        stream: rebuildStream,
        builder: (_) => FrostedGlassCropRotateToolbar(
          configs: cropRotateEditor.configs,
          onCancel: cropRotateEditor.close,
          onRotate: cropRotateEditor.rotate,
          onDone: cropRotateEditor.done,
          onReset: cropRotateEditor.reset,
          openAspectRatios: cropRotateEditor.openAspectRatioOptions,
        ),
),

As you can see in the example, it's no longer necessary to work with a global stream that you trigger with the updateUI callbacks. In this example, you can also see that you can now access the editor state directly without using the global key from the editor.

Remove hard-coded WhatsApp-Design

I think reading this will be a shock for most of you if you use the WhatsApp style. And to be honest, when you have an app which runs with it will it be a bit painful for you now because you need to work with custom widgets, but later I will explain more about it. For now, let's talk about why I removed the hard-coded WhatsApp design. I will now list below a few points that are problematic on the hard-coded WhatsApp design.

• Every time I add new designs, like the new frosted glass design, the editor gets bigger and bigger, even if you haven't used any of them. When you run a release build normally, if you haven't changed anything, it will automatically remove unused code. The problem is that if the design is hard-coded, it will not be removed.
• The more designs I add, the more it will affect the performance because I have to always check in the editor which widget it should build.
• The editor code of each subeditor will also grow massively the more designs I add because the designs also have different ways where the widgets are rendered which require more logic.
• The hard-coded designs do not support all configurations or require special configurations than the simple editor. This can confuse users if, for example, they want to enable the blur editor but the hard-coded WhatsApp design doesn't support this editor.

So I made the decision that I needed to extend the custom widgets that any logic and code can be extern from the image editor, but create an entirely different design to the default editor. This allows you now to customize also the WhatsApp design completely by yourself or create a complicated new design by yourself.

Let's talk now about it, how to create the WhatsApp or any other design.
Of course, it is a lot of work to create all the widgets for the WhatsApp design. So that you don't have to write all the code by yourself, you can directly import the pre-created widgets from the specific theme. In the WhatsApp design, the import will look like this import 'package:pro_image_editor/designs/whatsapp/whatsapp.dart'. The full code how to create the WhatsApp design that it look like before can you checkout here.

For any clarifications or ideas, please let me know below.