Flutter UI在物理设备上构建和运行应用程序后就毁了

mwyxok5s  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我在Flutter项目中遇到了一个问题,当在模拟器中运行代码时,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在模拟器中运行应用程序。
1.观察UI是否正确显示。
1.使用flutter build apk构建应用程序。
1.在物理设备上安装生成的APK。
1.在设备上启动应用程序。
1.注意,UI被破坏了。

预期行为:

UI应该是一致的,并且在物理设备上运行应用时显示为模拟器中的样子。
我试着研究这个问题,但没有找到任何相关的解决方案。任何指导或建议,什么可能导致这种差异的UI外观将不胜感激。谢谢你!

图片:

运行代码时:image1发布应用程序后:image2

57hvy0tb

57hvy0tb1#

在查看它时,我注意到一些可能导致模拟器和物理设备之间UI差异的潜在问题:

Expanded widget的用法:Expanded widget应用作Flex widget(如RowColumn)的子组件,以指示子组件应占用可用空间。在我的代码中,我使用Expanded作为InkWell的直接子元素,这可能会导致意外的布局行为。为了解决这个问题,我删除了扩展的小部件,让容器采用其自然宽度。
硬编码尺寸:i为一些小部件提供了硬编码的尺寸,例如用于“登录”和“注册”按钮的Container。硬编码尺寸可能导致不同设备上的布局问题。考虑使用相对维度(例如,百分比或MediaQuery来获取屏幕大小),以使UI更具响应性。
缺少关键参数:在我的代码中,MyApp、SplashScreen和Welcome小部件的构造函数有一个super.key参数,这似乎是一个错别字。应该是Key。但是,在本例中,由于我没有显式地使用key,因此可以完全删除key参数。

相关问题