I'm facing an issue with my Flutter project where the UI appears perfectly fine when running the code in the emulator. However, after building the app using the command flutter build apk and installing it on my physical device, the UI becomes ruined. I'm unsure about the cause of this issue and I'm seeking help to identify and resolve it.
Code:
import 'package:flutter/material.dart';
import 'Screens/loginScreen.dart';
import 'Functionality/loginFunctionality.dart';
import 'Screens/signupScreen.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: SplashScreen(),
);
}
}
// __________________________________________________________________________________________
// ______________________________Splash_Screen_______________________________________________
// __________________________________________________________________________________________
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
LoginFunctionality().checkLoginStatus(ctx: context);
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(255, 253, 253, 0.73),
Color.fromARGB(130, 255, 17, 0),
],
),
),
child: Center(child: elsnerLogo()),
),
));
}
}
// __________________________________________________________________________________________
// ___________________________________Welcome_Screen_________________________________________
// __________________________________________________________________________________________
class Welcome extends StatelessWidget {
const Welcome({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
elsnerLogo(),
const SizedBox(
height: 100,
),
const Text(
"Welcome!\n\nLet's find you some services.",
style: TextStyle(fontSize: 20),
),
const SizedBox(
height: 100,
),
// __________________________________________________________________________________________
// _________________________________Buttons__________________________________________________
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const LoginScreen()),
);
},
child: Expanded(
child: Container(
alignment: Alignment.center,
height: 50,
width: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red.withOpacity(0.25),
blurRadius: 5,
blurStyle: BlurStyle.normal,
spreadRadius: 5)
],
color: const Color.fromARGB(255, 255, 7, 7),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
"Login",
style: TextStyle(
fontSize: 15,
color: Color.fromARGB(255, 255, 255, 255),
fontWeight: FontWeight.bold),
),
),
),
),
const SizedBox(
width: 20,
),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SignupScreen()));
},
child: Expanded(
child: Container(
alignment: Alignment.center,
height: 50,
width: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
blurRadius: 5,
blurStyle: BlurStyle.normal,
spreadRadius: 5,
// offset: ()
)
],
color: const Color.fromARGB(255, 53, 49, 35),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
"Sign UP",
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
// __________________________________________________________________________________________
// __________________________________________________________________________________________
],
),
),
),
),
);
}
}
// ________________________________________________________________________________________
// ________________________________________________________________________________________
// ________________________________________________________________________________________
Widget elsnerLogo() {
return const Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"UN",
style: TextStyle(
shadows: [
Shadow(
color: Color.fromARGB(255, 209, 140, 140),
offset: Offset(1.0, 5.0),
blurRadius: 5)
],
decoration: TextDecoration.underline,
decorationColor: Colors.black,
decorationThickness: 2,
color: Colors.red,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
Text(
"BIND",
style: TextStyle(
shadows: [
Shadow(
color: Color.fromARGB(255, 109, 92, 92),
offset: Offset(1, 5),
blurRadius: 5)
],
decoration: TextDecoration.overline,
decorationColor: Colors.red,
decorationThickness: 2,
color: Colors.black,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
],
);
}
Steps to Reproduce:
flutter build apk.Expected Behavior:
The UI should be consistent and appear as it does in the emulator when running the app on a physical device.
I've tried researching this issue but haven't found any relevant solutions. Any guidance or suggestions on what could be causing this discrepancy in the UI appearance would be greatly appreciated. Thank you!
Images:
Upon reviewing it, I noticed a few potential issues that could cause the UI discrepancy between the emulator and the physical device:
Usage of Expanded widget: The Expanded widget should be used as a child of a Flex widget (such as Row or Column) to indicate that the child should take up the available space. In my code, i am using Expanded as a direct child of InkWell, which might cause unexpected layout behavior. To fix this, i removed the Expanded widget and let the Container take its natural width.
Hard-coded dimensions: i have hard-coded dimensions for some widgets, such as the Container used for the "Login" and "Sign Up" buttons. Hard-coded dimensions might lead to layout issues on different devices. Consider using relative dimensions (e.g., percentages or MediaQuery to get the screen size) to make the UI more responsive.
Missing key parameter: In my code, the constructors for MyApp, SplashScreen, and Welcome widgets have a super.key parameter, which seems to be a typo. It should be Key instead. However, in this case, since i am not explicitly using the key, i can remove the key parameter altogether.
