我一直在尝试制作一个流畅的应用程序(仍在学习中),并且能够创建一个登录屏幕。但是,我注意到该应用程序没有响应。当我在模拟器上对其进行测试时,它可以正常工作,但是当我将其安装到具有较小显示屏的手机上时,我注意到这些小部件并不小,因此手机无法一次显示整个屏幕。有人可以帮助我制作此响应式应用程序,使其适合任何尺寸的屏幕吗?
我的完整代码如下;
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(),
),
),
);
}
}
最佳答案
我写了一篇关于响应式UI的详细文章,希望对您有所帮助
TDLR(摘自):
职位。使用
MediaQuery
获取窗口的实时大小。 Flexible
和Expanded
小部件来获得一个灵活的用户界面使用百分比而不是硬编码值。
LayoutBuilder
获取父窗口小部件的ConstraintBox
。 MediaQuery
或OrientationBuilder
。