提供者 NotifyListeners 不更新消费者

Question

我是 Flutter 的新手，真的非常想使用 provider 来传递数据，但我就是无法让它工作。我想我一切都设置好了，但由于某种原因，当我通知听众时，我的应用程序没有刷新。我要做的就是更新个人资料图片。我从 firebase 中的图片开始（工作正常）。然后我让用户可以选择用相机或照片更新他们的照片。当他们选择一张新照片时，消费者不会像我期望的那样更新。有人可以告诉我我是否做错了什么或者我如何能够做到这一点？

首先，这是我的主要内容：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<Storage>(create: (context) => Storage()),
        StreamProvider<Uid>.value(value: AuthService().user),   
      ],
      child: MaterialApp(   ....

然后这里是更新我从图像选择器类调用的照片 URL 的类和方法。我正在传递上下文，因此我可以弹出该图像选择器视图并在完成后返回个人资料页面。

class Storage with ChangeNotifier {
  String userPhotoUrl;
  void uploadImage(PickedFile _imageFile, BuildContext context) async {

      ....     //some other code here

      try {
        var snapshot =
            await _storage.ref().child('/profileImages/$_userId').putFile(file);

        await snapshot.ref.getDownloadURL().then((value) {
          userPhotoUrl = value;
          notifyListeners();
          print(userPhotoUrl); //I know the code is working because it prints here
          Navigator.pop(context); 
        });
      } catch (e) {
        print(e);
     
      }
   }

}

这是我正在尝试更新的个人资料页面。它只是没有得到更新的值。

class Profile extends StatefulWidget {
  Profile({Key key}) : super(key: key);

  @override
  _ProfileState createState() => _ProfileState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _ProfileState extends State<Profile> with TickerProviderStateMixin {


     String imageUrl;  //firebase pic to start - works fine

@override
  Widget build(BuildContext context) {

                       ....//some more widget tree

                 Consumer<Storage>(   
                  builder: (context, storage, widget) =>
                     CircularProfileAvatar(            //never updates. userPhotoURL always null
                        storage.userPhotoUrl ?? imageUrl, //always uses imageUrl,
                        elevation: 20,
                        borderColor: Colors.white70,
                        borderWidth: 1,
                        radius: 50,
                         ),
                     ),

知道为什么它不起作用吗？我认为这应该很容易，但提供者仍在暗指我......

Answer 1

你使用了错误的方法来解决你需要做一些这样的问题

Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ChangeNotifierProvider<Storage>(
            create: (context) => Storage(),
            child: ImageGrabberScreen(),
    ),
  ),
);

导航到您要使用Consumer() 小部件的屏幕时

通过使用 Provider 或 MultipleProvider 作为父级，你告诉颤振你想使用 StreamBuilder()widget 但从你的工作中我看到你正在使用 Consumer() 小部件

还可以尝试执行以下操作来触发您的功能

Widget build(BuildContext context) {
 var storageNotifier = Provider.of<Storage>(context);
  ///In your button you can then do storageNotifier.uploadImage();
}

如果您没有用于触发此事件的任何形式的按钮，最好使用FutureBuilder 解决此类问题

Future<String> uploadImage() async {

  ....     //some other code here

    var snapshot =
        await _storage.ref().child('/profileImages/$_userId').putFile(file);

  return  await snapshot.ref.getDownloadURL();
  
}

然后在小部件树的某个地方执行此操作

FutureBuilder(
  future: uploadImage(),
  builder: (_,snapshot){
    if(snapshot.hasData){
       return CircularProfileAvatar(snapshot.data);
    }else{
     return CircularProfileAvatar(imageUrl);
    }
  })
 ...widget tree continues