How to show loading screen with stream provider (Flutter)?

user_16596388 0
Viewed 434

I am using stream provider to pass user data and it takes a quite little time to load meanwhile it shows the wrong page or a red error screen. How to show a loading page while it loads. I guess I have to add future builder but I am not sure how to do that.

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 Answers

You should use StreamBuilder for that. Check out this example:

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 ?? '');
          }),
    );
  }
}
user_56756420
Related