Flutter横屏无滚动认证页面右侧内容自适应比例问题求助

问题描述 #

我正在Flutter中构建一个支持横屏模式且无需滚动的响应式认证页面。左侧区域展示图片，右侧区域包含表单和按钮。当前的挑战是确保右侧内容的响应式适配，且不启用滚动功能。

class AuthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);

    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Row(
        children: [
          // Left-side image
          Flexible(
            flex: 3,
            child: CardsImage(screenHeight: screenHeight),
          ),
          // Right-side form
          Flexible(
            flex: 3,
            child: Padding(
              padding: EdgeInsets.symmetric(
                horizontal: screenWidth * 0.03,
                vertical: screenHeight * 0.02,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Repeated BlocBuilder handling AuthState logic
                  // Form fields and buttons
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

已尝试方案 #

• 为两侧区域使用Flexible组件。
• 以屏幕尺寸的百分比计算内边距和外边距。
• 尝试使用ScreenUtil进行响应式缩放，但问题仍存在。

内容的提问来源于stack exchange，提问作者mahmoud hassan