skip to Main Content

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


  1. Try these:

    1 – wrap your widget in a future. Delay(Duration(milliseconds: 200) like this example

      @override
      Widget build(BuildContext context) {
        Future.delayed(Duration(milliseconds: 200))
            .then((_) => showChoiceDialog(
                context: context,
                title: "Logout Admin User",
                onNo: () {
                  TabsCubit.get(context).setTabScreen(Tabs.DashboardTab);
                },
                onYes: () {
                  TabsCubit.get(context).setTabScreen(Tabs.DashboardTab);
                  NaviCubit.get(context).navigateToSliderLogout(context);
                }));
        return Container(); // or what ever widget you wan
      }
    }
    

    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

    Login or Signup to reply.
  2. Update your whatWidget with the following code.

    Widget whatWidget(FilePickerResult? aFile) {
      if (aFile != null && aFile.files.isNotEmpty) {
        final file = aFile.files.single;
        if (file.extension == 'jpg' || file.extension == 'png' || file.extension == 'jpeg') {
          
          return Image.memory(
            file.bytes!,
            height: 200,
          );
        } else if (file.extension == 'pdf') {
          widget)
          return PDFView(
            document: PdfDocument.openData(file.bytes!),
          );
        } else {
          
          return Text('File format not supported');
        }
      } else {
        
        return Center(child: const Text('No image selected'));
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search