Can you guide me in the right direction in order to implement onTap activate the text editor (like instagram story) and also....

[ember11498]

So I have 3 questions:

1. I want to onTap trigger the text editor so users can write whatever like in instagram stories.

2. How to customize the icons, per example the simple theme is very different from the wahtsapp theme where whatsapp has icons inside circular containers while the simple theme has like a fixed appbar and bottomnavigatorbar. I would like to make the icons more like the whatsapp theme like a stack on top of the image.

3. how to make the image be movable so users can crop similar to instagram stories?

What I have:

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

  @override
  State<CustomEditor> createState() => _CustomEditorState();
}

class _CustomEditorState extends State<CustomEditor>
    with ExampleHelperState<CustomEditor> {
  final String _url = 'https://picsum.photos/id/350/1500/3000';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListTile(
        onTap: () async {
          LoadingDialog loading = LoadingDialog();
          await loading.show(
            context,
            configs: const ProImageEditorConfigs(),
            theme: ThemeData.dark(),
          );
          if (!context.mounted) return;
          await precacheImage(NetworkImage(_url), context);
          if (context.mounted) await loading.hide(context);
          if (!context.mounted) return;
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => _buildEditor(),
            ),
          );
        },
        leading: const Icon(Icons.chat_outlined),
        title: const Text('WhatsApp Theme'),
        trailing: const Icon(Icons.chevron_right),
      ),
    );
  }

  Widget _buildEditor() {
    return ProImageEditor.network(
      _url,
      key: editorKey,
      callbacks: ProImageEditorCallbacks(
        onImageEditingStarted: () {},
        onImageEditingComplete: (image) async {
          context.pop();
        },
        onCloseEditor: () {
          context.pop();
        },
      ),
      configs: ProImageEditorConfigs(
          textEditorConfigs: TextEditorConfigs(
            customTextStyles: [
              GoogleFonts.roboto(),
              GoogleFonts.averiaLibre(),
              GoogleFonts.lato(),
              GoogleFonts.comicNeue(),
              GoogleFonts.actor(),
              GoogleFonts.odorMeanChey(),
              GoogleFonts.nabla(),
            ],
          ),
          designMode: platformDesignMode,
          imageEditorTheme: ImageEditorTheme(
            appBarBackgroundColor: Colors.transparent,
            background: context.background,
            helperLine: const HelperLineTheme(
              horizontalColor: Color.fromARGB(255, 129, 218, 88),
              verticalColor: Color.fromARGB(255, 129, 218, 88),
            ),
            emojiEditor: EmojiEditorTheme(
              backgroundColor: context.background,
            ),
            bottomBarBackgroundColor: context.primary,
            cropRotateEditor: CropRotateEditorTheme(
              cropCornerColor: context.primary,
              helperLineColor: context.secondary,
              cropCornerLength: 28,
              cropCornerThickness: 3,
            ),
          ),
          paintEditorConfigs: PaintEditorConfigs(
            initialColor: context.primary,
            initialStrokeWidth: 5,
          ),
          cropRotateEditorConfigs: const CropRotateEditorConfigs(
            enableDoubleTap: false,
          ),
          filterEditorConfigs: FilterEditorConfigs(
            filterList: [
              const FilterModel(
                name: "None",
                filters: [],
              ),
              FilterModel(
                name: "Pop",
                filters: [
                  ColorFilterAddons.colorOverlay(255, 225, 80, 0.08),
                  ColorFilterAddons.saturation(0.1),
                  ColorFilterAddons.contrast(0.05),
                ],
              ),
              FilterModel(
                name: "B&W",
                filters: [
                  ColorFilterAddons.grayscale(),
                  ColorFilterAddons.colorOverlay(100, 28, 210, 0.03),
                  ColorFilterAddons.brightness(0.1),
                ],
              ),
              FilterModel(
                name: "Cool",
                filters: [
                  ColorFilterAddons.addictiveColor(0, 0, 20),
                ],
              ),
              FilterModel(
                name: "Chrome",
                filters: [
                  ColorFilterAddons.contrast(0.15),
                  ColorFilterAddons.saturation(0.2),
                ],
              ),
              FilterModel(
                name: "Film",
                filters: [
                  ColorFilterAddons.brightness(.05),
                  ColorFilterAddons.saturation(-0.03),
                ],
              ),
            ],
          ),
          customWidgets: ImageEditorCustomWidgets()),
    );
  }
}

[hm21]

Hello, below is the answer to your questions:

1. This function was not possible, but I released version 3.0.15 where you have now new callbacks inside the mainEditorCallbacks. Below is the example how to do it now:

 return ProImageEditor.asset(
      ExampleConstants.of(context)!.demoAssetPath,
      key: editorKey,
      callbacks: ProImageEditorCallbacks(
        mainEditorCallbacks: MainEditorCallbacks(
          onTap: editorKey.currentState!.openTextEditor,
        ),
        onImageEditingStarted: onImageEditingStarted,
        onImageEditingComplete: onImageEditingComplete,
        onCloseEditor: onCloseEditor,
      ),
),

2. In this example you can see how to customize the editor with your icons, colors, translations and more.
   The WhatsApp example can be seen here.
3. You can check out this example that shows you how to do it.

All examples can be seen here, and I recommend you to check out the web-demo which contains all these examples.

Please let me know if you have more questions.