How to display image automatically when it's picked (flutter)

user_17269441 0
Viewed 158

when I upload an Image using firebase storage, it doesn't show in the screen until I do hot refresh. So the question is: How to show it automatically when I pick it either from the gallery or the camera? Thanks.

Codes:

late File file;
  var imagePicker = ImagePicker();
  var imgUrl;
  var refStorage;
  uploadPosterImage() async {
    var pickedImage = await imagePicker.getImage(source: ImageSource.gallery);

    if (pickedImage != null) {
      setState(() {
        file = File(pickedImage.path);
      });

      var imageName = basename(pickedImage.path);

      var rand = Random().nextInt(10000000);
      imageName = "$rand$imageName"; // random number + image name

      refStorage = FirebaseStorage.instance.ref("items/$imageName");

      await refStorage.putFile(file);
      imgUrl = await refStorage.getDownloadURL();

    }
  }

------- and that's the code in the body:


Container(
                      margin: EdgeInsets.only(bottom: 10),
                      height: 230,
                      width: 160,
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.yellow),
                          borderRadius: BorderRadius.circular(20)),
                      child: 
                      //imgUrl==null? 
                      InkWell(
                        onTap: ()async{
                           await uploadPosterImage();
                        },
                        child: imgUrl == null? _icon : Image(image: NetworkImage(imgUrl),)  )

                    ),
firebase flutter
1 Answers

Try below code hope its help to you.

File? imagePicked;
  void cameraImage() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(
      source: ImageSource.camera,
    );
    final pickedImageFile = File(pickedImage!.path);
    setState(() {
      imagePicked = pickedImageFile;
    });
    Navigator.pop(context);
  }

  void gallaryImage() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(
      source: ImageSource.gallery,
    );
    final pickedImageFile = File(pickedImage!.path);
    setState(() {
      imagePicked = pickedImageFile;
    });
    Navigator.pop(context);
  }

Your Widget:

Stack(
                  children: [
                    Container(
                      margin: EdgeInsets.all(8),
                      child: CircleAvatar(
                        radius: 71,
                        backgroundColor: Colors.black,
                        child: CircleAvatar(
                          backgroundColor: Colors.white,
                          radius: 69,
                          backgroundImage: imagePicked == null
                              ? null
                              : FileImage(
                                  imagePicked!,
                                ),
                        ),
                      ),
                    ),
                    Positioned(
                      left: 90,
                      top: 90,
                      child: RawMaterialButton(
                        fillColor: Theme.of(context).backgroundColor,
                        padding: EdgeInsets.all(10),
                        shape: CircleBorder(),
                        onPressed: () {
                          showDialog(
                            context: context,
                            builder: (context) {
                              return AlertDialog(
                                title: Text(
                                  'Choose Option',
                                ),
                                content: SingleChildScrollView(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      TextButton.icon(
                                        onPressed: cameraImage,
                                        label: Text(
                                          'Camera',
                                          style: TextStyle(
                                            color: Colors.black,
                                          ),
                                        ),
                                        icon: Icon(
                                          Icons.camera,
                                        ),
                                      ),
                                      TextButton.icon(
                                        onPressed: gallaryImage,
                                        label: Text(
                                          'Gallery',
                                          style: TextStyle(
                                            color: Colors.black,
                                          ),
                                        ),
                                        icon: Icon(Icons.image),
                                      ),
                                      
                                    ],
                                  ),
                                ),
                              );
                            },
                          );
                        },
                        child: Icon(
                          Icons.add_a_photo,
                        ),
                      ),
                    ),
                  ],
                ),

Your screen before image select: image

Your screen after image select: image2

user_139972100
Related