I'm having trouble drawing the progress indicator

Question

I am implementing file upload. I want to display the upload progress using CircularProgressIndicator.

The uploadFile() function of the FileUploadController class uploads a file to the server and tells the percentage of the upload progress. and ‘NotifyListeners()’ is called every frame to notify the upload progress.

I tried to draw a CircularProgressIndicator with this information, but I got an error. "setstate() or markneedsbuild() called during build."

  @override
  Widget build(BuildContext context) {
    var uploadController = Provider.of<FileUploadController>(context);
    uploadController.uploadFile(userFiles, context);//upload files and update uploadPercentage
    return ListTile(
      leading: Stack(
        children: [
          CircularProgressIndicator(
            value: userFiles.uploadPercentage,
            strokeWidth: userFiles.uploadPercentage == 1 ? 0 : 1,
          ),
          Positioned(
            right: 3,
            left: 3,
            top: 3,
            bottom: 3,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              backgroundImage:
                  AssetImage('assets/images/fileTypeLogos/pdf.png'),
            ),
          ),
        ],
      ),
      title: Text(widget.fileName),
      trailing: IconButton(
        icon: Icon(Icons.close),
        onPressed: () => widget.removeWhenCloseButtonTap(widget.fileName),
      ),
    );
  }

I think the problem is calling notifyListeners() inside build() (the uploadFile function calls it).How can I fix it?

Answer 1

Yes, that's the probably the issue. You might want to make that call to uploadFile() inside the initState() :

FileUploadController uploadController(BuildContext context) => Provider.of<FileUploadController>(context);

@override
void initState() {
  super.initState();
  uploadController(context).uploadFile(userFiles, context);
}

If you're in a stateless widget, convert it to a stateful one.