Как автоматически отображать изображение при его выборе (флаттер)

# #firebase #flutter

Вопрос:

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

Коды:

 late File file;  var imagePicker = ImagePicker();  var imgUrl;  var refStorage;  uploadPosterImage() async {  var pickedImage = await imagePicker.getImage(source: ImageSource.gallery);   if (pickedImage != null) {  setState(() {  file = File(pickedImage.path);  });   var imageName = basename(pickedImage.path);   var rand = Random().nextInt(10000000);  imageName = "$rand$imageName"; // random number   image name   refStorage = FirebaseStorage.instance.ref("items/$imageName");   await refStorage.putFile(file);  imgUrl = await refStorage.getDownloadURL();   }  }   

——- и это код в теле:

  Container(  margin: EdgeInsets.only(bottom: 10),  height: 230,  width: 160,  decoration: BoxDecoration(  border: Border.all(color: Colors.yellow),  borderRadius: BorderRadius.circular(20)),  child:   //imgUrl==null?   InkWell(  onTap: ()async{  await uploadPosterImage();  },  child: imgUrl == null? _icon : Image(image: NetworkImage(imgUrl),) )   ),  

Ответ №1:

Попробуйте приведенный ниже код, надеюсь, он вам поможет.

 File? imagePicked;  void cameraImage() async {  final picker = ImagePicker();  final pickedImage = await picker.pickImage(  source: ImageSource.camera,  );  final pickedImageFile = File(pickedImage!.path);  setState(() {  imagePicked = pickedImageFile;  });  Navigator.pop(context);  }   void gallaryImage() async {  final picker = ImagePicker();  final pickedImage = await picker.pickImage(  source: ImageSource.gallery,  );  final pickedImageFile = File(pickedImage!.path);  setState(() {  imagePicked = pickedImageFile;  });  Navigator.pop(context);  }  

Ваш Виджет:

 Stack(  children: [  Container(  margin: EdgeInsets.all(8),  child: CircleAvatar(  radius: 71,  backgroundColor: Colors.black,  child: CircleAvatar(  backgroundColor: Colors.white,  radius: 69,  backgroundImage: imagePicked == null  ? null  : FileImage(  imagePicked!,  ),  ),  ),  ),  Positioned(  left: 90,  top: 90,  child: RawMaterialButton(  fillColor: Theme.of(context).backgroundColor,  padding: EdgeInsets.all(10),  shape: CircleBorder(),  onPressed: () {  showDialog(  context: context,  builder: (context) {  return AlertDialog(  title: Text(  'Choose Option',  ),  content: SingleChildScrollView(  child: Column(  crossAxisAlignment: CrossAxisAlignment.start,  children: [  TextButton.icon(  onPressed: cameraImage,  label: Text(  'Camera',  style: TextStyle(  color: Colors.black,  ),  ),  icon: Icon(  Icons.camera,  ),  ),  TextButton.icon(  onPressed: gallaryImage,  label: Text(  'Gallery',  style: TextStyle(  color: Colors.black,  ),  ),  icon: Icon(Icons.image),  ),    ],  ),  ),  );  },  );  },  child: Icon(  Icons.add_a_photo,  ),  ),  ),  ],  ),  

Ваш экран перед выбором изображения: изображение

Ваш экран после выбора изображения: изображение 2