In my application that I am currently developing, I perform a check on the service before all screens are loaded, and according to this check, I bring two different screens to the user. However, both these screens contain MaterialApp and if there is no problem after the service check, the application switches from one MaterialApp to another MaterialApp.
During this transition, there is an instant black screen display in my application.
Can you help me on how to avoid this problem?
Note: There is a provider structure in the top layer of my application (which wraps the MaterialApp). If I call this layer without receiving data from the service control, the provider structure gives an error. So I have to call this structure according to the result after the service check. Therefore I am using 2 different MaterialApp.
Here is my code:
class MyApp extends StatefulWidget {
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isServiceAddressChecked = false;
bool isThereInternetConnectionError = false;
@override
void initState() {
// TODO: implement initState
super.initState();
checkServiceAddress();
}
@override
Widget build(BuildContext context) {
return isServiceAddressChecked
? OverlaySupport.global(
child: ChangeNotifierProvider(
create: (context) => UserViewModel(),
child: MaterialApp(
navigatorKey: MaterialKeyService.materialKey,
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
theme: ThemeData(fontFamily: 'Geogrotesque'),
debugShowCheckedModeBanner: false,
home: LoaderOverlay(child: LandingPage()),
),
),
)
: MaterialApp(
navigatorKey: MaterialKeyService.materialKey,
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
theme: ThemeData(fontFamily: 'Geogrotesque'),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
color: const Color(0xff007ac1),
child: isThereInternetConnectionError
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"internetError".tr(),
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 45,
width: 200,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/registerbuton.png"),
fit: BoxFit.fill,
)),
child: TextButton(
onPressed: () async {
setState(() {
isServiceAddressChecked = false;
isThereInternetConnectionError = false;
});
await checkServiceAddress();
},
child: Text(
"tryAgain2".tr().toString(),
style: const TextStyle(color: Color(0xff007ac1), fontWeight: FontWeight.normal),
),
),
),
),
],
),
)
: const Center(
child: SizedBox(
height: 0,
width: 0,
),
),
),
),
);
}
Future<void> getServiceAddress() async {
var apiData = await getServiceAddressApi();
apiAddress = apiData['apiAddress'];
socketAddress = apiData['socketAddress'];
}
Future<dynamic> getServiceAddressApi() async {
try {
var response = await http.get(Uri.parse("https://something"));
if (response.statusCode >= 200 && response.statusCode <= 299) {
var apiData = utf8.decode(response.bodyBytes);
var apiDataMap = jsonDecode(apiData);
return apiDataMap;
} else {
var responseMap = jsonDecode(utf8.decode(response.bodyBytes));
if (responseMap['message'] != null) throw Exception(responseMap['message']);
throw Exception("httpError");
}
} on SocketException {
throw Exception('internetError');
} on HttpException {
throw Exception('httpError');
} on FormatException {
throw Exception('httpError');
}
}
Future<void> checkServiceAddress() async {
try {
await getServiceAddress();
setState(() {
isServiceAddressChecked = true;
});
} catch (e) {
if (e.toString().substring(11) == "internetError") {
setState(() {
isThereInternetConnectionError = true;
});
}
}
}
}