hm21 / pro_image_editor

The pro_image_editor is a Flutter widget designed for image editing within your application. It provides a flexible and convenient way to integrate image editing capabilities into your Flutter project.
https://hm21.github.io/pro_image_editor/
BSD 3-Clause "New" or "Revised" License
94 stars 59 forks source link

[Feature request] Custom UI for layers and loading dialog #143

Closed thanglq1 closed 2 months ago

thanglq1 commented 2 months ago

Platforms

Android, iOS

Description

Hi @hm21. Please help add a config to customize theLoadingDialogTheme for both light and dark modes in material UI. Currently, it only supports Cupertino. Also, please add a config to change the color of IconsLayerInteraction or to customize the icon of IconsLayerInteraction Thank you!

Why

No response

hm21 commented 2 months ago

To customize the loading dialog in your style, you can also create your own custom widget like below.

  customWidgets: ImageEditorCustomWidgets(
      loadingDialog: Center(
      child: DefaultTextStyle(
        style: const TextStyle(),
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: FrostedGlassEffect(
            radius: BorderRadius.circular(16),
            child: Container(
              color: Colors.black26,
              constraints: const BoxConstraints(maxWidth: 280),
              padding: const EdgeInsets.all(16.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 20.0),
                    child: SizedBox(
                      height: 40,
                      width: 40,
                      child: FittedBox(
                        child: CircularProgressIndicator(
                          color: Colors.blue.shade200,
                        ),
                      ),
                    ),
                  ),
                  const Expanded(
                    child: Text(
                      'Please wait...',
                      style: TextStyle(fontSize: 16, color: Colors.white),
                      textAlign: TextAlign.start,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
)


The part with icon color on layerInteraction is currently not possible, but as you can see here "santoshgistto" is working on it.

thanglq1 commented 2 months ago

Oh, I got it. Thank you @hm21!

hm21 commented 2 months ago

@thanglq1 I'm not sure how fast “santoshgistto” will update the layer interaction because he planned to edit more stuff than just the layer colors. However, I add for you now the option that you can change the design of the buttons as below. This future is included in version 4.2.1.

configs: ProImageEditorConfigs(
  icons: const ImageEditorIcons(
    layerInteraction: IconsLayerInteraction(
      remove: Icons.delete,
    ),
  ),
  imageEditorTheme: const ImageEditorTheme(
    layerInteraction: ThemeLayerInteraction(
      buttonRemoveBackground: Colors.red,
    ),
  ),
thanglq1 commented 2 months ago

Great. Thank you!