-
|
Hey, love the package and really appreciate the work you have put in. Question, Is there a way to build a viewer version with primary purpose being to import changes JSON and display them. I want to use this package to allow presenter to make changes and for those to, on a realtime basis, reflect on participants screens. Exporting an image in such a case is not feasible. Would love to know your thoughts. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
Thanks, it's nice to hear that you like my package and appreciate my work, that means a lot to me :) I never tested it in a real-time case, but I think it should be possible. Below is the example with two widgets that should help you realize this project. Btw, I will move your question to the Discussions tab now because I prefer that tab for questions. // Flutter imports:
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
// Package imports:
import 'package:pro_image_editor/pro_image_editor.dart';
// ignore: constant_identifier_names
const DEMO_IMAGE = 'https://picsum.photos/id/230/2000';
class RealtimeViewerExample extends StatefulWidget {
const RealtimeViewerExample({super.key});
@override
State<RealtimeViewerExample> createState() => _RealtimeViewerExampleState();
}
class _RealtimeViewerExampleState extends State<RealtimeViewerExample> {
final _editorKey = GlobalKey<ProImageEditorState>();
@override
void initState() {
_connectToRealtimeEvents();
super.initState();
}
@override
void dispose() {
// TODO: Don't forget to close your realtime connection
super.dispose();
}
void _connectToRealtimeEvents() {
String json = '{}';
/// TODO: Listen to realtime changes and import it like below.
if (kDebugMode) debugPrint('Import changes');
_editorKey.currentState?.importStateHistory(
ImportStateHistory.fromJson(
json,
// Optinal configs
configs: const ImportEditorConfigs(
recalculateSizeAndPosition: true,
mergeMode: ImportEditorMergeMode.replace,
),
),
);
}
void _openViewerEditor() async {
await precacheImage(const NetworkImage(DEMO_IMAGE), context);
if (!mounted) return;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => _buildEditor(),
),
);
}
@override
Widget build(BuildContext context) {
return ListTile(
onTap: _openViewerEditor,
leading: const Icon(Icons.smart_display_outlined),
title: const Text('Realtime-Viewer'),
trailing: const Icon(Icons.chevron_right),
);
}
Widget _buildEditor() {
/// There can be problems if the aspect ratio is not the same as in the
/// presenter view, so I recommend that you make sure the editor has the
/// same aspect ratio as the presenter.
return ProImageEditor.network(
DEMO_IMAGE,
key: _editorKey,
callbacks: const ProImageEditorCallbacks(),
configs: ProImageEditorConfigs(
designMode: platformDesignMode,
customWidgets: ImageEditorCustomWidgets(
mainEditor: CustomWidgetsMainEditor(
appBar: (editor, rebuildStream) => ReactiveCustomAppbar(
stream: rebuildStream,
builder: (_) => AppBar(
title: const Text('Realtime-Viewer'),
),
),
/// I hide the bottom bar in the viewer because in the viewer it's
/// not needed for editing.
bottomBar: (editor, rebuildStream, key) => ReactiveCustomWidget(
stream: rebuildStream,
builder: (_) => const SizedBox.shrink(),
),
/// Wrap the full body content inside `IgnorePointer` that the user
/// can't move layers. Optionally is it maybe also usefull when your
/// users can zoom so you can also wrap it with `InteractiveViewer`.
wrapBody: (editor, rebuildStream, content) {
return IgnorePointer(
child: content,
);
},
/// Optionally add elements to the body. For example, show a
/// progress-spinner each time changes are made.
/// bodyItems: (editor, rebuildStream) => [
/// ReactiveCustomWidget(
/// builder: (_) => const CircularProgressIndicator(),
/// stream: rebuildStream,
/// ),
/// ],
),
),
/// Optionally change the background color like below
imageEditorTheme: ImageEditorTheme(
background: Colors.blue.shade100,
)
/// Optionally open the editor directly with a state history from the
/// presenter like below
/// stateHistoryConfigs: StateHistoryConfigs(
/// initStateHistory: ImportStateHistory.fromJson(json),
/// ),
),
);
}
}
class RealtimePresenterExample extends StatefulWidget {
const RealtimePresenterExample({super.key});
@override
State<RealtimePresenterExample> createState() =>
_RealtimePresenterExampleState();
}
class _RealtimePresenterExampleState extends State<RealtimePresenterExample> {
final _editorKey = GlobalKey<ProImageEditorState>();
void _sendRealtimeEvents() async {
if (kDebugMode) debugPrint('Start export');
var export = await _editorKey.currentState?.exportStateHistory(
configs: const ExportEditorConfigs(
/// Send only the current view
historySpan: ExportHistorySpan.current,
/// Optionally disable some things from being sent. Keep in mind that
/// sending stickers will slow down the export progress because the
/// editor has to convert them to png images first.
exportSticker: true,
),
);
var sendJson = await export?.toJson();
/// TODO: Send your JSON `sendJson` over your real-time connection to the viewers.
if (kDebugMode) debugPrint('Done export');
}
void _openPresenterEditor() async {
await precacheImage(const NetworkImage(DEMO_IMAGE), context);
if (!mounted) return;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => _buildEditor(),
),
);
}
@override
Widget build(BuildContext context) {
return ListTile(
onTap: _openPresenterEditor,
leading: const Icon(Icons.present_to_all_outlined),
title: const Text('Realtime-Presenter'),
trailing: const Icon(Icons.chevron_right),
);
}
Widget _buildEditor() {
/// There can be problems if the aspect ratio is not the same as in the
/// presenter view, so I recommend that you make sure the editor has the
/// same aspect ratio as the presenter.
return ProImageEditor.network(
DEMO_IMAGE,
key: _editorKey,
callbacks: ProImageEditorCallbacks(
onImageEditingComplete: (bytes) async {
/// Handle the final image => Maybe upload it to your server.
},
/// Optionally send changes directly when changes occur. Below in
/// `customWidgets` you can see the example of how to add a button to
/// send manually for more control for the presenter.
/// mainEditorCallbacks: MainEditorCallbacks(
/// onAddLayer: (value) => _sendRealtimeEvents(),
/// onUpdateLayer: (value) => _sendRealtimeEvents(),
/// onUndo: _sendRealtimeEvents,
/// onRedo: _sendRealtimeEvents,
/// ),
/// paintEditorCallbacks: PaintEditorCallbacks(
/// onDrawingDone: _sendRealtimeEvents,
/// onUndo: _sendRealtimeEvents,
/// onRedo: _sendRealtimeEvents,
/// ),
/// More editor callbacks...
),
configs: ProImageEditorConfigs(
designMode: platformDesignMode,
/// Update the appbar with a button that the presenter can send it to the
/// viewers
customWidgets: ImageEditorCustomWidgets(
mainEditor: CustomWidgetsMainEditor(
appBar: (editor, rebuildStream) => editor.selectedLayerIndex < 0
? ReactiveCustomAppbar(
stream: rebuildStream,
builder: (_) => _buildCustomAppBar(editor),
)
: null,
),
),
),
);
}
AppBar _buildCustomAppBar(ProImageEditorState editor) {
return AppBar(
automaticallyImplyLeading: false,
foregroundColor: Colors.white,
backgroundColor: Colors.black,
actions: [
IconButton(
tooltip: 'Cancel',
padding: const EdgeInsets.symmetric(horizontal: 8),
icon: const Icon(Icons.close),
onPressed: editor.closeEditor,
),
const Spacer(),
/// Create your custom button to send realtime events to the viewers
IconButton(
tooltip: 'Send to viewers',
padding: const EdgeInsets.symmetric(horizontal: 8),
icon: const Icon(Icons.send),
onPressed: _sendRealtimeEvents,
),
const Spacer(),
IconButton(
tooltip: 'Undo',
padding: const EdgeInsets.symmetric(horizontal: 8),
icon: Icon(
Icons.undo,
color: editor.canUndo == true
? Colors.white
: Colors.white.withAlpha(80),
),
onPressed: editor.undoAction,
),
IconButton(
tooltip: 'Redo',
padding: const EdgeInsets.symmetric(horizontal: 8),
icon: Icon(
Icons.redo,
color: editor.canRedo == true
? Colors.white
: Colors.white.withAlpha(80),
),
onPressed: editor.redoAction,
),
IconButton(
tooltip: 'Done',
padding: const EdgeInsets.symmetric(horizontal: 8),
icon: const Icon(Icons.done),
iconSize: 28,
onPressed: editor.doneEditing,
),
],
);
}
}
|
Beta Was this translation helpful? Give feedback.
-
|
That was quick !! Thanks for the code, will review it. I also want to test performance in a flutter web app setup, if I have say 3, 4 or 5 ProImage viewers widgets on screen at the same time. BTW I noticed significant first load lag when I implemented FrostedGlass theme. The editor would become non responsive for a few seconds. Not sure if anyone experienced it before. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, I'm curious about the performance when you display 5 viewers at the same time, but I think as long as they're just being used as viewers, it shouldn't affect performance. The important thing when using multiple viewers is that you disable multithreading because it's not necessary that every editor will connect to web workers (In dart native platforms will it setup multiple isolates). You can also do this in the configs as below: configs: ProImageEditorConfigs(
imageGenerationConfigs: const ImageGeneratioConfigs(
generateImageInBackground: false,
generateInsideSeparateThread: false,
/// If you still want your users to be able to generate the
/// the final image, remove `generateInsideSeparateThread` but add the
/// code below.
/// processorConfigs: ProcessorConfigs(
/// processorMode: ProcessorMode.minimum,
/// ),
),
),This is the first time I heard about the FrostedGlass “load lag”. Does it only happen on the web or also on the native Dart platforms? If the lag is only in the FrostedGlass theme, the problem is that the widgets are wrapped in `BackdropFilter` which might negatively impact the performance. The good thing is you can copy all the widgets from [here](https://github.com/hm21/pro_image_editor/tree/stable/lib/designs/frosted_glass) and just update the widget [frosted_glass_effect](https://github.com/hm21/pro_image_editor/blob/stable/lib/designs/frosted_glass/frosted_glass_effect.dart) where you remove `BackdropFilter` and maybe just add a white background or whatever you like. |
Beta Was this translation helpful? Give feedback.
-
|
Figured out the lag, it was Google fonts. The first load with customtextstyles mentioning a bunch of Google fonts freezes the UI while it loads, at least on the browser where I am testing it. Removed it and now works no issues. |
Beta Was this translation helpful? Give feedback.
-
|
Another couple of issues / questions
Struggling with both .. thanks |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
Hey, Here is the error that occurs the first time/image where cancel button is pressed. From 2nd image on the cancel button works as expected. The below error only happens the first time I tap cancel |
Beta Was this translation helpful? Give feedback.
-
|
Can you post a minimal code example how I can reproduce it? |
Beta Was this translation helpful? Give feedback.
Figured out the lag, it was Google fonts. The first load with customtextstyles mentioning a bunch of Google fonts freezes the UI while it loads, at least on the browser where I am testing it. Removed it and now works no issues.