如何使用流提供程序（颤振）显示加载屏幕？答案

【问题标题】：How to show loading screen with stream provider (Flutter)?如何使用流提供程序（颤振）显示加载屏幕？
【发布时间】：2021-11-15 22:37:38
【问题描述】：

我正在使用流提供程序来传递用户数据，加载时间很短，同时它显示错误页面或红色错误屏幕。如何在加载时显示加载页面。我想我必须添加未来的构建器，但我不知道该怎么做。

class UserData {
  String uid;

  UserData(this.uid);

  Stream<UserModel> get getUserData{
    return FirebaseDatabase.instance.reference().child('users').child(uid).onValue.map((e) {
      return UserModel(e.snapshot.key, e.snapshot.value['name'],e.snapshot.value['Email']);
    });
  }
}

class MainPage extends StatefulWidget {
  const Mainpage({Key key}) : super(key: key);
  @override
  _MainPageState createState() => _MainPageState();
}


class _MainPageState extends State<MainPage> {


  @override
  Widget build(BuildContext context) {
      return StreamProvider.value(
        value: UserData(user.uid).getUserData,
        initialData: null,
        child: Home(),);
    }
    
    
   class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    final userData = Provider.of<UserModel>(context, listen: false);
    
    if(user == null){
      return Offer();
    }else {
      return Customer();
    }

  }
}

【问题讨论】：

标签： flutter provider

【解决方案1】：

您应该为此使用 StreamBuilder。看看这个例子：

class UserData {
  String uid;

  UserData(this.uid);

  Stream<UserModel> get getUserData{
    return FirebaseDatabase.instance.reference().child('users').child(uid).onValue.map((e) {
      return UserModel(e.snapshot.key, e.snapshot.value['name'],e.snapshot.value['Email']);
    });
  }
}

class LoadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text('Loading...');
  }
}

class Page extends StatelessWidget {
  final String msg;

  const Page(this.msg);

  @override
  Widget build(BuildContext context) {
    return Text(msg);
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<String?>(
          stream: UserData('some id').getUserData,
          builder: (context, snapshot) {
            return snapshot.data == null
                ? LoadingPage()
                : Page(snapshot.data ?? '');
          }),
    );
  }
}

【讨论】：