Flutter 创建流服务，通过 streambuilder 将 URL 发送到小部件

Question

我有一个可以正常工作的音乐播放器，但我想将音乐播放器小部件放在 StreamBuilder 中，并有一个字符串作为要在流中播放的音乐的 url，并将该 url 传递给构造函数的音乐播放器。 因此，只要 url 流发生变化，音乐播放器内容就会发生变化。

我的简单音乐播放器url服务类：

class MusicPlayerURLService {
  String url = '';

  String get(){
    return url;
  }

  void set(String newUrl) {
    url = newUrl;
  }
}

音乐播放器小部件的构造函数：

StreamBuilder(
            stream: MusicPlayerURLService().get(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState == ConnectionState.active) {
                var user = snapshot.data;
                if (user == null) {
                  return Container(width: 20);
                }
                return MusicPlayer(url: snapshot.data.url);
              }
              return Container(width: 20);
            }),

然后在另一个视图中，我将有一个按钮，它调用 MusicPlayerURLService 中的 set 方法并设置一个新的 URL。

目前，由于 url 服务中的 get 方法不是流，因此流构建器抛出错误。

我正在努力想出解决这个问题的一般想法。我可以以某种方式使用提供程序吗？

编辑

网址将来自像这样的按钮：

FlatButton(
  onPressed: () => MusicPlayerURLService().set("songOneUrl"),
  child: Text("Play Song One"),
)

Answer 1

有必要创建自己的Stream 来完成此操作。这种情况下最好的方法可能是使用StreamController。

您应该添加一个StreamController 作为MusicPlayerURLService 的一部分并在构造函数中实例化它。设置新 URL 时，您应该告诉控制器也将其添加到您的流中。要从StreamController 获取流，请创建一个返回controller.stream 的新方法。

例如

class MusicPlayerURLService {
  String url = '';
  StreamController<String> controller;

  MusicPlayerURLService() {
    controller = StreamController();
    controller.add(url);
  }

  String get(){
    return url;
  }

  Stream<String> getStream() {//Use this in your StreamBuilder
    return controller.stream;
  }

  void set(String newUrl) {
    url = newUrl;
    controller.add(url);
  }
}

此方法涉及将 same MusicPlayerURLService 对象传递到需要使用它的任何地方。您也许可以将必要的部分设为静态，如下所示：

class MusicPlayerURLService {
  static StreamController<String> controller = StreamController();

  static Stream<String> getStream() {//Use this in your StreamBuilder
    return controller.stream;
  }

  static void set(String newUrl) {
    controller.add(newUrl);
  }
}

如果您认为有必要，您也可以使用 Provider 包在整个树中提供对象的单个实例。