Struggling with provider and firebase auth

I am new to Flutter. I am doing listening to auth changes of firebase and showing signIn or home screen. In my case first the signIn screen loads and when the result comes then home screen loads. I want to add a loading widget in between to make things smooth.

main.dart

import 'package:cart/services/authservice.dart';
import 'package:cart/wrapper.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamProvider<FirebaseUser>.value(
      value: AuthService().authstate,
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Ecommerce',
        theme: ThemeData(
            primaryColor: Colors.deepOrangeAccent,
            accentColor: Colors.white,
            primaryColorDark: Colors.deepOrange.shade700),
        home: Wrapper(),
      ),
    );
  }
}

wrapper.dart

import 'package:cart/Drawer/drawer_wrapper.dart';
import 'package:cart/screens/login_screen.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Wrapper extends StatefulWidget {
  @override
  _WrapperState createState() => _WrapperState();
}

class _WrapperState extends State<Wrapper> {
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<FirebaseUser>(context);
    return user != null ? DrawerWrapper() : LoginScreen();
  }

  @override
  void dispose() {
    super.dispose();
  }
}

I think you can use AnimatedSwitcher like

Check the doc

Just set the duration of the trasition animation and your own transition and set the child property your ternary operaion. Then hopefully whenever the condition in the ternary operation changes to change the widget, the animation would connect them smoothly.

1 Like