# Add Firebase Storage

Profile picture is currently hard coded , lets store it in firebase storage

add package firebase\_storage to pubspec.yaml

```yaml
firebase_storage: ^11.6.6
```

Screens => profile\_screen.dart

```dart
  final _firestore = FirebaseFirestore.instance;
  final _auth = FirebaseAuth.instance;
  final _storage = FirebaseStorage.instance;

  var name = "Loading...";
  var bio = "Loading...";
  var photoURL = FirebaseAuth.instance.currentUser!.photoURL;

```

update initState

```dart
 @override
  void initState() {
    super.initState();
    _auth.currentUser!.reload();
    loadUserData();

    loadBadges();
  }
```

add functionality to loadUserData. and updateUserData

```dart

  void loadUserData() {
    _firestore
        .collection("users")
        .doc(_auth.currentUser!.uid)
        .get()
        .then((snapshot) {
      setState(() {
        name = snapshot.data()!["name"];
        bio = snapshot.data()!["bio"];
      });
    });
  }

  void updateUserData() {
    _firestore.collection("users").doc(_auth.currentUser!.uid).update({
      'name': name,
      'bio': bio,
    }).then((value) {
      showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text("Success!"),
              content: Text("The profile data has been updated!"),
              actions: [
                TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text("OK!"))
              ],
            );
          });
    }).catchError((err) {
      showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text("Uh-Oh!"),
              content: Text("$err"),
              actions: [
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text("Try Again!"),
                )
              ],
            );
          });
    });
  }
```

Update getImage -> to store image to storage

```dart
Future getImage() async {
    final pickedFile =
        await ImagePicker().pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      File _image = File(pickedFile.path);

      _storage
          .ref("profile_pictures/${_auth.currentUser!.uid}.jpg")
          .putFile(_image)
          .then((snapshot) {
        snapshot.ref.getDownloadURL().then((url) {
          _firestore
              .collection("users")
              .doc(_auth.currentUser!.uid)
              .update({'profilePic': url}).then((snapshot) {
            _auth.currentUser!.updatePhotoURL(url);
          });
        });
      });
    } else {
      print("A file was not selected");
    }
  }
```

image\_picker needs access to photos update *Info.plist* file, located in `<project root>/ios/Runner/Info.plist`

<figure><img src="/files/XIHmrGHHqrq4lJPHcfLK" alt=""><figcaption></figcaption></figure>

We can also bring the background illistration for the Courses from storage

Widgets => explore\_course\_card.dart

```dart
  final _storage = FirebaseStorage.instance;
  String? illustrationURL;
```

modigy getIllustration

```dart
void getIllustration() {
    _storage
        .ref("illustrations/${widget.course.illustration}")
        .getDownloadURL()
        .then((url) {
      setState(() {
        illustrationURL = url;
      });
    });
  }
```

```dart

Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          (illustrationURL == null)
              ? Container()
              : Image.network(
                  illustrationURL!,
                  fit: BoxFit.cover,
                  height: 100.0,
                )
        ],
      )),

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sumiths-organization.gitbook.io/flutterdevcamp-mentee-app/add-firebase-storage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.