Getting Error Unexpected null value when clicked on onTap function of Inkwell

Question

I am getting following null value error when I try to click on Inkwell. I don't know where I am getting the error and I am not able to fix this issue. I tried many things but nothing works. Error:

======== Exception caught by gesture ===============================================================
The following TypeErrorImpl was thrown while handling a gesture:
Unexpected null value.

When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 294:49           throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 855:63       nullCheck
packages/get/get_navigation/src/extension_navigation.dart 36:39                        ExtensionBottomSheet.bottomSheet
packages/agriplus/Registration%20Screens/Signup%2520Screens/signup_screen_5.dart 48:9  imagePickerOption
packages/flutter/src/material/ink_well.dart 1154:21                                    handleTap
packages/flutter/src/gestures/recognizer.dart 275:24                                   invokeCallback
packages/flutter/src/gestures/tap.dart 654:11                                          handleTapUp
packages/flutter/src/gestures/tap.dart 311:5                                           [_checkUp]
packages/flutter/src/gestures/tap.dart 244:7                                           handlePrimaryPointer
packages/flutter/src/gestures/recognizer.dart 630:9                                    handleEvent
packages/flutter/src/gestures/pointer_router.dart 98:12                                [_dispatch]
packages/flutter/src/gestures/pointer_router.dart 143:9                                <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/linked_hash_map.dart 21:13               forEach
packages/flutter/src/gestures/pointer_router.dart 141:17                               [_dispatchEventToRoutes]
packages/flutter/src/gestures/pointer_router.dart 127:7                                route
packages/flutter/src/gestures/binding.dart 488:19                                      handleEvent
packages/flutter/src/gestures/binding.dart 468:14                                      dispatchEvent
packages/flutter/src/rendering/binding.dart 333:11                                     dispatchEvent
packages/flutter/src/gestures/binding.dart 413:7                                       [_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 376:5                                       handlePointerEvent
packages/flutter/src/gestures/binding.dart 323:7                                       [_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 292:9                                       [_handlePointerDataPacket]
lib/_engine/engine/platform_dispatcher.dart 1319:13                                    invoke1
lib/_engine/engine/platform_dispatcher.dart 303:5                                      invokeOnPointerDataPacket
lib/_engine/engine/pointer_binding.dart 168:39                                         [_onPointerData]
lib/_engine/engine/pointer_binding.dart 791:20                                         <fn>
lib/_engine/engine/pointer_binding.dart 720:14                                         <fn>
lib/_engine/engine/pointer_binding.dart 317:16                                         loggedHandler
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 574:37       _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 579:39       dcall
Handler: "onTap"
Recognizer: TapGestureRecognizer#c150a
  debugOwner: GestureDetector
  state: possible
  won arena
  finalPosition: Offset(320.8, 411.0)
  finalLocalPosition: Offset(20.8, 15.1)
  button: 1
  sent tap down
====================================================================================================

Relevant Part of code: This are the function I created above:

  File? pickedImage;

  void imagePickerOption() {
    Get.bottomSheet(
      SingleChildScrollView(
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0),
          ),
          child: Container(
            color: Colors.white,
            height: 250,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Text(
                    "Select Image From",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  ElevatedButton.icon(
                    onPressed: () async {
                      pickImage(
                        ImageSource.camera,
                      );
                    },
                    icon: const Icon(
                      Icons.camera,
                      color: Colors.white,
                    ),
                    label: const Text(
                      "CAMERA",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  ElevatedButton.icon(
                    onPressed: () async {
                      pickImage(
                        ImageSource.gallery,
                      );
                    },
                    icon: const Icon(
                      Icons.image,
                      color: Colors.white,
                    ),
                    label: const Text(
                      "GALLERY",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  ElevatedButton.icon(
                    onPressed: () {
                      Get.back();
                    },
                    icon: const Icon(
                      Icons.close,
                      color: Colors.white,
                    ),
                    label: const Text(
                      "CANCEL",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  void pickImage(ImageSource imageType) async {
    try {
      final photo = await ImagePicker().pickImage(source: imageType);
      if (photo == null) return;
      final tempImage = File(photo.path);
      setState(() {
        pickedImage = tempImage;
      });
      Get.back();
    } catch (error) {
      debugPrint(error.toString());
    }
  }

When I click on Edit Icon (InkWell) I got error:

Stack(
                children: [
                  Container(
                    width: 120,
                    height: 120,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 4,
                        color: Theme.of(context).scaffoldBackgroundColor,
                      ),
                      boxShadow: [
                        BoxShadow(
                          spreadRadius: 2,
                          blurRadius: 10,
                          color: Colors.black.withOpacity(0.1),
                          offset: const Offset(0, 10),
                        )
                      ],
                      shape: BoxShape.circle,
                    ),
                    child: ClipOval(
                      child: Image.network(
                        profilePicture,
                        width: 120,
                        height: 120,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    right: 0,
                    child: InkWell(
                      onTap: imagePickerOption,
                      child: Container(
                        height: 40,
                        width: 40,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            width: 4,
                            color:
                                Theme.of(context).scaffoldBackgroundColor,
                          ),
                          color: const Color(0XFF00B251),
                        ),
                        child: const Icon(
                          Icons.edit_outlined,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),

Answer 1

Get.bottomSheet is treated as a route and needs BuildContext to be pushed onto the stack by Navigator. Unlike showModalBottomSheet where context must be provided as an argument, Get provides the context by GetMaterialApp.

Example native Material

showModalBottomSheet(
  context: context,
  builder: (context) => const FlutterLogo(size: 400),
);

Solution to Get.bottomSheet context null error of get: ^4.6.6 library at line 36 of extension_navigation.dart

// Change
MaterialApp()
// to
GetMaterialApp()