title: How to save an image to firebase storage and cloud firestore at the same time in flutter?
body: <p>I'm really confused how to save an image to Firebase Storage, but also Cloud Firestore. All tutorial in youtube is very confusing because they start on pre-build project with no further explanation, especially when they talk about <code>imageUrl</code> to save the picture from Firebase Storage to cloud Firestore.</p>
  <p>Here is my <strong>add_new_collection.dart</strong></p>
  <pre><code>import 'dart:io';
  
  import 'package:flutter/material.dart';
  import 'package:project_ukk/constants/color_constant.dart';
  import 'package:google_fonts/google_fonts.dart';
  import 'package:project_ukk/models/button_widget.dart';
  import 'package:image_picker/image_picker.dart';
  import 'package:path/path.dart';
  
  class AddNewCollection extends StatefulWidget {
    const AddNewCollection({Key? key}) : super(key: key);
  
    @override
    State&lt;AddNewCollection&gt; createState() =&gt; _AddNewCollectionState();
  }
  
  class _AddNewCollectionState extends State&lt;AddNewCollection&gt; {
    File? _image;
    final _picker = ImagePicker();
    //Editing Controllers
    final collectionNameController = TextEditingController();
  
    Future getImageFromGallery() async {
      final pickedFile = await _picker.getImage(source: ImageSource.gallery);
      final File image = File(pickedFile!.path);
      setState(() {
        _image = image;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      final fileName =
          _image != null ? basename(_image!.path) : 'No File Selected';
  
      final addNewCollection = Material(
        elevation: 5,
        borderRadius: BorderRadius.circular(50),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 60,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            color: kGreenColor,
          ),
          child: Material(
            borderRadius: BorderRadius.circular(50),
            color: Colors.transparent,
            child: Center(
              child: MaterialButton(
                child: Text(
                  &quot;Add New Collection&quot;,
                  textAlign: TextAlign.center,
                  style: GoogleFonts.dongle(
                    fontSize: 28,
                    color: kWhiteColor,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                padding: EdgeInsets.fromLTRB(20, 10, 20, 15),
                minWidth: MediaQuery.of(context).size.width,
                onPressed: () {
                  // Adding the name of the collection and the image to the Firebase storage and firestore,
                  // then navigating to the collection_page.dart,
                  // and also displaying the result on colletion_page.dart
                  // with the shape of a card from card_collection.dart
                },
              ),
            ),
          ),
        ),
      );
  
      return GestureDetector(
        onTap: () =&gt; FocusScope.of(context).unfocus(),
        child: Scaffold(
          appBar: AppBar(
            title: Text(
              &quot;New Collection&quot;,
              style: GoogleFonts.dongle(
                fontSize: 40,
                color: kVeryDarkCyan,
              ),
            ),
            backgroundColor: kWhiteColor,
            elevation: 0,
            leading: IconButton(
              icon: const Icon(
                Icons.arrow_back,
                color: kVeryDarkCyan,
              ),
              onPressed: () {
                //passing this to our root
                Navigator.of(context).pop();
              },
            ),
          ),
          body: Form(
            child: Stack(
              children: [
                SingleChildScrollView(
                  child: Column(
                    children: [
                      Center(
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 25,
                          ),
                          color: kPowderBlue,
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              ButtonWidget(
                                icon: Icons.attach_file,
                                text: 'Select Picture',
                                onPressed: () {
                                  getImageFromGallery();
                                },
                              ),
                              SizedBox(height: 5),
                              Text(
                                fileName,
                                style: TextStyle(fontSize: 16),
                              ),
                              SizedBox(height: 30),
                              Text(
                                'Collection Name',
                                textAlign: TextAlign.center,
                                style: const TextStyle(fontSize: 20),
                              ),
                              TextField(
                                autofocus: false,
                                controller: collectionNameController,
                                decoration: InputDecoration(
                                  contentPadding:
                                      EdgeInsets.fromLTRB(20, 15, 20, 15),
                                  hintText: &quot;Example: My Hotwheels&quot;,
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              addNewCollection,
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>This the <strong>button_widget.dart</strong></p>
  <pre><code>import 'package:flutter/material.dart';
  
  class ButtonWidget extends StatelessWidget {
    final IconData icon;
    final String text;
    final VoidCallback onPressed;
  
    const ButtonWidget({
      Key? key,
      required this.icon,
      required this.text,
      required this.onPressed,
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) =&gt; ElevatedButton(
          style: ElevatedButton.styleFrom(
            primary: Color.fromARGB(255, 29, 136, 194),
            minimumSize: Size.fromHeight(50),
          ),
          child: buildContent(),
          onPressed: onPressed,
        );
  
    Widget buildContent() =&gt; Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, size: 28),
            SizedBox(width: 16),
            Text(
              text,
              style: TextStyle(fontSize: 22, color: Colors.white),
            ),
          ],
        );
  }
  </code></pre>
  <p>for the <code>onPressed</code> at <strong>add_new_collection.dart</strong> in the <code>final addNewCollection</code> is the button where the magic happen, but I don't have the magic that I need. So, please help </p>
  <p><strong>Side Note:</strong> if you also have a way to fetch the data from the Firestore and displaying it on to the screen, please pass me some of your way, Thank you.</p>