Question 77118 in Flutter Question posted in
The official Flutter documentation can be found here.

Uploading image into Floating Action Button, set state not working – Flutter

I have a floating action button that I want a user to click to take a picture with their camera and then have that image replace the camera icon on the floating action bar button.

Here is the code for my FAB, and including uploading the image to firestore storage.

floatingActionButton: FloatingActionButton.large(
        heroTag: "add image",
        backgroundColor: const Color(0xFF93C3B9),
        child: (imageURL == ' ')
            ? const Icon(Icons.add_a_photo_outlined)
            : Image.network(imageURL),
        //open add gear page
        onPressed: () async {
          // todo: upload an image to Firebase Storage

          //Take picture
          ImagePicker imagePicker = ImagePicker();
          XFile? file = await imagePicker.pickImage(source: ImageSource.camera);

          if (file == null) return;

          String uniqueFileName =
              DateTime.now().millisecondsSinceEpoch.toString();

          //Get reference to storage root
          Reference referenceRoot = FirebaseStorage.instance.ref();
          Reference referenceDirImages = referenceRoot.child('images/$userID');
          Reference referenceImageToUpload =
              referenceDirImages.child(uniqueFileName);

          try {
            //upload image
            await referenceImageToUpload.putFile(File(file.path));

            //get download URL

            setState(() async {
              imageURL = await referenceImageToUpload.getDownloadURL();
              print(imageURL);
            });

            //upload path to fireStore database
          } catch (error) {}
        },
      ),

After the image uploads it’s like the set state is not working to replace the icon with the image. The odd part is is I crtl-s and save in Visual Studio Code then the widgets seem to rebuild and then the image is visible there…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So after playing around with my code a bit I decided to edit the above code and take tha await function out of the setState() and make setState() not async anymore:

    //get download URL
            String tempUrl = await referenceImageToUpload.getDownloadURL();

            setState(() {
              print("--------- Set State -----------");
              imageURL = tempUrl;
              print("--------- Set State end -----------");
            });
            print("New image url $imageURL ------------");

    not sure why it works, but this solves my issue.


  2. 0

    By your description of the issue, I think you might be using StatelessWidget instead of StatefulWidget.

    You see the button change when performing a hotreload because the value of imageURL is correctly changing internally, but you need a StatefulWidget to update the UI also.

    Hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search