各种移动设备上的颤动响应问题

Question

我是 Flutter 的初学者，我尝试创建一个虚拟登录页面。当我尝试运行该应用程序时，它在 Pixel 3 XL 上完美无缺，但在 Pixel 2 XL 上表现不佳。我将如何管理响应能力？我遇到了 MediaQuery 小部件，但如何为每个设备创建一个完全响应的应用程序？当今的移动设备（如缺口显示、全屏等）有很多变化，随后出现了平板电脑。我怎么能管理这个？我应该为每个分辨率编写代码吗？

这是我在 Pixel 3 XL 和 Pixel 2 XL 上的设计

Answer 1

您可以将 SingleChildScrollView 用作 parent,

SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
        ),
      ),
    );

编辑：同时从 Stack 小部件中删除 fit: StackFit.expand,。

Answer 2

此问题背后的原因是高度为 100px 的 sizedbox 小部件。删除它并使用 mainaxisalignment 作为 spaceevenly 给出所需的输出。这是修改后的代码：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          bgimage,
         Column(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                logoimage,    
                userName(),    
                password(),
                forgotPassword(),    
                loginButton(),
                googleSignIn(),
                signUp()
              ],
            ),
        ],
      ),
    );
  }

这解决了问题。

Answer 3

为不同的屏幕尺寸做出响应的最简单的方法 UI 是 Sizer 插件。

响应式 UI 在任何屏幕尺寸的设备和平板电脑中。看看这个插件⬇️
https://pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

像这样在值后使用.h、.w、.sp⬇️

示例：

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

我用这个插件构建了许多响应式 UI。

Answer 4

使用这个包 flutter_next 使用这个你可以设计响应式 UI 即使是桌面网络和所有东西，他们也有一个演示所以你可以在那里检查

各种移动设备上的颤动响应问题

Flutter responsiveness problem on various mobile devices

dart

flutter

flutter-test

flutter-dependencies

flutter-layout