> For the complete documentation index, see [llms.txt](https://sumiths-organization.gitbook.io/flutterdevcamp-mentee-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sumiths-organization.gitbook.io/flutterdevcamp-mentee-app/add-firebase-storage.md).

# 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,
                )
        ],
      )),

```