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