null check operator used on null value -

Question

I was trying to implement a feature that allows a user to select and display a picture from the gallery and to also use thier camera ,but everytime i try to navigate to the screen that does this i keep on getting "Null check operator used on null value"

here's code from the screen that's giving me this error-

    class _AddFoodItemState extends State<AddFoodItem> {
  final TextEditingController _descriptionController = TextEditingController();
  final TextEditingController _priceController = TextEditingController();
  final TextEditingController _ingredientsController = TextEditingController();

  Uint8List? _file;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 1.0,
        iconTheme: const IconThemeData(
          color: Colors.black,
        ),
        title: const Text(
          "Inventory",
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 60.0, horizontal: 16.0),
          child: Column(
            children: <Widget>[
              GestureDetector(
                onTap: () => _selectImage(context),
                child: Container(
                  margin: const EdgeInsets.only(),
                  width: MediaQuery.of(context).size.width,
                  height: 210.0,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: MemoryImage(_file!),
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Container(
                padding: const EdgeInsets.only(top: 10),
                width: MediaQuery.of(context).size.width,
                margin: const EdgeInsets.symmetric(horizontal: 20),
                child: TextFieldInput(
                  controller: _descriptionController,
                  labelText: 'Meal Name',
                ),
              ),
              Container(
                padding: const EdgeInsets.only(top: 10),
                width: MediaQuery.of(context).size.width,
                margin: const EdgeInsets.symmetric(horizontal: 20),
                child: TextFieldInput(
                  controller: _priceController,
                  labelText: 'price',
                ),
              ),
              Container(
                padding: const EdgeInsets.only(top: 10),
                width: MediaQuery.of(context).size.width,
                margin: const EdgeInsets.symmetric(horizontal: 20),
                child: TextFieldInput(
                  controller: _ingredientsController,
                  labelText: 'Meal description',
                ),
              ),
              const SizedBox(height: 28.0),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  mealSize(context),
                  const SizedBox(height: 9.0),
                  mealSize(context),
                  const SizedBox(height: 9.0),
                  mealSize(context),
                ],
              ),
              const SizedBox(height: 40.0),
              GestureDetector(
                  onTap: () {}, child: const Button(btnText: "Add Food Item")),
            ],
          ),
        ),
      ),
    );
  }

function to show a dialog box so i can select image or take picture:

_selectImage(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (context) => SimpleDialog(
        children: [
          SimpleDialogOption(
            onPressed: () async {
              Navigator.of(context).pop();
              Uint8List file = await pickImage(ImageSource.gallery);
              setState(() {
                _file = file;
              });
            },
            child: Row(
              children: const [
                Icon(Icons.folder),
                Text(
                  "Gallery",
                )
              ],
            ),
          ),

code of the function to open the dialogbox which gives me options to other pick from gallery or take picture

SimpleDialogOption(
            onPressed: () async {
              Navigator.of(context).pop();
              Uint8List file = await pickImage(ImageSource.camera);
              setState(() {
                _file = file;
              });
            },
            child: Row(
              children: const [
                Icon(Icons.image),
                Text(
                  "Camera",
                )
              ],
            ),
          ),
          SimpleDialogOption(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Row(
              children: const [
                Icon(Icons.cancel),
                Text(
                  "Cancel",
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

code of my pickImage function :

pickImage(ImageSource source) async {
  final ImagePicker imagePicker = ImagePicker();

  XFile? file = await imagePicker.pickImage(source: source);

  if (file != null) {
    return await file.readAsBytes();
  }
  print('no image selected');
}

showSnackBar(String content, BuildContext context) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(content),
    ),
  );
}

Answer 1

You'll get null error since you're using _file in widgets without checking whether its null.

Before you pick image using imagePicker the _file will contain null which will be used to show in widgets, leading to error as you shown.

So, you can use

                DecorationImage(
                  image: _file==null? <Any Placeholder ImageProvider> :MemoryImage(_file!),
                ),

and dont forget to call setState while data in _file is changed .ie, when image is being picked