lateinitializationerror field imageFile has not been initialized

Question

I am trying to upload an image from the gallery in flutter web project. However when I click on the upload button, I get an error "======== Exception caught by widgets library ===============================================LateInitializationError: Field imageFile has not been initialized." What could be causing this error? Here is my code:

final picker = ImagePicker();
late File imageFile;

Future chooseImage(ImageSource source) async {
  final pickedFile = await picker.pickImage(source: source);
  setState(() {
    imageFile = File(pickedFile!.path);
  });
}

Container(
    child: imageFile != null ?
    Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: FileImage(imageFile),
        ),
        borderRadius: BorderRadius.circular(20)),
      padding: const EdgeInsets.all(15.0),
    ) :
    Padding(
      padding: const EdgeInsets.all(15.0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20.0),
          child: Image.asset(
            defaultPic,
            height: 250.0,
            width: 300.0,
            fit: BoxFit.cover,
          ),
        ),
    ),
  ),
  ElevatedButton(
    onPressed: () {
      chooseImage(ImageSource.gallery);
    },
    child: Text('Upload Picture'),
    style: ElevatedButton.styleFrom(
      primary: Colors.red,
      elevation: 3,
      shape: new RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(50.0),
      ),
    ),
  )

Solution

I create a bool variable for making this work:

PickedFile? pickedImage;
late File imageFile;    
bool _load = false;

and the future will be like this:

    Future chooseImage(ImageSource source) async {
          final pickedFile = await picker.pickImage(source: source);
          setState(() {
            imageFile = File(pickedFile!.path);
            _load = false;
          });
        }

And in the container use it:

Container(
    child: _load == true ?
    Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: FileImage(imageFile),
        ),
        borderRadius: BorderRadius.circular(20)),
      padding: const EdgeInsets.all(15.0),
    ) :
    Padding(
      padding: const EdgeInsets.all(15.0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20.0),
          child: Image.asset(
            defaultPic,
            height: 250.0,
            width: 300.0,
            fit: BoxFit.cover,
          ),
        ),
    ),
  ),
  ElevatedButton(
    onPressed: () {
      chooseImage(ImageSource.gallery);
    },
    child: Text('Upload Picture'),
    style: ElevatedButton.styleFrom(
      primary: Colors.red,
      elevation: 3,
      shape: new RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(50.0),
      ),
    ),
  )

Comments

[Imam Rizky GANTENG]

hei can u help me with your code ive been using it to my code to get image on gallery it showing nothing error but when i open debug it show a lot of error heres the pict imgur.com/a/B6Bm9Si