Flutter file picker unexpected null value - image

Question

id love your support on this one.
The thing is that im trying to upload a file to firebase useing file-picker with flutter.
This is my code:
import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:hire_me/firebase/firebaseApi.dart';
import 'package:hire_me/buttonWidget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path/path.dart';
class ImageUploader extends StatefulWidget {
const ImageUploader({Key? key}) : super(key: key);
#override
_ImageUploaderState createState() => _ImageUploaderState();
}
class _ImageUploaderState extends State<ImageUploader> {
UploadTask? task;
File? file;
#override
Widget build(BuildContext context) {
final fileName =
file != null ? basename(file!.path) : 'No File Selected Yet';
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Upload Image'),
),
body: Container(
padding: EdgeInsets.all(32),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonWidget(
icon: Icons.attach_file,
text: 'Select File',
onClicked: selectFile,
),
SizedBox(
height: 8,
),
Text(fileName,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
SizedBox(
height: 48,
),
ButtonWidget(
icon: Icons.cloud_upload_outlined,
text: 'Upload File',
onClicked: uploadFile)
],
),
),
),
);
}
Future selectFile() async {
FilePickerResult? result = await FilePicker.platform.pickFiles();
if (result != null) {
final path = result.files.single.path!;
setState(() => file = File(path));
}
}
Future uploadFile() async {
if (file == null) return;
final fileName = basename(file!.path);
final destination = 'files/$fileName';
FirebaseApi.uploadFile(destination, file!);
setState(() {});
if (task == null) return;
final snapshot = await task!.whenComplete(() => {});
final urlDownload = await snapshot.ref.getDownloadURL();
print('Download Link: $urlDownload');
}
}
When i click on the upload file button, it opens the platform file picker and after selecting an image i get the following error:
Error: Unexpected null value.
at Object.throw_ [as throw] (http://localhost:51207/dart_sdk.js:5037:11)
at Object.nullCheck (http://localhost:51207/dart_sdk.js:5362:30)
at imageUploader._ImageUploaderState.new.selectFile
(http://localhost:51207/packages/hire_me/screens/imageUploader.dart.lib.js:417:27)
at selectFile.next (<anonymous>)
at http://localhost:51207/dart_sdk.js:37374:33
at _RootZone.runUnary (http://localhost:51207/dart_sdk.js:37245:59)
at _FutureListener.thenAwait.handleValue (http://localhost:51207/dart_sdk.js:32501:29)
at handleValueCallback (http://localhost:51207/dart_sdk.js:33028:49)
at Function._propagateToListeners (http://localhost:51207/dart_sdk.js:33066:17)
at _Future.new.[_completeWithValue] (http://localhost:51207/dart_sdk.js:32914:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:51207/dart_sdk.js:32935:35)
at Object._microtaskLoop (http://localhost:51207/dart_sdk.js:37497:13)
at _startMicrotaskLoop (http://localhost:51207/dart_sdk.js:37503:13)
at http://localhost:51207/dart_sdk.js:33274:9
I have tested this on chrome and android.

Answer 1

I had the same problem.
In this case, your variable that you have made-
UploadTask? task;
File? file;
you have to assign these variables. This is the reason they are showing the Unexpected null error.
In my case I had a boolean variable, I assigned it with false ->
this.isActive = false,
So you should make a constructor for your variables. Such as:
class ImageUploader extends StatefulWidget {
UploadTask? task;
File? file;
const ImageUploader({Key? key, this.task, this.file}) : super(key: key);
#override
_ImageUploaderState createState() => _ImageUploaderState();
}
class _ImageUploaderState extends State<ImageUploader> {
#override
Widget build(BuildContext context) {
final fileName =
file != null ? basename(file!.path) : 'No File Selected Yet';
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Upload Image'),
),
body: Container(
padding: EdgeInsets.all(32),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonWidget(
icon: Icons.attach_file,
text: 'Select File',
onClicked: selectFile,
),
SizedBox(
height: 8,
),
Text(fileName,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
SizedBox(
height: 48,
),
ButtonWidget(
icon: Icons.cloud_upload_outlined,
text: 'Upload File',
onClicked: uploadFile)
],
),
),
),
);
}
Future selectFile() async {
FilePickerResult? result = await FilePicker.platform.pickFiles();
if (result != null) {
final path = result.files.single.path!;
setState(() => file = File(path));
}
}
Future uploadFile() async {
if (file == null) return;
final fileName = basename(file!.path);
final destination = 'files/$fileName';
FirebaseApi.uploadFile(destination, file!);
setState(() {});
if (task == null) return;
final snapshot = await task!.whenComplete(() => {});
final urlDownload = await snapshot.ref.getDownloadURL();
print('Download Link: $urlDownload');
}
}
if this still shows the unexpected null error, then you have to assign the variables in the constructor.
Hope it works for you.

Answer 2

just add this line in file picker:
withData: true,