How can I display saved image?

Question

Im trying to displayed user images in flutter .At the moment user can open camera or gallery and pick or take a picture . And I also uploaded it on storage .But how can I displayed this pictures in my app ? Thats the involvement methods . So here is where I want to display my picture :

 child: CircleAvatar(
                      radius: 70,
                      child:_pickedImage ==null ?Text("Picture"):null,
                      backgroundImage: _pickedImage!=null?FileImage(_pickedImage):null,
                    ),

This is how I create the picture load it and so one ...

 Future _loadPicker(ImageSource source) async {
    final picked = await picker.getImage(source: source);
    if (this.mounted) { // This checks if the widget is still in the tree
      setState(()  {
        setState(() {
          if (picked != null) {
            _cropImage(picked);
          } else {
            print('No image selected.');
          }
        });
        //Navigator.pop(context);
      });
    }
  }
  _cropImage(PickedFile picked) async {
    File cropped = await ImageCropper.cropImage(
      sourcePath: picked.path,
      aspectRatioPresets: [
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio16x9,
        CropAspectRatioPreset.ratio5x4
      ],
      maxWidth: 800,
    );
    if (cropped != null) {
      setState(() {
        _pickedImage = cropped;
      });
      final addDir= await syspath.getApplicationDocumentsDirectory();
     final filename= path.basename(cropped.path);
     final savedImage = await cropped.copy('${addDir.path}/$filename');
    }
  }

  void _showPickOptionsDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: Text("Pick from Gallery"),
              onTap: () {
                _loadPicker(ImageSource.gallery);
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text("Take a picture"),
              onTap: () {
                _loadPicker(ImageSource.camera);
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }

This is what im using on my on saved button to save the picture into storage:

  final ref= FirebaseStorage.instance.ref().child('user_profile_pictures').child(user.uid+'.jpg');
                  await ref.putFile(_pickedImage).whenComplete;

Hope anyone can help thanks .

score 0 · Accepted Answer · answered Mar 16 '21 at 13:56

There are lot of articles questions about it however for me the best is on FlutterFire documentation:

In many use-cases, you may wish to display images stored on a storage bucket within your application, using Firebase as a scalable and cost-effective Content Distribution Network (CDN). Firebase allows you to retrieve a long-lived download URL which can be used. To request a download URL, call the getDownloadURL method on a reference:

Future<void> downloadURLExample() async {
  String downloadURL = await firebase_storage.FirebaseStorage.instance
      .ref('users/123/avatar.jpg')
      .getDownloadURL();

  // Within your widgets:
  // Image.network(downloadURL);
}

Not sure what more to add, as it's quite clear. You can search more any time as there is really lot of such question examples: one, two, three.

Yes I understand that but and I also have it this way. But my question is how do displayed it . Is everybody using network image or is there a another way. And als is using network image safety? — , Mar 16 '21 at 15:31
And aslo because file image Is not working. but shouldn't? I dont now if I really understand this what should file image does — , Mar 16 '21 at 15:34

How can I display saved image?

1 Answers1