Flutter Page view not updating in Future Builder async snapshot - firebase

Question

I am using the code from -> https://github.com/aaronksaunders/simple_firebase_auth/tree/master/lib
When I log in using Firebase, I would like the page to automatically redirect to the HomePage.
The code for main.dart is as follows:
void main() {
// setupLocator();
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
.then((_) => runApp(
ChangeNotifierProvider<AuthService>(
child: MyApp(),
builder: (BuildContext context) {
return AuthService();
},
),
));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
onGenerateRoute: Router.generateRoute,
theme: ThemeData(primarySwatch: Colors.blue),
home: FutureBuilder<FirebaseUser>(
future: Provider.of<AuthService>(context).getUser(),
builder: (context, AsyncSnapshot<FirebaseUser> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// log error to console
if (snapshot.error != null) {
print("error");
return Text(snapshot.error.toString());
}
// redirect to the home page
return snapshot.hasData
? CustomerHomePage(snapshot.data)
: LoginPage();
} else {
// show loading indicator
return LoadingCircle();
}
},
),
);
}
}
The login page code is:
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _password;
String _email;
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: prefix0.backgroundColor,
body: Form(
key: _formKey,
child: Padding(
padding: EdgeInsets.all(20.0),
child: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TextFormField(
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.next,
focusNode: nodeOne,
onSaved: (value) => _email = value,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
prefixIcon:
Image.asset('assets/images/icons/Username.png'),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
labelText: "Email Address",
labelStyle: TextStyle(
color: nodeOne.hasFocus ? Colors.white : Colors.grey),
),
),
TextFormField(
style: TextStyle(color: Colors.white),
textInputAction: TextInputAction.go,
focusNode: nodeTwo,
onSaved: (value) => _password = value,
obscureText: true,
decoration: InputDecoration(
prefixIcon: Image.asset(
'assets/images/icons/PasswordLock.png'),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
labelStyle: TextStyle(
color: nodeTwo.hasFocus
? Colors.white
: Colors.grey),
labelText: "Password")),
SizedBox(height: 20.0),
Center(
child: FlatButton(
onPressed: () {},
child: Text('Forgotten password?',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white)),
),
),
ButtonTheme(
minWidth: MediaQuery.of(context).size.width,
height: 40,
child: RaisedButton(
textColor: prefix0.backgroundColor,
color: Colors.white,
child: Text("Login"),
onPressed: () {
_loginAction();
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0))),
),
Center(
child: FlatButton(
onPressed: () {},
child: Text('Not registered?',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white)),
),
),
Divider(
indent: MediaQuery.of(context).size.width * 0.333333,
height: 5,
thickness: 3,
color: Colors.white,
endIndent: MediaQuery.of(context).size.width * 0.333333,
),
SizedBox(height: 15),
ButtonTheme(
minWidth: MediaQuery.of(context).size.width,
height: 40,
child: RaisedButton(
textColor: prefix0.backgroundColor,
color: Colors.white,
child: Text("Not a customer? Visit out site"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0))),
),
SizedBox(height: 20),
],
),
],
),
),
),
);
}
_loginAction() async {
final form = _formKey.currentState;
form.save();
// Validate will return true if is valid, or false if invalid.
if (form.validate()) {
try {
FirebaseUser result = await Provider.of<AuthService>(context)
.loginUser(email: _email, password: _password);
print(result);
} on AuthException catch (error) {
return _buildErrorDialog(context, error.message);
} on Exception catch (error) {
return _buildErrorDialog(context, error.toString());
}
}
}
Future _buildErrorDialog(BuildContext context, _message) {
return showDialog(
builder: (context) {
return AlertDialog(
title: Text('Error Message'),
content: Text(_message),
actions: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
})
],
);
},
context: context,
);
}
}
When I log in, I've put a print statement in the init state of my home page. Successful login does execute this code as I get "I am in the home page" however my screen still shows my login screen. If I press R to rebuild, I am automatically logged in and see my home page as required.
If I logout, everything works perfectly and I am automatically redirected to the login screen as expected.
Am I doing something wrong?

Answer 1

From what I understand on your implementation, it seems that you're trying to listen for authentication changes using FutureBuilder. However, this won't work since FutureBuilder only run once when called. If you want to listen for auth status changes, StreamBuilder is best used for this case. You can use this to listen for value changes on a Stream.