Why flutter Navigator.of(context).push(MaterialPageRoute(()) not working - flutter

Question

I have a small app here, i will check buildNumber of current app and compare to my remote api data, based on this condition i will show the user interfaces.
I have home and updateApp screen where home is the normal webview screen and UpdateApp is a screen where user is required to update the new version of my app.
But condition satisfies but update screen is not showing.
// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, use_build_context_synchronously, unrelated_type_equality_checks, unused_element
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:webview_test/models/app_version.dart';
import 'package:webview_test/services/remote_service.dart';
import 'package:webview_test/views/update_app.dart';
import 'package:package_info_plus/package_info_plus.dart';
void main() {
runApp(MyHomePage());
}
class MyHomePage extends StatefulWidget {
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final flutterWebViewPlugin = FlutterWebviewPlugin();
bool isLoading = true;
double webProgress = 0;
bool isLoaded = false;
List<AppVersion>? appVersions;
int buildNumber = 0;
late String packageName;
#override
#override
void initState() {
super.initState();
flutterWebViewPlugin.onProgressChanged.listen((double progress) {
setState(() {
this.webProgress = progress;
});
print("The progress is $progress");
});
getVersions();
getBuild();
}
//Fetching remote data for app versions.
getVersions() async {
appVersions = await RemoteService().getAppVersion();
if (appVersions != null) {
setState(() {
isLoaded = true;
});
}
}
//getting app information to compare remote app versions.
getBuild() async {
PackageInfo packageInfo = await PackageInfo.fromPlatform();
packageName = packageInfo.packageName;
buildNumber = int.parse(packageInfo.buildNumber);
print("build number is $buildNumber");
if (buildNumber == 1) {
print("Build number is $buildNumber");
}
}
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
systemNavigationBarColor: Colors.white,
systemNavigationBarIconBrightness: Brightness.dark));
return MaterialApp(
home: buildNumber == 1
? proceedToUpdate(context)
: SafeArea(
child: Scaffold(
body: WillPopScope(
onWillPop: () async {
if (await flutterWebViewPlugin.canGoBack()) {
flutterWebViewPlugin.goBack();
return false;
} else {
SystemNavigator.pop();
return true;
}
},
child: Stack(
children: [
Positioned.fill(
child: Column(
children: [
webProgress < 1
? SizedBox(
height: 5,
child: LinearProgressIndicator(
value: webProgress,
color: Colors.blue,
backgroundColor: Colors.white,
),
)
: SizedBox(),
Expanded(
child: WebviewScaffold(
url: "https://google.com",
mediaPlaybackRequiresUserGesture: false,
withLocalStorage: true,
),
),
// isLoading
// ? Center(
// child: CircularProgressIndicator(),
// )
// : Stack(),
],
),
),
],
)),
),
),
);
}
proceedToUpdate(context) {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => UpdateApp()));
}
}

Answer 1

Your variable context in Navigator.of(context).push(...) isn't correct.
You're trying to navigate outside build(BuildContext context), so it won't work. Function build(BuildContext context) is the place where it build your mobile interface - UI screen.
Now in your StatefulWidget MyHomePage -> initState() -> getBuild() -> _proceedToUpdate() -> Navigator.of(context).push(...). The variable context in your Navigator command is not context of your screen UI. Even though function _proceedToUpdate() can run, it cannot navigate.
You may try to show an dialog. Each dialog also has a context. You can show an dialog and then navigate to somewhere when press "OK" button. It'll success.
Good luck!
Update:
Seems like you don't want to show any dialog, therefore we need another approach. You could check the build version in main() async {}. Then pass value buildNumber to somewhere (directly pass to MyApp() or use singleton to make it more professional :D). Then you can make it like: home: _getFirstScreen()
_getFirstScreen() {
if (buildNumber == 1) return UpdateScreen();
else return MyHomePage();
}