web on moble issue

[kiaxseventh]

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

[vanlooverenkoen]

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?

[kiaxseventh]

my test is your example app

[vanlooverenkoen]

Alright thanks I will test that first, keep you posted

[vanlooverenkoen]

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

[vanlooverenkoen]

Can you also send some screenshots or maybe a stacktrace. that would help as well

[kiaxseventh]

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.2

[vanlooverenkoen]

I 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

[vanlooverenkoen]

This is what it look like:

everything could be downloaded:

[vanlooverenkoen]

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.

[kiaxseventh]

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

[vanlooverenkoen]

Good to know. We will try that as well

[vanshg395]

Having the grey screen issue on Web with config -web-renderer html

When using image from file picker with MemoryImage Provider.

[ngthailam]

Is there any updates on this ?

[ikbendewilliam]

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).

[ikbendewilliam]

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.

[ikbendewilliam]

I've fixed the drawing, you can check it out here. The cropping itself is not working yet.

[vanlooverenkoen]

@kiaxseventh can you test without that specific branch?

[VagnerWillian]

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

[vanlooverenkoen]

@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.

[VagnerWillian]

@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