UI issue - Bottom menu is hidden on IOS Chrome browser.

[ramanatnetsmartz]

Issue: UI issue - Bottom menu is hidden on IOS Chrome browser. (Screenshot attached)
Platform - Iphone Chrome Browser.

Code:

import 'dart:ui' as ui;
import 'dart:ui';

import 'package:crop_image/crop_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hoka/app_resources/app_dimensions.dart';
import 'package:loader_overlay/loader_overlay.dart';

class CustomImageCropper extends StatefulWidget {
  final Uint8List imageData;
  const CustomImageCropper({
    super.key,
    required this.imageData,
  });

  @override
  State<CustomImageCropper> createState() => _CustomImageCropperState();
}

class _CustomImageCropperState extends State<CustomImageCropper> {
  final controller = CropController(
    aspectRatio: 1,
    defaultCrop: const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EditPhoto'.tr),
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
        elevation: dimen0,
        leading: IconButton(
          icon: const Icon(Icons.close),
          onPressed: () {
            controller.rotation = CropRotation.up;
            controller.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
            controller.aspectRatio = 1.0;
            Navigator.pop(context);
          },
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: dimen10),
            child: IconButton(
              tooltip: null,
              onPressed: () async {
                Get.context!.loaderOverlay.show();
                Future.delayed(
                    const Duration(
                      seconds: 1,
                    ), () async {
                  ui.Image bitmap = await controller.croppedBitmap();
                  final data = await bitmap.toByteData(format: ImageByteFormat.png);
                  Uint8List croppedImageData = data!.buffer.asUint8List();
                  // ignore: use_build_context_synchronously
                  Get.context!.loaderOverlay.hide();
                  if (mounted) return Navigator.pop(context, croppedImageData);
                });
              },
              icon: const Icon(Icons.check),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: CropImage(
              controller: controller,
              alwaysShowThirdLines: true,
              image: Image.memory(widget.imageData),
              paddingSize: dimen25,
              alwaysMove: true,
              minimumImageSize: dimen100,
              //maximumImageSize: dimen500,
            ),
          ),
          _buildButtons()
        ],
      ),
    );
  }

  Widget _buildButtons() => Container(
    padding: const EdgeInsets.all(dimen10),
        color: Colors.black,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconButton(
              icon: const Icon(Icons.aspect_ratio),
              color: Colors.white,
              onPressed: _aspectRatios,
            ),
            IconButton(
              icon: const Icon(Icons.rotate_90_degrees_ccw_outlined),
              color: Colors.white,
              onPressed: _rotateLeft,
            ),
            IconButton(
              icon: const Icon(Icons.rotate_90_degrees_cw_outlined),
              color: Colors.white,
              onPressed: _rotateRight,
            ),
          ],
        ),
      );

  Future<void> _aspectRatios() async {
    final value = await showDialog<double>(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: Text('SelectAspectRatio'.tr),
          children: [
            // special case: no aspect ratio
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, -1.0),
              child: Text('Free'.tr),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 1.0),
              child: Text('Square'.tr),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 2.0),
              child: const Text('2:1'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 1 / 2),
              child: const Text('1:2'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 4.0 / 3.0),
              child: const Text('4:3'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 16.0 / 9.0),
              child: const Text('16:9'),
            ),
          ],
        );
      },
    );
    if (value != null) {
      controller.aspectRatio = (value == -1.0) ? null : value;

      controller.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
    }
  }

  Future<void> _rotateLeft() async => controller.rotateLeft();

  Future<void> _rotateRight() async => controller.rotateRight();
}

Flutter Doctor Summary
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.16.0, on macOS 14.1.1 23B81 darwin-arm64, locale en-IN)
✗ Downloaded executables cannot execute on host.
See flutter/flutter#6207 for more information.
Flutter requires the Rosetta translation environment on ARM Macs. Try running:
sudo softwareupdate --install-rosetta --agree-to-license

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 15.0.1)
✗ Unable to get list of installed Simulator runtimes.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] Android Studio (version 2022.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

[deakjahn]

And in what way is this specific to crop_image? You should probably try it without the app_dimension and loader_overlay packages to see whether they contribute to the issue.

[ramanatnetsmartz]

@deakjahn App dimensions are just the constants defined in a separate file, and tried without the loader overlay, still the result is same.

[deakjahn]

Does Chrome here mean that what you're trying is not a Flutter iOS app but a web app that you happen to view on an iOS device?

[ramanatnetsmartz]

@deakjahn Right. Trying on the web app.

[deakjahn]

I was afraid of that. :-) I don't have any Apple device and while I can test the example app running in the iOS simulator virtually, if need be, I really cannot go any farther than that.

The package obviously doesn't do anything with the bottom menu of the page in itself, so this must be some incompatibility in the styles that should be debugged and tested directly in the browser. I don't even know whether you have the same dev tools in a mobile web browser that you have in the desktop versions, though...