I’m trying to write a web app where a user selects an image, displays the image as a widget, then has the option to click on a button that says "Upload" to upload it to a server. Being a noob with flutter web, I’m still learning the details and differences between this platform and Android/Windows. As per some reading, unlike an Android/Windows app, the path variable from file_picker is unavailable for web, so I’m in the process of learning how to properly access the image file for uploading.
This is what I’ve made so far (snippets only):
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Selection'),
backgroundColor: Colors.amber.shade300,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
whatWidget(result),
SizedBox(height: 20),
ElevatedButton(
onPressed: pickImage,
child: Text('Select Image'),
),
SizedBox(height: 40),
ElevatedButton(
onPressed: () {},
child: Text("Upload File/Image"),
),
],
),
),
);
}
Widget whatWidget(FilePickerResult? aFile) {
return imagePath != null
? Image.memory(
aFile!.files.single.bytes!,
height: 200,
)
: Center(child: const Text('No image selected'));
}
With this code, the app works as expected, but when I insert any code in "whatWidget" before the return statement, I get an "Unexpected null value" error.
How should I rewrite the "whatWidget" code so I don’t get the error, as my final goal is to actually have one of these three widgets to be returned by the function, based on the file extension passed as the "aFile" parameter: 1) an Image widget if the extension is hpg/png/jpeg; 2) a PDFView widget if the extension is PDF, and 3) a text widget displaying "File format not supported" if the file is either an image nor a PDF file.
Thanks in advance
I tried to modify the whatWidget function by adding some lines of code (variable initialization, so far) before the return statement, expecting them to be executed, but all I get is the "Unexpected null value." error.
2
Answers
Try these:
1 – wrap your widget in a future. Delay(Duration(milliseconds: 200) like this example
2- use file picker & base64 parser for getting and displaying the files its better and faster (when you want to display use
image.memory(base64Code)
3- Try using a package called flutterflow_components that has method called previewImage() it will make development easier for u
One of these should work for you. I hope that helps and let me know if you need any more help
All the best
Update your whatWidget with the following code.