Question

流构建器用于根据流中的数据绘制窗口小部件。

基于数据实现导航的正确方法是什么？

详细信息：抽屉中有一个注销按钮。它会清除会话并在流中发出数据。

有一个带有流生成器的无状态窗口小部件，可监听数据并更新UI。如何根据流中的数据使其导航到登录屏幕？

Answer 1

在无状态小部件的build方法中，您可以使用listen()方法监听流中的更改。

 Widget build(BuildContext context) {
    Repository.bulletins.listen((pet) {
      pet.documents[pet.documents.length - 1].data['animalType'] == "Dog"
          ? Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => LostPetForm(),
              ))
          : print('not yet');
    });
    return Scaffold(...

Answer 2

灵感来自https://stackoverflow.com/a/54109955/1918649

在创建配置文件的小部件的构建方法中

  @override
  Widget build(BuildContext context) {
    final userBloc = BlocProvider.of<UserBloc>(context);
    return ...
           somewhere here Profile(userBloc)
           ...
}

class Profile extends StatefulWidget  {

  final userBloc;

  Profile(this.userBloc);

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

class ProfileState extends State<Profile> {

  @override
  void initState() {
    super.initState();
    widget.userBloc.stream.listen((userData){
      if(userData==null) {
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => LandingPage(),
            ));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Profile"),
      ),
      drawer: CustomDrawer(),
      body: Center(
        child: StreamBuilder<UserModel>(
          initialData: widget.userBloc.user,
          stream: widget.userBloc.stream,
          builder: (ctx, snap) => snap.hasData?Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.network(snap.data?.imageUrl),
              Text(snap.data?.username)
            ],
          ):Text('You are logged out'),
        ),
      ),
    );
  }
}

根据流中的数据进行导航

2 个答案: