如何解决Flutter / Dart-如何在其他屏幕上的图像选择器之后更新图像
我正在使用Flutter的Image Picker
插件,以允许用户更改其头像。当他们转到帐户页面时,会看到他们的常规头像照片,顶部带有相机图标。单击相机图标将允许他们从相机拍摄照片或从图库中选择新头像。选择新照片后,头像照片会自动更新。但是,当离开他们的帐户页面导航时,整个应用程序的其余部分都可以看到旧头像。我将Provider
和Change Notifier
与Consumers
和Provider
一起用于其他地方的头像。但是,问题在于,我只能在内部版本中访问Provider
,所以我不知道在代码中可以在哪里调用class Picker extends StatefulWidget {
Picker({Key key,this.title}) : super(key: key);
final String title;
@override
_PickerState createState() => _PickerState();
}
class _PickerState extends State<Picker>
with TickerProviderStateMixin,ImagePickerListener{
File _image;
AnimationController _controller;
ImagePickerHandler imagePicker;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,duration: const Duration(milliseconds: 500),);
imagePicker= ImagePickerHandler(this,_controller);
imagePicker.init();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
var socialProvider = Provider.of<SocialProvider>(context);
return Container(
child: GestureDetector(
onTap: () => imagePicker.showDialog(context),child: Center(
child: Stack(
children: <Widget>[
Center(
child: _image == null?
Consumer<SocialProvider>(
builder: (context,socialProvider,child) {
return
Image.network(socialProvider.currentavatar,width: 200,height: 200,);
}) :
Container(
height: 200.0,width: 200.0,decoration: BoxDecoration(
color: Colors.grey,image: DecorationImage(
image: FileImage(_image),fit: BoxFit.cover,),Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),child: Container(
color: Colors.black26,child: Icon(Icons.camera_alt,color: Colors.white,size: 40,)
),);
}
@override
userImage(File _image) async{
setState(() {
this._image = _image;
});
}
}
。除此之外,我在整个应用程序中使用的头像来自互联网网址。使用Image Picker选择后,新的头像照片将上传到服务器。新照片的名称替换了旧照片的名称。因此,我的应用程序甚至不知道任何更改。即使重新加载页面也不起作用。但是,如果我热重启我的应用程序,则会出现新的头像照片。有什么想法我可以做什么?
这是图像选择器代码;
Consumers
当前,ChangeNotifier
会在用户通过社交媒体登录获取新头像时正确地在整个应用程序中更新头像。新的头像将上传到服务器,并通知Provider
。 Future<void> postSocialData(String avatar) async {
final url = "http://example.com/example.php¤tavatar=" + $avatar;
final response = await http.get(url);
if (response.statusCode == 200) {
currentavatar = "http://example.com/user.jpg";
var box = await Hive.openBox('currentuser');
box.put('currentavatar',"http://example.com/user.jpg",);
notifyListeners();
}
}
的代码为;
Provider
因此,我尝试将其放入GestureDetector(
onTap: () async {
String avatar = await _listener.openGallery(socialProvider.currentuserid);
String updatedavatar = "http://example.com/" + avatar;
socialProvider.updateAvatar(updatedavatar);
},child: roundedButton(
"Gallery",EdgeInsets.fromLTRB(0.0,10.0,0.0,0.0),const Color(0xFF167F67),const Color(0xFFFFFFFF)),
中并从Image Picker构建中的onTap函数调用它。这是onTap函数;
Provider
这是它调用的Future<void> updateAvatar(String avatar) async {
var box = await Hive.openBox('currentuser');
box.put('currentavatar',avatar);
currentavatar = avatar;
notifyListeners();
}
;
{{1}}
但是,这并没有用新的头像来更新消费者。我猜是因为化身的外部网址没有改变,因为照片只是被替换并保持相同的名称。
解决方法
使用Hive的听众是个好主意。但这无济于事,因为事实证明在服务器端没有刷新上传的图像-与替换的图像具有相同的URL。因此必须在Web服务器上整理缓存。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。