web on moble issue
kiaxseventh opened this issue · 20 comments
hello dear
web version on desktop is ok and don't have any problem but web version on mobile devices have problem and show dark grey screen thank you for check and resolve it
i tried it with these flutter version :
2.0.0
2.0.1
2.0.2
2.0.3
2.0.4
2.0.5
Is it possible to give a small sample app where we can reproduce this issue. Are you having the same problem with the example app?
my test is your example app
Alright thanks I will test that first, keep you posted
A dark grey screen usualy is only shown in a release version. I already found an overflow errors with the bottom navigation on small devices. On what devices were you testing? Screensize would be usefull
Can you also send some screenshots or maybe a stacktrace. that would help as well
my example source just have simple image picker you can tride it for more test
i hope it helping you
main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: FirstScreenFilePicker(),
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
);
}
}
class FirstScreenFilePicker extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Crop Your Image Demo'),
),
body: Center(
child: Container(
margin: EdgeInsets.all(32),
child: FlatButton(
child: Text(
'Pick Image',
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () async {
PickedFile pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
Uint8List bytes = await pickedFile.readAsBytes();
Navigator.push(context, MaterialPageRoute(builder: (context) => CustomImagecrop(imageData: bytes)));
},
),
),
),
);
}
}
custom_image_crop.dart
class CustomImagecrop extends StatefulWidget {
CustomImagecrop({
this.imageData,
Key key,
}) : super(key: key);
final Uint8List imageData;
@override
_CustomImagecropState createState() => _CustomImagecropState();
}
class _CustomImagecropState extends State<CustomImagecrop> {
CustomImageCropController controller;
@override
void initState() {
super.initState();
controller = CustomImageCropController();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('title'),
brightness: Brightness.dark,
),
body: Column(
children: [
Expanded(
child: CustomImageCrop(
cropController: controller,
image: MemoryImage(widget.imageData, scale: 1),
shape: CustomCropShape.Circle,
),
),
Row(
children: [
IconButton(icon: const Icon(Icons.refresh), onPressed: controller.reset),
IconButton(
icon: const Icon(Icons.zoom_in),
onPressed: () => controller.addTransition(CropImageData(scale: 1.33))),
IconButton(
icon: const Icon(Icons.zoom_out),
onPressed: () => controller.addTransition(CropImageData(scale: 0.75))),
IconButton(
icon: const Icon(Icons.rotate_left),
onPressed: () => controller.addTransition(CropImageData(angle: -pi / 4))),
IconButton(
icon: const Icon(Icons.rotate_right),
onPressed: () => controller.addTransition(CropImageData(angle: pi / 4))),
IconButton(
icon: const Icon(Icons.crop),
onPressed: () async {
final image = await controller.onCropImage();
if (image != null) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => CropResulteScreen(memoryImage: image),
),
);
}
},
),
],
),
SizedBox(height: MediaQuery.of(context).padding.bottom),
],
),
);
}
}CropResulteScreen
class CropResulteScreen extends StatelessWidget {
CropResulteScreen({this.memoryImage});
final MemoryImage memoryImage;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Image.memory(memoryImage.bytes),
);
}
}pubspec.yaml
image_picker: ^0.7.4
custom_image_crop: ^0.0.2I was able to reproduce it with the example app.
- I created a release build
- released it to a public server
- and tested on a pixel 4xl
- grey screen was visible
It was not reproducible via the device toolbar in chrome. I will need to do some further investigation on what is realy happening
This is what it look like:
everything could be downloaded:
I will have to check with @ikbendewilliam why this is happening. I tought I could find a stacktrace somewhere but that is not the case. Thanks for reporting. Good catch!! Not sure when this will be fixed but I will try to figure out why this is happening only on mobile.
i tried again with this tag :
--dart-define=FLUTTER_WEB_USE_SKIA=true
grey screen was visible again
i tried again with this tag :
-web-renderer canvaskit
it is normal view without gray screen but it have another problem
it problem is overloads the image with an abnormal zoom position
Good to know. We will try that as well
Having the grey screen issue on Web with config -web-renderer html
When using image from file picker with MemoryImage Provider.
Is there any updates on this ?
There seems to be an issue with the ImageStreamListener. This is used to convert the imageProvider to a ui Image. unfortunately this returns an error (not throw an error, but the image is literally <error>:<function errorString(error) {> as the image). When we determine the size from this invalid image, we get 0 which means that the image is drawn with 0 width...
I'm sorry it's been idle on this package so long, we've had a major project going on that takes up all our time and we don't use the package internally atm. I'll see if I can find some time to fix this issue (if at all possible).
I have some good news and some bad news. The issue I described above isn't entirely correct. The image is something weird, but actually has a certain width and height (512x512 in the example). The drawing was done incorrect due to scaling in the z-direction (which is weird but ok). I fixed this, but the overlay isn't cropped yet correctly and the cutting of the image isn't working due to the issue of an incorrect ui image. I'l keep looking for the time being and if I manage to fix those, I'll create a new branch for you to test.
I've fixed the drawing, you can check it out here. The cropping itself is not working yet.
@kiaxseventh can you test without that specific branch?
This an problem in CanvasKit, will fix on the future update 3.5.0-1.0.pre.7
Check answer in
flutter/flutter#103803
Master/Pre release
3.5.0-1.0.pre.7 - cropping is working
Beta
3.4.0-17.2.pre - cropping is working
Stable
3.3.0 - cropper results in white/gray picture only
@VagnerWillian thanks for linking to the correct issue & testing on different envs. We will keep this one on our radar. @ikbendewilliam was already working on other fixes for this plugin.
@vanlooverenkoen thanks, this is a temporary solution, worked for me.
flutter run -d chrome --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false --release
for build
flutter build web --release --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false