Flutter:How to upload image in an app using Firestore Field inside collection

Question

............................................I am not asking about how a user can upload his/her images using authentication. I am asking about how i can change my images inside the app using firestore(firebase) or how to change an title image inside the app by uploading an image from our desktop. .............................................................................................................................................. This is my code

 body: StreamBuilder(
      stream: Firestore.instance.collection('Event').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
         const Text('No Event');
        } 
        else if(snapshot.hasError){ const Text('No data avaible right now'); } 
        else {
          return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                DocumentSnapshot myEvent = snapshot.data.documents[index];

                 
                return ListView(
                  shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
                // scrollDirection: Axis.vertical,
                  children: <Widget>[
                    //1st box

                  Container(
                      margin: EdgeInsets.all(
                          SizeConfig.safeBlockHorizontal * 4),
                      child: Container(
                        child: new FittedBox(
                          child: Material(
                            // color: Colors.white,
                            elevation: 14.0,
                            borderRadius: BorderRadius.circular(24.0),
                            shadowColor: Color(0x802196F3),
                            child: Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Container(
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                        left:
                                            SizeConfig.safeBlockHorizontal *
                                                4),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Text(
                                            '${myEvent['date_1']}',
                                            style: TextStyle(
                                                color: Colors.black54,
                                                fontSize: 24.0,
                                                fontWeight:
                                                    FontWeight.bold),
                                          )),
                                        ),
                                        SizedBox(
                                          height: 10,
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.only(
                                              left: 8.0),
                                          child: Container(
                                              child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment
                                                    .spaceEvenly,
                                            children: <Widget>[
                                             
                                            ],
                                          )),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                             
                                Container(
                                  width:
                                      SizeConfig.safeBlockHorizontal * 60,
                                  height:
                                      SizeConfig.safeBlockHorizontal * 55,
                                  child: ClipRRect(
                                    borderRadius:
                                        new BorderRadius.circular(24.0),
                                    child: Image.network(
                                      '${myEvent['image_1']}',
                                      fit: BoxFit.fill,
                                      alignment: Alignment.topRight,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),

---

Answer 1

I found an easiest way to change image in our app whenever we want: Step 1- use image network code as above Step 2- upload our images in fire base storage Step 3- Copy the image address and paste it in your Image field inside the collection , the image will automatically update in your app

Answer 2

If you have both your images and title inside firestore, then you need to update the database with the new title and image. To update the image, you need to reupload an image using the image_picker plugin:

Future getImage() async {
  var firebaseUser = await FirebaseAuth.instance.currentUser();
  var image = await ImagePicker.pickImage(source: ImageSource.gallery);

   if (image != null) {
        StorageReference ref = FirebaseStorage.instance.ref();
        StorageTaskSnapshot addImg = await ref.child("image/img").putFile(image).onComplete;
        if (addImg.error == null) {
          final String downloadUrl =
                await addImg.ref.getDownloadURL();
            await Firestore.instance
                .collection("user")
                .document(firebaseUser.uid)
                .updateData({"url": downloadUrl, "name": imageName});
        }
      }
}

So here you get a new image, add it to Firebase Storage and then using updateData() you can update both the image name and img url in the database.