Блог

В файле Dart Службы хранения firebase:

 //storage reference
Future<String> uploadUserImage(File? image, String path) async {
String imageUrl;
Reference ref =
    _firebaseStorage.ref().child('userImages').child('$path.jpg');
await ref.putFile(image!);
imageUrl = await ref.getDownloadURL();
return imageUrl;
}
 

В файле Dart поставщика пользователей(Управление состоянием) с помощью средства определения изменений:

 //getter
void changeImageUrl(String imageUrl) {
_imageUrl = imageUrl;
notifyListeners();
}

//method
uploadPhotoToFirebase(File fileImage) async {
//used firebase user uid for path and File fileImage for File
try {
  var imageUrl = await _storageService.uploadUserImage(fileImage, _userUid);
  
  //assign downloadedUrl to getter
  changeImageUrl(imageUrl);
 } on PlatformException catch (e) {
   print('Failed to pick image: $e');
 }
}
 

Экран профиля пользователя(пользовательский интерфейс):

 //method for Image_picker
Future _pickPhotos(ImageSource imageSource) async {
final userProvider = Provider.of<UserProvider>(context, listen: false);
try {
  final image = (await _picker.pickImage(source: imageSource));
  if (image == null) return;

  final imageTem = File(image.path);
  
  //assigning File(String path) to firebase storage
  await userProvider.uploadPhotoToFirebase(imageTem);
 } on PlatformException catch (e) {
  print('Failed to pick image: $e');
 }
}
   
   //Inside the build
   Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CircleAvatar(
                backgroundColor: darkGrey,
                radius: 54.0,
                //assign private String _imageUrl 
                child: _imageUrl != null
                    ? ClipRRect(
                        borderRadius: BorderRadius.circular(50.0),
                        child: Image.network(
                          _imageUrl!,
                          width: 100,
                          height: 200,
                          fit: BoxFit.cover,
                        ),
                      )
                    : Center(
                        child: Icon(Icons.person_rounded,
                            color: appColor, size: 80.0))),
            TextButton(
                style: ButtonStyle(
                    overlayColor: MaterialStateColor.resolveWith(
                        (states) => Colors.transparent)),
                child: EditPhotoText(),
                onPressed: () {
                  _pickPhotos(ImageSource.gallery);
                  /* Expecting this to change the local state to show
                     image preview but doesn't work. 
                  */  
                  userProvider.changeImageUrl(_imageUrl!);
                }),
 

Изображение хранится в firebase, и извлечение изображения тоже работает. Я не могу понять, как просмотреть изображение перед его загрузкой в firebase. Я думаю, что мне нужно использовать заданное состояние для локального просмотра, но я не знаю, как или есть ли способ сделать это с помощью пакета поставщика?