我一直试图制作一个扑动的应用程序(仍然在学习),我能够创建一个登录屏幕。但是,我注意到该应用程序没有响应。当我在模拟器上测试时,它运行正常,但当我将它安装到显示器较小的手机时,我注意到小部件不小,因此手机无法立即显示整个屏幕。有人可以帮助我制作这个应用程序响应,以便它适合任何大小的屏幕?
我的完整代码如下;
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
final TextEditingController _usernameController = new TextEditingController();
final TextEditingController _passwordController = new TextEditingController();
@override
Widget build(BuildContext context) {
void printSomething(){
print("Something was printed");
}
Widget buttonSection = new Container(
padding: new EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new MaterialButton(
child: new Text(
"Sign In",
style: new TextStyle(
color: Colors.white,
fontSize: 20.0
),
),
onPressed: (){printSomething();},
height: 50.0,
minWidth: 400.0,
color: Colors.blueAccent,
),
SizedBox(height: 10.0),
new MaterialButton(
child: new Text(
"Sign Up",
style: new TextStyle(
color: Colors.white,
fontSize: 20.0
),
),
onPressed: null,
height: 50.0,
minWidth: 400.0,
color: Colors.blueAccent,
)
],
),
),
],
),
);
Widget textFieldSection = new Container(
padding: new EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new TextField(
autocorrect: false,
obscureText: false,
controller: _usernameController,
maxLines: 1,
decoration: new InputDecoration(
hintText: "Username",
icon: new Icon(Icons.person),
),
style: new TextStyle(
fontSize: 20.0,
color: Colors.black
),
),
new SizedBox(height: 10.0),
new TextField(
autocorrect: false,
obscureText: true,
controller: _passwordController,
maxLines: 1,
decoration: new InputDecoration(
hintText: "Password",
icon: new Icon(Icons.vpn_key),
),
style: new TextStyle(
fontSize: 20.0,
color: Colors.black
),
),
],
),
),
],
),
);
Widget titleSection = new Container(
padding: new EdgeInsets.all(32.0),
child: new Row(
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
"Please login using your credentials",
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
),
),
],
),
),
],
),
);
return new MaterialApp(
title: "Service",
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
body: new ListView(
reverse: true,
children: [
SizedBox(height: 30.0),
new Image.asset(
'assets/logo.png',
height: 200.0,
),
titleSection,
textFieldSection,
buttonSection
].reversed.toList(),
),
),
);
}
}
答案 0 :(得分:4)
我撰写了一篇有关响应式UI波动的详细文章,希望对您有所帮助
TDLR(来自帖子):
在自适应用户界面中,我们不对尺寸和尺寸使用硬编码的值
职位。使用MediaQuery
来获取窗口的实时大小。
使用Flexible
和Expanded
小部件获取可正常工作的灵活UI
而不是硬编码值。
使用LayoutBuilder
获取父窗口小部件的ConstraintBox
。
您可以使用MediaQuery
或
OrientationBuilder
。
答案 1 :(得分:0)
尝试以下方法:
尽可能避免使用硬编码尺寸。
如果无法避免将宽度或高度固定为某个值,请尝试使用实际屏幕尺寸计算该值。
示例: MediaQuery.of(context).size.width - someValue
使用可用的属性而不是固定宽度和高度。示例:
a。 crossAxisAlignment:CrossAxisAlignment.stretch
用于将按钮拉伸到全屏大小,而不是minWidth: 400.0
b。填充:const EdgeInsets.symmetric(vertical: 12.0)
,用于按钮垂直填充,而不是height: 50.0
。
答案 2 :(得分:0)
使用方向
double width, height;
if (MediaQuery.of(context).orientation == Orientation.landscape){
width = MediaQuery.of(context).size.width * 0.25; // width = 25% of the screen
height = MediaQuery.of(context).size.height * 0.25; //height = 25% of the screen
}
else{
width = MediaQuery.of(context).size.width * 0.10; // width = 10% of the screen
height = MediaQuery.of(context).size.height * 0.10; //height = 10% of the screen
}
child: Padding(
padding: EdgeInsets.symmetric(horizontal: width),
)
or
child: Container(
width: width;
height: height;
),
答案 3 :(得分:0)
制作不同屏幕尺寸的响应式UI的最佳简便方法是Sizer插件。
任何屏幕尺寸的设备(平板电脑)中的响应UI。检查这个插件plugin️
https://pub.dev/packages/sizer
.h - for widget height
.w - for widget width
.sp - for font size
在使用像这样的值after .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)),
);
我已经使用此插件构建了许多响应式用户界面。