Flutter 如何使用MediaQuery管理不同设备的屏幕布局？

我已经使用MediaQuery进行响应性设计，但我没有得到想要的结果。请引导我，帮助我走出困境。我在不同的移动设备上获得不同的UI。请告诉我哪里错了，或者指导我使用正确的代码来使用MediaQuery进行响应性设计。我不想使用SingleChildScrollView，因为它是登录屏幕。所以，我希望它能对所有设备做出响应，包括不同尺寸的Tab和手机。 下面是我的代码：

import 'dart:ui';
import 'package:conqer_music/App/Controller/UserController.dart';
import 'package:mvc_pattern/mvc_pattern.dart';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:conqer_music/App/Repository/UserRepository.dart' as userRepo;

class LoginPage extends StatefulWidget {
  static const String routeName = '/loginPage';

  @override
  _LoginState createState() => _LoginState();
}

final _formKey = GlobalKey<FormState>();

class _LoginState extends State<LoginPage> {
  late UserController _con;

  // _LoginState() : super(UserController()) {
  //   _con = controller;
  @override
  void initState() {
    super.initState();
    if (userRepo.currentUser.value.apiToken != null) {
      Navigator.of(context).pushReplacementNamed('/Pages', arguments: 2);
    }
  }

  bool _rememberMe = false;
  Widget logo() {
    final screenHeight = MediaQuery.of(context).size.height;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Padding(padding: EdgeInsets.only(top: screenHeight * 0.08)),
        CircleAvatar(
          child: Image.asset('lib/App/Assets/Images/Logo.png'),
          backgroundColor: Colors.grey,
          radius: 80.0,
        ),
        SizedBox(
          height: 10.0,
        ),
        Text(
          'LOGIN',
          style: TextStyle(
              fontSize: 28.0, fontWeight: FontWeight.bold, color: Colors.white),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }

  Widget backgroundImage() {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            constraints: BoxConstraints.expand(),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('lib/App/Assets/Images/BackGround.png'),
                    fit: BoxFit.cover)),
          )
        ],
      ),
    );
  }

  Widget userPass() {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return Expanded(
      child: Container(
        height: screenHeight * 0.2,
        width: screenWidth * 0.8,
        child: Column(
          children: <Widget>[
            TextFormField(
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please Enter Username';
                }
                return null;
              },
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                hintText: 'Username',
                hintStyle: TextStyle(
                  color: Color(0xFFbaa15e),
                ),
                suffixIcon: Icon(Icons.verified_user_sharp),
                border: OutlineInputBorder(
                    //  borderRadius: BorderRadius.circular(20.0),
                    ),
              ),
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 12,
                  textBaseline: TextBaseline.alphabetic),
            ),
            SizedBox(height: 20),
            TextFormField(
              validator: (String? pass) {
                if (pass!.length == 0) {
                  return 'Please Enter Password';
                }
              },
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                hintText: 'Password',
                hintStyle: TextStyle(color: Color(0xFFbaa15e)),
                suffixIcon: Icon(Icons.security_rounded),
                border: OutlineInputBorder(
                    //  borderRadius: BorderRadius.circular(20.0),
                    ),
              ),
              style: TextStyle(color: Colors.black, fontSize: 12),
            ),
          ],
        ),
      ),
    );
  }

  Widget rememberMe() {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      height: screenHeight * 0.05,
      // width: screenWidth * 0.4,
      padding: EdgeInsets.only(left: 40),
      child: Row(
        children: <Widget>[
          Checkbox(
            value: _rememberMe,
            checkColor: Colors.green,
            activeColor: Colors.white,
            onChanged: (value) {
              setState(() {
                _rememberMe = value!;
              });
            },
          ),
          Text(
            'Remember Me',
            style: TextStyle(color: Colors.white, fontSize: 14),
          ),
        ],
      ),
    );
  }

  Widget loginButton() {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      // height: screenHeight * 0.1,
      width: screenWidth * 0.8,
      child: RaisedButton(
        elevation: 4.0,

        onPressed: () {
          Navigator.of(context).pushReplacementNamed('/MainPage');
          if (_formKey.currentState!.validate()) {
            Navigator.of(context).pushReplacementNamed('/MainPage');

            _con.login();
          }
        },

        //  if (_formKey.currentState!.validate()) {
        // Navigator.of(context).pushReplacementNamed('/MainPage'),
        //  },
        padding: EdgeInsets.all(15.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),

        color: Color(0xFFbaa15e),
        child: Text(
          'LOGIN',
          style: TextStyle(
            color: Colors.white,
            letterSpacing: 1.5,
            fontSize: 14.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'OpenSans',
          ),
        ),
      ),
    );
  }

  Widget forgotPasswordhelp() {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      padding: EdgeInsets.fromLTRB(
          screenWidth * 0.14, 0, screenWidth * 0.14, screenHeight * 0.09),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            'Forgot Password?',
            style: TextStyle(
              color: Color(0xFFbaa15e),
            ),
          ),
          Text(
            'Help?',
            style: TextStyle(
              color: Color(0xFFbaa15e),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    final screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        height: screenHeight,
        width: screenWidth,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('lib/App/Assets/Images/BackGround.png'),
                fit: BoxFit.cover)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            logo(),
            SizedBox(
              height: 10,
            ),
            userPass(),
            rememberMe(),
            SizedBox(
              height: 10,
            ),
            loginButton(),
            SizedBox(
              height: 5,
            ),
            forgotPasswordhelp()
          ],
        ),
      ),
    );
  }
}

