I have many views and widgets that pop with different type data. Which is working.
The problem lies when i need to do two Navigator.pop() in a short time.
My navigation tree is:
WelcomeView.dart
—AccountCreation.dart (which has a showDialog inside it)
So here is the code that navigates to AccountCreation from WelcomeView:
logEvent('account creation button pressed');
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const AccountCreation()
),
).then((logIn) {
if (logIn) {
logEvent('context is $context');
logEvent('logIn pop data is: $logInnproceeding with completeLogin() function');
showLoadingDialog(context);
completeLogin();
}
});
AccountCreation pop result is a boolean:
Navigator.of(context, rootNavigator: true).pop(true);
and the custom showDialog i use in AccountCreation pop result is of type AlertPopData:
enum AlertPopData {
firstButton,
secondButton,
thirdButton,
noAction
}
what is happening is despite me having organized it to the best of my ability, i’m still getting both these errors in Firebase Crashlytics from users (which i can never replicate on any of my real devices ios and android, or simulators):
Fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError
type ‘bool’ is not a subtype of type ‘AlertPopData?’ of ‘result’
Fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError
type ‘AlertPopData’ is not a subtype of type ‘bool’
which indicates that they are not popping in the correct order. which should be:
showDialog pops an AlertPopData value:
AlertPopData? alertData = await showAlert(context: context, alertTitle: loc.alert, alertText: loc.emailLinkingSuccessful, withoutSecondButton: true);
logEvent('context after showAlert is: $context');
logEvent('alertData is $alertData');
if (alertData == AlertPopData.firstButton) {
logEvent('email linking successful');
Future.delayed(const Duration(milliseconds: 250), () {
Navigator.of(context, rootNavigator: true).pop(true);
});
}
the alertData is initialized with the pop data of the showDialog, and after that, i check if its AlertPopData.firstButton, and I even add a delay of 250ms to then pop AccountCreation.
So i’m confused as to what is even happening. Why on some devices is the popping order all wrong?
What measures could i take to prevent it?
I’m thinking of creating a function outside the Widget build method of AccountCreation, and having Navigator.of(context, rootNavigator: true).pop(true); there.
Would that fix it?
How to have showDialog navigator.pop result, trigger the navigator.pop of the view we are currently at.
For more context here is the code for my custom showDialog
Future<AlertPopData?> showAlert( {
required BuildContext context,
required String alertTitle,
required String alertText,
String? firstButtonText,
String? secondButtonText,
String? thirdButtonText,
VoidCallback? firstButtonAction,
VoidCallback? secondButtonAction,
VoidCallback? thirdButtonAction,
bool withoutSecondButton = false,
}) /*async*/ {
final localizations = AppLocalizations.of(context);
final firstButtonText0 = firstButtonText ?? localizations?.yes ?? '';
final secondButtonText0 = secondButtonText ?? localizations?.no ?? '';
return showDialog<AlertPopData>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double dialogMaxWidth = 400.0;
double padding = screenWidth > dialogMaxWidth ? (screenWidth - dialogMaxWidth) / 2 : 0;
final brightness = Theme.of(context).brightness;
return PopScope(
canPop: false,
child: Padding(padding: EdgeInsets.symmetric(horizontal: padding),
child: AlertDialog(backgroundColor: (brightness == Brightness.dark) ? const Color.fromRGBO(40, 40, 40, 1) : Theme.of(context).colorScheme.surface,
surfaceTintColor: Colors.transparent,
title: Text(alertTitle, textAlign: TextAlign.center, style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600,
color: (brightness == Brightness.dark) ? Colors.white : const Color.fromRGBO(30, 30, 30, 1)),),
content: (alertText.isNotEmpty) ?
SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(alertText, textAlign: TextAlign.center, style: TextStyle(fontSize: 15, color: (brightness == Brightness.dark) ? Colors.white : const Color.fromRGBO(30, 30, 30, 1)
),),
],
),
) : null,
contentPadding: EdgeInsets.fromLTRB(24.0, alertText.isNotEmpty ? 10.0 : 0, 24.0, alertText.isNotEmpty ? 24.0 : 0),
actions: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const CustomDivider(),
SizedBox(height: 40, child:
TextButton( style: TextButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 0),
minimumSize: const Size(88, 20),
),
child: Text(withoutSecondButton ? 'OK' : firstButtonText0, style: const TextStyle(fontSize: 15)),
onPressed: () {
if (firstButtonAction != null) {
firstButtonAction();
}
Navigator.of(context, rootNavigator: true).pop(AlertPopData.firstButton);
},
),
),
if (!withoutSecondButton)
const CustomDivider(),
if (!withoutSecondButton)
SizedBox(height: 40, child:
TextButton(
child: Text(secondButtonText0, style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 15)),
onPressed: () {
if (secondButtonAction != null) {
secondButtonAction();
}
Navigator.of(context, rootNavigator: true).pop(AlertPopData.secondButton);
},
),
),
if (thirdButtonText != null)
const CustomDivider(),
if (thirdButtonText != null)
SizedBox(height: 40, child:
TextButton(
child: Text(thirdButtonText, style: const TextStyle(fontWeight: FontWeight.w700, fontSize: 15)),
onPressed: () {
if (thirdButtonAction != null) {
thirdButtonAction();
}
Navigator.of(context, rootNavigator: true).pop(AlertPopData.thirdButton);
},
),
),
],
),
],
actionsAlignment: MainAxisAlignment.center,
actionsPadding: const EdgeInsets.only(bottom: 16),
)
)
);
},
);
}