hm21
commented
1 month ago Hi,
The problem is that when you open the editor as a new page, it's required that you call Navigator.pop inside the onImageEditingComplete function. The new page should be opened inside onCloseEditor so that the loading-dialog does not close it directly. I know it's sometimes a bit confusing why the loading-dialog closes after the onImageEditingComplete function has been called. The idea here is that when you upload the final image to your server, which will definitely take some time, the same loading-dialog will still be active for the generation and upload part.
Anyway, I had a small issue with the loading-dialog that it was close to early, but in my tests it didn't affect anything. However, that everything will work fine, I still recommend you to update to version 4.3.4.
Below is a demo code but without the package go_router. Please let me know it in the case it didn't work for you.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pro_image_editor/pro_image_editor.dart';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Pro-Image-Editor',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade800),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Uint8List? _image;
_openCropRotateEditor() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return CropRotateEditor.network(
'https://picsum.photos/id/230/2000',
initConfigs: CropRotateEditorInitConfigs(
theme: ThemeData.dark(),
convertToUint8List: true,
configs: const ProImageEditorConfigs(
cropRotateEditorConfigs: CropRotateEditorConfigs(
initAspectRatio: 16 / 9,
canChangeAspectRatio: false,
canRotate: false,
),
),
onImageEditingComplete: (Uint8List image) async {
_image = image;
Navigator.pop(context);
},
onCloseEditor: () {
if (_image != null) _openMainEditor();
},
),
);
},
),
);
}
_openMainEditor() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ProImageEditor.memory(
_image!,
configs: const ProImageEditorConfigs(
cropRotateEditorConfigs: CropRotateEditorConfigs(enabled: false),
),
callbacks: ProImageEditorCallbacks(
onImageEditingComplete: (Uint8List image) async {
_image = image;
Navigator.pop(context);
/// TODO: Upload your image...
},
onCloseEditor: () {
if (_image != null) _openPreviewEditor();
},
),
);
},
),
);
}
_openPreviewEditor() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Scaffold(
appBar: AppBar(
title: const Text('Preview'),
),
body: Center(
child: Image.memory(_image!),
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FilledButton(
onPressed: _openCropRotateEditor,
child: const Text('Test'),
),
),
);
}
}
gd08xxx
Package Version
^4.3.3
Flutter Version
3.22.2
Platforms
Android, iOS
How to reproduce?
I want the user to capture/select an image, navigate to a crop screen (forcing it to crop 16:9), navigate to an edit screen to let the user edit the image and show a preview screen.
There is a problem with the loading dialog that comes with the package.
What I expect: 1) Capture/select image 2) Navigate to CropScreen(force 16:9) 3) Finished cropping and press check mark on top right [Loading shows and dismiss] 4) Navigate to EditScreen with onImageEditingComplete 5) Finished editing and press checkmark on top right [Loading shows and dismiss] 6) Navigate to PreviewScreen with onImageEditingComplete
What happened: 1) Capture/select image 2) Navigate to CropScreen(force 16:9) 3) Finished cropping and press check mark on top right [Loading keeps showing] 4) Navigate to EditScreen with onImageEditingComplete 5) Need to dismiss loading dialog before can interact with EditScreen 6) Finished editing and press checkmark on top right [Loading keeps showing] 7) Navigate to PreviewScreen with onImageEditingComplete 8) Need to dismiss loading dialog before can interact with PreviewScreen
I saw the readme file regarding async in onImageEditingComplete and the loading dialog, however my IDE forces me to use async because your return type is Future Function(Uint8List bytes)
Logs (optional)
No response
Example code (optional)
EditScreen buildBody()