导入“dart:ui”；
导入“package:conqer_music/App/Controller/UserController.dart”；
导入“package:mvc_pattern/mvc_pattern.dart”；
进口“包装：颤振/cupertino.dart”；
进口“包装：颤振/材料.省道”；
导入“package:flatter/widgets.dart”；
进口“包装：颤振/颤振.省道”；
将“package:conqer_music/App/Repository/UserRepository.dart”作为userRepo导入；
类LoginPage扩展StatefulWidget{
静态常量字符串routeName='/loginPage'；
@凌驾
_LoginState createState（）=>\u LoginState（）；
}
final _formKey=GlobalKey（）；
类_LoginState扩展了状态{
迟到的用户控制器；
//_LoginState（）：超级（UserController（））{
//_con=控制器；
@凌驾
void initState（）{
super.initState（）；
if（userRepo.currentUser.value.apiToken！=null）{
Navigator.of（context.pushReplacementNamed（'/Pages'，参数：2）；
}
}
bool _rememberMe=false；
Widget徽标（）{
最终屏幕高度=MediaQuery.of（context）.size.height；
返回列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
填充（填充：仅限边集（顶部：屏幕高度*0.08）），
圆形(
子项：Image.asset（'lib/App/Assets/Images/Logo.png'），
背景颜色：颜色。灰色，
半径：80.0，
),
大小盒子(
身高：10.0，
),
正文(
“登录”，
样式：TextStyle(
fontSize:28.0，fontWeight:fontWeight.bold，颜色：颜色。白色），
textAlign:textAlign.center，
),
],
);
}
Widget backgroundImage（）{
扩大回报(
子：列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
约束：BoxConstraints.expand（），
装饰：盒子装饰(
图像：装饰图像(
image:AssetImage（'lib/App/Assets/Images/BackGround.png'），
安装：BoxFit.盖），
)
],
),
);
}
Widget userPass（）{
最终屏幕高度=MediaQuery.of（context）.size.height；
最终屏幕宽度=MediaQuery.of（context）.size.width；
扩大回报(
子：容器(
高度：屏幕高度*0.2，
宽度：屏幕宽度*0.8，
子：列(
儿童：[
TextFormField(
验证器：（值）{
if（value==null | | value.isEmpty）{
返回“请输入用户名”；
}
返回null；
},
装饰：输入装饰(
是的，
fillColor:Colors.white，
hintText:'用户名'，
hintStyle:TextStyle(
颜色：颜色（0xFFbaa15e），
),
后缀：图标（Icons.verified\u user\u sharp），
边框：大纲输入边框(
//边界半径：边界半径。圆形（20.0），
),
),
样式：TextStyle(
颜色：颜色，黑色，
尺寸：12，
text基线：text基线。字母顺序），
),
尺寸箱（高度：20），
TextFormField(
验证程序：（字符串？通过）{
如果（通过！.length==0）{
返回“请输入密码”；
}
},
装饰：输入装饰(
是的，
fillColor:Colors.white，
hintText:'密码'，
hintStyle:TextStyle（颜色：颜色（0xFFbaa15e）），
后缀：图标（图标。安全性四舍五入），
边框：大纲输入边框(
//边界半径：边界半径。圆形（20.0），
),
),
样式：TextStyle（颜色：Colors.black，字体大小：12），
),
],
),
),
);
}
小部件记忆（）{
最终屏幕高度=MediaQuery.of（context）.size.height；
最终屏幕宽度=MediaQuery.of（context）.size.width；
返回容器(
高度：屏幕高度*0.05，
//宽度：屏幕宽度*0.4，
填充：仅限边缘设置（左：40），
孩子：排(
儿童：[
复选框(
值：_记住，
checkColor:Colors.green，
activeColor:Colors.white，
一旦更改：（值）{
设置状态（）{
_rememberMe=值！；
});
},
),
正文(
“记住我”，
样式：TextStyle（颜色：Colors.white，字体大小：14），
),
],
),
);
}
小部件登录按钮（）{
最终屏幕高度=MediaQuery.of（context）.size.height；
最终屏幕宽度=MediaQuery.of（context）.size.width；
返回容器(
//高度：屏幕高度*0.1，
宽度：屏幕宽度*0.8，
孩子：升起按钮(
标高：4.0，
已按下：（）{
Navigator.of（context.pushReplacementNamed（'/MainPage'）；
如果（_formKey.currentState！.validate（））{
Navigator.of（context.pushReplacementNamed（'/MainPage'）；
_con.login（）；
}
},
//如果（_formKey.currentState！.validate（））{
//Navigator.of（context.pushReplacementNamed（“/MainPage”），
//  },
填充：边缘设置。全部（1）
width: MediaQuery.of(context).orientation == Orientation.landscape ? 25 : 14