Flutter 跨 iPhone 和 Android 的应用程序响应能力 - 使用 flutter_screenutil package
[英]Flutter app responsiveness across iPhone and Android - using flutter_screenutil package
问题描述
我很难让我的应用程序在 iPhone 13 Pro 和 Motorola Edge 5G UW 上看起来一样。 我已经使用一部手机的屏幕尺寸初始化了我的应用程序，然后使用另一部手机来看看有什么区别，并且它永远不会在屏幕上正确排列。 正如您在随附的屏幕截图中看到的那样。 我还包括了显示的屏幕截图的代码。
这是 iPhone：
这是摩托罗拉：
如您所见，当您进一步向下时，缩放比例已经偏离并且按钮位于不同的位置。 当 iPhone 显示时，我希望它们在屏幕下方更远。
这是我的 main.dart 文件的代码：
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gateway_device/routes/route_helper.dart';
import 'helper/dependencies.dart' as dep;
import 'package:get/get.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await dep.init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ScreenUtilInit(
designSize: const Size(432, 960),
minTextAdapt: true,
builder: ((context, child) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Gateway Device',
supportedLocales: const [Locale('en', '')],
theme: ThemeData(brightness: Brightness.light),
initialRoute: RouteHelper.initial,
getPages: RouteHelper.routes,
);
}),
);
}
}
这是我试图正确扩展的登录屏幕的代码：
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gateway_device/base/show_custom_snackbar.dart';
import 'package:gateway_device/controllers/auth_controller.dart';
import 'package:gateway_device/flutter_flow/flutter_flow_theme.dart';
import 'package:gateway_device/routes/route_helper.dart';
import 'package:get/get.dart';
class LoginScreenWidget extends StatefulWidget {
static String loginAuthToken = '';
const LoginScreenWidget({ Key? key }) : super(key: key);
@override
State<LoginScreenWidget> createState() => _LoginScreenWidgetState();
}
class _LoginScreenWidgetState extends State<LoginScreenWidget> {
late TextEditingController passwordController;
late bool passwordVisibility;
late TextEditingController phoneNumberController;
late String loginAuthToken;
final scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
phoneNumberController = TextEditingController();
passwordController = TextEditingController();
passwordVisibility = false;
}
@override
Widget build(BuildContext context) {void _login(AuthController authController) {
String username = phoneNumberController.text.trim();
String password = passwordController.text.trim();
String basicAuth =
'Basic ' + base64Encode(utf8.encode('$username:$password'));
loginAuthToken = basicAuth;
// print(loginAuthToken);
if (username.isEmpty) {
showCustomSnackBar("Type in your phone number", title: "Phone Number");
} else if (password.isEmpty) {
showCustomSnackBar("Type in your password", title: "Password");
} else if (!GetUtils.isPhoneNumber(username)) {
showCustomSnackBar("Type in a valid email address",
title: "Valid Email address");
} else if (password.length < 6) {
showCustomSnackBar("Password cannot be less than 6 characters",
title: "Password Length");
} else {
authController.login(loginAuthToken).then((status) {
if (status.isSuccess) {
print("Successful login");
Get.toNamed(RouteHelper.homePage);
} else {
showCustomSnackBar(status.message);
}
});
}
}
return SafeArea(
child: Scaffold(
key: scaffoldKey,
body: GetBuilder<AuthController>(
builder: (authController) {
return !authController.isLoading? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: Image.network(
'https://www.mistrasgroup.com/media/1718/storage-tanks-at-night.jpg?anchor=center&mode=crop&width=1500&height=600&rnd=132150168709400000',
).image,
),
),
child: Padding(
padding: EdgeInsets.only(top: 40.h, left: 20.w, right: 20.w),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100.h,
decoration: BoxDecoration(),
child: Image.asset(
'assets/images/logo_dark.png',
width: 200.w,
height: 100.h,
fit: BoxFit.contain,
),
),
SizedBox(
height: 50.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Simplicity in tank monitoring!',
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context).title1.override(
fontFamily: 'Heebo',
color: Colors.white,
fontSize: 25.sp,
fontWeight: FontWeight.w500,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Welcome!',
textAlign: TextAlign.start,
style: FlutterFlowTheme.of(context)
.title3
.override(
fontFamily: 'Heebo',
color: Colors.white,
fontWeight: FontWeight.w300
),
)
],
),
SizedBox(
height: 40.h,
),
TextFormField(
controller: phoneNumberController,
obscureText: false,
decoration: InputDecoration(
labelStyle: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color(0xFF95A1AC),
fontSize: 14.sp,
fontWeight: FontWeight.normal,
),
hintText: 'Phone Number',
hintStyle: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color(0xFF95A1AC),
fontSize: 14.sp,
fontWeight: FontWeight.normal,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2.w,
),
borderRadius:
BorderRadius.circular(2.r),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2.w,
),
borderRadius:
BorderRadius.circular(2.r),
),
filled: true,
fillColor: Colors.white,
),
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color(0xFF2B343A),
fontSize: 14.sp,
fontWeight: FontWeight.normal,
),
textAlign: TextAlign.start,
keyboardType: TextInputType.emailAddress,
),
SizedBox(
height: 10.h,
),
TextFormField(
controller: passwordController,
obscureText: !passwordVisibility,
decoration: InputDecoration(
labelStyle: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color(0xFF95A1AC),
fontSize: 14.sp,
fontWeight: FontWeight.normal,
),
hintText: 'Password',
hintStyle: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color(0xFF95A1AC),
fontSize: 14.sp,
fontWeight: FontWeight.normal,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2.w,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(2.r),
bottomRight: Radius.circular(2.r),
topLeft: Radius.circular(2.r),
topRight: Radius.circular(2.r),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2.w,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(2.r),
bottomRight: Radius.circular(2.r),
topLeft: Radius.circular(2.r),
topRight: Radius.circular(2.r),
),
),
filled: true,
fillColor: Colors.white,
suffixIcon: InkWell(
onTap: () => setState(
() => passwordVisibility =
!passwordVisibility,
),
child: Icon(
passwordVisibility
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: Color(0xFF95A1AC),
size: 22.sp,
),
),
),
),
SizedBox(
height: 20.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 200.w,
height: 30.h,
// decoration: BoxDecoration(
// color: Color.fromARGB(121, 255, 255, 255),
// ),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Don\'t have an account?',
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Colors.black,
fontSize: 18.sp,
fontWeight:
FontWeight.bold,
),
),
],
)
),
Container(
width: 100.w,
height: 30.h,
decoration: BoxDecoration(
color: Color.fromARGB(121, 211, 191, 191),
border: Border(
top: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
left: BorderSide(color: Colors.black, width: 2),
),
borderRadius: BorderRadius.circular(8.r)
),
child: GestureDetector(
onTap: () {
// print("My screen height is " + MediaQuery.of(context).size.height.toString());
// print("My screen height is " + Get.context!.height.toString());
// print("My screen width is " + MediaQuery.of(context).size.width.toString());
Get.toNamed(RouteHelper
.createAccount);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Create one!',
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 16.sp,
fontWeight:
FontWeight.normal,
),
),
],
),
)
),
],
),
SizedBox(
height: 330.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 200.w,
height: 30.h,
decoration: BoxDecoration(
color: Color.fromARGB(121, 223, 212, 172),
border: Border(
top: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
left: BorderSide(color: Colors.black, width: 2),
),
borderRadius: BorderRadius.circular(8.r)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Forgot Password?',
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Colors.black,
fontSize: 18.sp,
fontWeight:
FontWeight.bold,
),
),
],
)
),
Container(
width: 100.w,
height: 30.h,
decoration: BoxDecoration(
color: Color.fromARGB(121, 211, 191, 191),
border: Border(
top: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
left: BorderSide(color: Colors.black, width: 2),
),
borderRadius: BorderRadius.circular(8.r)
),
child: GestureDetector(
onTap: () {
Get.toNamed(RouteHelper
.createAccount);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Login!',
textAlign: TextAlign.center,
style: FlutterFlowTheme.of(context)
.bodyText1
.override(
fontFamily: 'Heebo',
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 16.sp,
fontWeight:
FontWeight.normal,
),
),
],
),
)
),
],
)
],
),
),
): Container();
},
)
),
);
}
}
我很感激我能得到的任何帮助，我整个星期都在努力。 一旦我弄清楚了这一点，它将有很大帮助，我可以通过构建应用程序的 rest go 并实施解决方案。 谢谢你！！
0 个解决方案
在 flutter 中使用 flutter_screenutil package 时键盘隐藏文本字段？
[英]Keyboard hide textfield when using flutter_screenutil package in flutter?
无法使用 flutter_screenutil package 设置高度和宽度
[英]Cannot set height and width using flutter_screenutil package
如何为我的混合应用程序使用 flutter_screenutil package？
[英]How can I use flutter_screenutil package for my hybrid app?
URI 的目标不存在：'package:flutter_screenutil/flutter_screenutil.dart'
[英]Target of URI doesn't exist:'package:flutter_screenutil/flutter_screenutil.dart'
Flutter_screenutil 的 React Native 替代品是什么？
[英]What is the React Native alternative to flutter_screenutil?
需要在flutter中使用flutter_screenutil package时如何获取笔记本电脑的尺寸屏幕
[英]How can get the size screen of laptop when need to use flutter_screenutil package in flutter
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
对使用 flutter_screenutil 感到困惑 package
在 flutter 中使用 flutter_screenutil package 时键盘隐藏文本字段？
无法使用 flutter_screenutil package 设置高度和宽度
如何为我的混合应用程序使用 flutter_screenutil package？
URI 的目标不存在：'package:flutter_screenutil/flutter_screenutil.dart'
flutter 常量 class 与flutter_screenutil
如何使用 flutter_screenutil 根据设备大小缩放字体
flutter_screenutil 不工作，，，生成器中的问题
Flutter_screenutil 的 React Native 替代品是什么？
需要在flutter中使用flutter_screenutil package时如何获取笔记本电脑的尺寸屏幕
相关标签