I am working on a Flutter app, I am using GetX state management.
Whenever I run my application in debug, or release in the emulator, it works totally fine. But when I run the release on the physical device, it stuck on white screen. It works fine on first run sometimes, but after killing and opening the app again, it shows the same white screen.
Here's the code
main.dart:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:orbit_money_app/controllers/send_money_controller.dart';
import 'package:orbit_money_app/providers/customer_provider.dart';
import 'package:orbit_money_app/routes/route_bindings.dart';
import 'package:get/get.dart';
import 'package:orbit_money_app/util/color_util.dart';
import 'package:provider/provider.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
),
);
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => CustomerProvider()),
],
child: GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Orbit Money',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: ColorUtil.secondaryColor,
secondary: ColorUtil.secondaryColor,
primary: ColorUtil.secondaryColor,
),
primarySwatch: Colors.red,
useMaterial3: true,
inputDecorationTheme: InputDecorationTheme(
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: ColorUtil.secondaryColor,
),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: ColorUtil.secondaryColor,
),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
border: const OutlineInputBorder(
borderSide: BorderSide(
color: ColorUtil.secondaryColor,
),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
errorStyle: GoogleFonts.poppins(
color: Colors.red,
))),
getPages: RouteBindings.routes,
initialRoute: RouteBindings.getInitialRoute(),
initialBinding: BindingsBuilder(() {
Get.lazyPut(() => SendMoneyController());
}),
),
);
}
}
Here's one of the screens:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:orbit_money_app/util/color_util.dart';
import 'package:orbit_money_app/routes/route_names.dart';
class GetStarted2View extends GetWidget {
const GetStarted2View({super.key});
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light,
),
);
return Scaffold(
body: Container(
padding: EdgeInsets.symmetric(
horizontal: Get.mediaQuery.size.width * 0.05,
vertical: Get.mediaQuery.size.height * 0.1),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'lib/assets/background_images/offwhite_circles_background.png'),
fit: BoxFit.cover,
),
),
height: Get.mediaQuery.size.height,
width: Get.mediaQuery.size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
'lib/assets/logos/logo_long_black.png',
width: Get.mediaQuery.size.width * 0.5,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello!",
style: GoogleFonts.poppins(
fontSize: Get.mediaQuery.size.width * 0.1,
fontWeight: FontWeight.w600,
color: ColorUtil.secondaryColor),
),
const SizedBox(
height: 10,
),
Text(
"Welcome to Orbitmoney app, seamless experiences await at your fingertips!",
style: GoogleFonts.poppins(
fontSize: Get.mediaQuery.size.width * 0.045,
fontWeight: FontWeight.w400,
color: ColorUtil.secondaryColor),
),
const SizedBox(
height: 25,
),
Row(
children: [
InkWell(
onTap: () {
Get.toNamed(RouteNames.signIn);
},
child: Container(
padding: EdgeInsets.symmetric(
horizontal: Get.mediaQuery.size.width * 0.05,
vertical: Get.mediaQuery.size.width * 0.035),
decoration: BoxDecoration(
border: Border.all(
color: ColorUtil.tertiaryColor,
width: 1,
),
borderRadius: BorderRadius.circular(15),
),
child: Text(
"Sign In",
style: GoogleFonts.poppins(
fontSize: Get.mediaQuery.size.width * 0.05,
fontWeight: FontWeight.w500,
color: Colors.black),
),
),
),
SizedBox(
width: Get.mediaQuery.size.width * 0.03,
),
ElevatedButton(
onPressed: () {
Get.toNamed(RouteNames.chooseAgent);
},
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
horizontal: Get.mediaQuery.size.width * 0.15,
vertical: Get.mediaQuery.size.width * 0.035),
backgroundColor: ColorUtil.tertiaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
child: Text(
"Get Started",
style: GoogleFonts.poppins(
fontSize: Get.mediaQuery.size.width * 0.05,
fontWeight: FontWeight.w400,
color: Colors.white),
),
)
],
),
],
),
],
),
));
}
}
And this is the error I am facing:
I made a blank screen, where I added a timer of 300 miliseconds using Future.delayed, which then took me to the required screen. This is how I solved it.