Flutter打包APK后真机UI异常问题求助
Flutter项目打包APK后真机UI错乱问题求助
在模拟器运行代码时UI显示正常,但执行flutter build apk命令构建应用并安装到真机后,UI出现错乱,无法确定问题成因,寻求帮助定位并解决。
代码
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, ), ), ], ); }
复现步骤
- 执行
flutter run命令在模拟器中运行应用,UI显示正常 - 执行
flutter build apk命令构建应用 - 将生成的APK安装到真机
- 在真机上启动应用,发现UI出现错乱
预期行为
真机运行应用时,UI应与模拟器中保持一致,显示正常
截图说明
- 模拟器运行截图:UI布局规整,Logo、文字、按钮的位置和样式均符合预期
- 真机运行截图:UI布局错乱,元素位置偏移、样式变形
已尝试搜索相关问题但未找到合适解决方案,任何关于该UI显示差异成因的指导或建议都将不胜感激。
内容的提问来源于stack exchange,提问作者Harsh Sutariya
相关产品推荐
相关产品推荐

