You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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,
          ),
        ),
      ],
    );
  }

复现步骤

  1. 执行flutter run命令在模拟器中运行应用,UI显示正常
  2. 执行flutter build apk命令构建应用
  3. 将生成的APK安装到真机
  4. 在真机上启动应用,发现UI出现错乱

预期行为

真机运行应用时,UI应与模拟器中保持一致,显示正常

截图说明

  • 模拟器运行截图:UI布局规整,Logo、文字、按钮的位置和样式均符合预期
  • 真机运行截图:UI布局错乱,元素位置偏移、样式变形

已尝试搜索相关问题但未找到合适解决方案,任何关于该UI显示差异成因的指导或建议都将不胜感激。

内容的提问来源于stack exchange,提问作者Harsh Sutariya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 12:52:53