流生成器中的快照上的数据 = null

Question

我第一次尝试使用流将我的视图模型连接到我的屏幕，但我很难完全掌握这个概念。

我的屏幕：

class LoginAndSignupScreen extends StatefulWidget {
  LoginAndSignupScreen({@required this.viewModel});

  final LoginAndSignupScreenViewModelType viewModel;

  @override
  State<StatefulWidget> createState() => new _LoginAndSignupScreenState();
}

class _LoginAndSignupScreenState extends State<LoginAndSignupScreen> {
  Widget showErrorMessage() {
    return StreamBuilder<String>(
      initialData: "",
      stream: widget.viewModel.errorText,
      builder: (context, snapshot) {
          return new Text(
            snapshot.data,
            style: TextStyle(
                fontSize: 13.0,
                color: Colors.red,
                height: 1.0,
                fontWeight: FontWeight.w300
            ),
          );
        }
    );
  }

我的视图模型：

abstract class LoginAndSignupScreenViewModelType {
  Stream<String> get errorText;

  void signIn(String email, String password);
  void signUp(String email, String password, String firstName, String lastName);
}

class LoginAndSignupScreenViewModel implements LoginAndSignupScreenViewModelType {
  LoginAndSignupScreenViewModel({@required this.authenticationService,
                                 @required this.cloudStoreService});

  final AuthenticationServiceType authenticationService;
  final CloudStoreServiceType cloudStoreService;

  final errorController = StreamController<String>.broadcast();

  @override
  Stream<String> get errorText => errorController.stream;

  @override
  void signIn(String email, String password) async {
    try {
      String userId = await authenticationService.signIn(email, password);
      User user = await cloudStoreService.fetchUserWithId(userId)
        .whenComplete(loginCallback);
      print('Signed in: ${user.firstName} ${user.lastName}');
    } catch (error) {
      errorController.add(error);
    }
  }

  @override 
  void signUp(String email, String password, String firstName, String lastName) async {
    try {
      String userId = await authenticationService.signUp(email, password);
      User user = new User(userId, firstName, lastName);
      await cloudStoreService.createUser(user)
        .then(showHomeScreenIfValidUser);
      print('Signed up user: ${user.id}');
    } catch (error) {
        errorController.add(error);
    }
  }
}

当我这样做并运行时，我收到一条错误消息，指出 snapshot.data = null 我理解。我的问题是，如果没有错误字符串，我希望没有小部件。

谁能帮忙？

Answer 1

为了回答您的问题，可以根据snapshot.data 的值返回不同的小部件：

stream: widget.viewModel.errorText,
builder: (context, snapshot) {
  if (snapshot.hasData) {
    return Text(
      snapshot.data,
      style: TextStyle(
          fontSize: 13.0,
          color: Colors.red,
          height: 1.0,
          fontWeight: FontWeight.w300
      ),
    );
  }

  // returns an invisible widget
  return SizedBox.shrink();

}

除此之外，您知道您可以有一个Stream 来生成数据和错误吗？我想知道为什么你使用回调而不是一个流来处理所有事情，snapshot.data 有数据，snapshot.error 有错误。