CODEWITHSUNDEEP
flutterdart
Neeraj
Neeraj

Reputation: 127

How to use preference for showing profile picture in my application in flutter

I want to display a profile picture of the user when they log in. I am using the image URL stored in firestore database.

I want to keep the image in the app until logout. Every time I start the app, Image is called from that URL but I want to store it. I am new to flutter and have no clue to achieve this task.

Future<void> _getImage(ImageSource source) async {
    var image = await ImagePicker.pickImage(source: source);
    if (image != null) {
      setState(() {
        _cropImage(image);
      });
    }
    Navigator.pop(context);
  }

// Crop fetched image
  _cropImage(File image) async {
    File cropped = await ImageCropper.cropImage(
        sourcePath: image.path,
        aspectRatio: CropAspectRatio(ratioY: 1.0, ratioX: 1.0));
    if (cropped != null) {
      setState(() {
        _imageFile = cropped;
        uploadFile();
      });
    }
  }

// Upload image file to firestrore Storage and get image URL
  Future uploadFile() async {
    StorageReference storageReference = FirebaseStorage.instance
        .ref()
        .child('${Path.basename(_imageFile.path)}}');
    StorageUploadTask uploadTask = storageReference.putFile(_imageFile);
    var downUrl = await (await uploadTask.onComplete).ref.getDownloadURL();
    var url = downUrl.toString();

    await uploadTask.onComplete;
    setState(() {
      imageUrl = url.toString();
    });
//    Show message on successful image upload
    AppUtils.showToast('Picture Uploaded', green, white);
//    Updating database with Image URL
    Firestore.instance
        .collection('account')
        .document(widget.user)
        .updateData({"url": imageUrl});

  }

// Display Image 
ClipRRect(
                    borderRadius: BorderRadius.circular(200.0),
                    clipBehavior: Clip.hardEdge,
                    child: Container(
                        height: 200,
                        width: 200,
                        child: widget.photoUrl == null
                            ? Image(
                          image: NetworkImage(
                      'https://cdn1.iconfinder.com/data/icons/technology-devices-2/100/Profile-512.png'),
                          fit: BoxFit.fill,
                        )
                            : Image(
                          image: NetworkImage(widget.photoUrl),
                          fit: BoxFit.fill,
                        ))),

Upvotes: 1

Views: 1298

Answers (1)

Bilaal Abdel Hassan
Bilaal Abdel Hassan

Reputation: 1379

What you need is a proper State Management throughout your app.

You can check the Provider Package to get started.

You can find more information about State Management here and here

Upvotes: 1

Related Questions