I'm using the riverpod state management dependency. And while I was testing the login error message a strange behavior occured. If I try two or more consecutive (another snackbar is already being shown) times to login the SnackBar enters a loop, and it keeps on showing and disappering the same snackbar message. I logged the .showSnackBar function and it's working just fine, no loop prints found... This happens either successuful or error states.
Widget:
ref.listen<AsyncValue>(loginControllerProvider, (_, state) {
state.when(
data: (data) {
counter++;
print(counter); //Trying to see the loop right here, it printed correctly
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Login realizado com sucesso!")),
);
},
error: (error, stackTrace) {
if (error is LoginException) {
counter++;
print(counter); //Trying to see the loop right here, it printed correctly
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(error.message)),
);
}
},
loading: () {},
);
});
WIdgetController:
class LoginController extends StateNotifier<AsyncValue<void>> {
LoginController({required this.loginService})
: super(const AsyncData<void>(
null)); //Inicialação do AsyncValue, isso é obrigatorio pois ele é
final LoginService loginService;
Future<void> logar(String email, String password) async {
state = const AsyncLoading<void>();
await Future.delayed(const Duration(seconds: 2));
state = await AsyncValue.guard<void>(
() => loginService.login(email, password),
);
}
}
I managed a way out of this by executing:
ScaffoldMessenger.of(context).clearSnackBars();
But do I really have to do this everytime?
Related
if (_formKey.currentState!.validate()) {
try {
final newUser =
await _auth.createUserWithEmailAndPassword(
email: email.text, password: password.text);
if (newUser != null) {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => DashboardScreen(),
// ));
Navigator.pushNamed(context, 'dashboard');
}
setState(() {});
} catch (e) {
print(e);
}
}
},
this warning shown on Navigator.pushNamed(context,'dashboard');
trying to navigate to the dashboar screen.
1.
You have to put delay for other process can finish till then
Future.delayed(Duration(milliseconds: 200)).then((value) {
Navigator.pushNamed(context, 'dashboard')
});
2.
add if (!mounted) return; before Navigator.pushNamed(context, 'dashboard')
3.
Please put await before the navigator flutter because you used an asynchronously method call so you have to wait until the process is finished then you can navigate to your pages
await Navigator.pushNamed(context, 'dashboard');
4.
Also, you can store your navigator into a var and then use it.
final nav = Navigator.of(context);
nav.pushNamed('dashboard');
I am trying to utilize FirebaseAuth's verify email functionality in my Flutter app. I'm using Flutter_BLoC 8. The code works, but when I verify the email address by clicking the link in the generated email, the prior state is apparently still buffered in my app and I need to click TWICE on the 'Continue' button to proceed to the Home Screen.
Here's my code:
ElevatedButton(
onPressed: () async {
context.read<EmailVerificationBloc>().add(const IsEmailVerified());
final isVerified = context.read<EmailVerificationBloc>().state;
if (isVerified == const EmailVerificationState.verified()) {
context.router.replace(const HomeRoute());
} else {
showErrorFlash(context, 'Email Is Not Verified');
}
},
child: const Center(
child: Text('Continue'),
),
),
Here's the BLoC event:
Future<void> _onIsEmailVerified(IsEmailVerified event, Emitter emit) async {
final successOrFailure = await _authRepository.isUserEmailVerified();
successOrFailure.fold(
(failure) {
emit(EmailVerificationState.error(failure));
},
(success) {
if (success) emit(const EmailVerificationState.verified());
},
);
}
And lastly, here's the repository method that's being called:
Future<Either<AuthFailure, bool>> isUserEmailVerified() async {
try {
await _currentUser!.reload(); // We will only call on authenticated users, so we don't expect null
return right(_currentUser!.emailVerified);
} on FirebaseAuthException catch (e) {
final error = e.code;
switch (error) {
case 'network-request-failed':
return left(const AuthFailure.noNetworkConnection());
default:
return left(const AuthFailure.unexpectedError());
}
} on PlatformException {
return left(const AuthFailure.unexpectedError());
}
}
Any ideas on how I can, for lack of a better term, flush the prior state? I'm sort of new to Flutter and BLoC, so I'm hopeful it's a relatively easy thing I'm just overlooking.
Thanks in advance.
During the email app signup process using firebaseAuth.createUserWithEmailAndPassword, when I try to do an upload or save to prefs in the .then part it throws this error:
NoSuchMethodError: The getter 'data' was called on null.
So I can work around this by Navigating to a new screen and postponing processing of the user's TextFormField input till there, but it's messy and bugs me.
Doing anything big in the .then seems problematic but I don't really know what's causing the problem, or what in fact the best way is to solve this kind of issue for future clarity. Education appreciated!
void registerToFb() {
firebaseAuth
.createUserWithEmailAndPassword(
email: emailController.text, password: passwordController.text)
.then((result) async {
Person user = new Person();
user.email = emailController.text;
user.firstName = firstNameController.text;
user.surname = surnameController.text;
user.postcode = postcodeController.text;
user.password = passwordController.text;
user.city = cityController.text ?? "Edinburgh";
user.firebaseId = result.user.uid;
Map<String, dynamic> firebaseUpload = user.toMap();
print("Attempting to reduce upload");
firebaseUpload.removeWhere((key, value) => value == null);
user.country = "GB";
String path = "${user.country}/${user.city}/People";
print("Attempting record upload");
DocumentReference autoId =
await myFirestore.collection(path).add(firebaseUpload);
user.personId = autoId.id;
user.saveToPrefs(prefs);
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => MyHomePage()));
}).catchError((err) {
print("Login thrown an error...\n${err.toString()}");
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Error 10"),
content: Text("${err.toString()}"),
actions: [
ElevatedButton(
child: Text("Ok"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
});
});
A suggestion from me is to completely remove the .then() callback, since you have it stated as async. A better approach would be to make the whole function async, so you can do all your async code directly inside that.
Make the function async
void registerToFb() async { ...
Change the .then() callback to a simple await and store the result in your result variable.
var result = await firebaseAuth.createUserWithEmailAndPassword(email: emailController.text, password: passwordController.text);
I would highly suggest surrounding this statement with a try/catch block, to avoid unhandled errors:
try {
var result = await firebaseAuth.createUserWithEmailAndPassword(
email: emailController.text,
password: passowrdController.text
);
} on FirebaseAuthException catch (e) {
if (e.code == 'weak-password') {
print('password too weak.');
} else if (e.code == 'email-already-in-use') {
print('email already exists');
}
} catch (e) {
print(e);
}
You might get this error because you marked the .then() call as async, since it then executes asynchronously and the data might not be "there" yet, but I am not sure about this one.
I wrote a StreamProvider that I listen to right after startup to get all the information about a potentially logged in user. If there is no user, so the outcome would be null, the listener stays in loading state, so I decided to send back a default value of an empty user to let me know that the loading is done.
I had to do this, because Hive's watch() method is only triggered when data changes, which it does not at startup.
So after that, I want the watch() method to do its job, but the problem with that, are the following scenarios:
At startup: No user - Inserting a user -> watch method is triggered -> I get the inserted users data -> Deleting the logged in user -> watch method is not triggered.
At startup: Full user - Deleting the user -> watch method is triggered -> I get an empty user -> Inserting a user -> watch method is not triggered.
After some time I found out that I can make use of all CRUD operations as often as I want to and the Hive's box does what it should do, but the watch() method is not triggered anymore after it got triggered once.
The Streamprovider(s):
final localUsersBoxFutureProvider = FutureProvider<Box>((ref) async {
final usersBox = await Hive.openBox('users');
return usersBox;
});
final localUserStreamProvider = StreamProvider<User>((ref) async* {
final usersBox = await ref.watch(localUsersBoxFutureProvider.future);
yield* Stream.value(usersBox.get(0, defaultValue: User()));
yield* usersBox.watch(key: 0).map((usersBoxEvent) {
return usersBoxEvent.value == null ? User() : usersBoxEvent.value as User;
});
});
The Listener:
return localUserStream.when(
data: (data) {
if (data.name == null) {
print('Emitted data is an empty user');
} else {
print('Emitted data is a full user');
}
return Container(color: Colors.blue, child: Center(child: Row(children: [
RawMaterialButton(
onPressed: () async {
final globalResponse = await globalDatabaseService.signup({
'email' : 'name#email.com',
'password' : 'password',
'name' : 'My Name'
});
Map<String, dynamic> jsonString = jsonDecode(globalResponse.bodyString);
await localDatabaseService.insertUser(User.fromJSON(jsonString));
},
child: Text('Insert'),
),
RawMaterialButton(
onPressed: () async {
await localDatabaseService.removeUser();
},
child: Text('Delete'),
)
])));
},
loading: () {
return Container(color: Colors.yellow);
},
error: (e, s) {
return Container(color: Colors.red);
}
);
The CRUD methods:
Future<void> insertUser(User user) async {
Box usersBox = await Hive.openBox('users');
await usersBox.put(0, user);
await usersBox.close();
}
Future<User> readUser() async {
Box usersBox = await Hive.openBox('users');
User user = usersBox.get(0) as User;
await usersBox.close();
return user;
}
Future<void> removeUser() async {
Box usersBox = await Hive.openBox('users');
await usersBox.delete(0);
await usersBox.close();
}
Any idea how I can tell the StreamProvider that the watch() method should be kept alive, even if one value already got emitted?
but the watch() method is not triggered anymore after it got triggered
once
Thats because after every CRUD you're closing the box, so the stream (which uses that box) stop emitting values. It won't matter if you're calling it from somewhere outside riverpod (await Hive.openBox('users')) its calling the same reference. You should close the box only when you stop using it, I would recommend using autodispose with riverpod to close it when is no longer used and maybe put those CRUD methods in a class controlled by riverpod, so you have full control of the lifecycle of that box
final localUsersBoxFutureProvider = FutureProvider.autoDispose<Box>((ref) async {
final usersBox = await Hive.openBox('users');
ref.onDispose(() async => await usersBox?.close()); //this will close the box automatically when the provider is no longer used
return usersBox;
});
final localUserStreamProvider = StreamProvider.autoDispose<User>((ref) async* {
final usersBox = await ref.watch(localUsersBoxFutureProvider.future);
yield* Stream.value(usersBox.get(0, defaultValue: User()) as User);
yield* usersBox.watch(key: 0).map((usersBoxEvent) {
return usersBoxEvent.value == null ? User() : usersBoxEvent.value as User;
});
});
And in your methods use the same instance box from the localUsersBoxFutureProvider and don't close the box after each one, when you stop listening to the stream or localUsersBoxFutureProvider it will close itself
I understand presence Bloc and Scoped Model in flutter.
But that isn't separate like a layout file in java's SpringBoot.
You can actually separate layout and logic in flutter. I have an example.
In my LoginForm I have a function
_attemptLogin() {
BlocProvider.of<LoginBloc>(context).add(
LoginButtonPressed(
context: context,
email: _tecEmail.text,
password: _tecPassword.text,
),
);
}
called by
RaisedButton(
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(
color: Colors.white,
),
),
onPressed: (state is LoginProcessing)
? null
: _attemptLogin,
),
and in my LoginBloc, I have the ff code inside mapEventToState
#override
Stream<LoginState> mapEventToState(LoginEvent event) async* {
if (event is LoginButtonPressed) {
yield LoginProcessing();
await Future.delayed(const Duration(milliseconds: 250));
try {
var loginResponse =
await _attemptLogin(userRepository, event.email, event.password);
/// Get Firebase Token
final firebaseToken =
await Provider.of<FirebaseMessagingProvider>(context).getToken();
if (loginResponse['data'] != null && firebaseToken != null) {
User user =
_setUserFromJsonMap(context, loginResponse['data']['user']);
IdentityToken identityToken = _setIdentityTokenFromJsonMap(
context, loginResponse['data']['token']);
/// Request Firebase Token Update
var jsonCreateUserFirebaseTokenResponse =
await _attemptFirebaseTokenUpdate(context, firebaseToken);
if (jsonCreateUserFirebaseTokenResponse != null) {
authBloc.add(LoggedIn(identityToken: identityToken));
yield LoginInitial();
}
} else {
yield LoginFailure(message: 'Login failed.');
}
} catch (error, stackTrace) {
print(error);
print(stackTrace);
await Future.delayed(const Duration(seconds: 1));
yield LoginFailure(
message: 'Login failed. Please check your internet connection.');
}
}
}
I didn't include all the other functions/classes as I have already deleted several lines of code to make it look readable, since it contains a ton of code already; which is unnecessary for only trying to prove a point that you can actually separate code for your view and logic.