[英]How to make the flutter app responsive?
我一直在尝试制作一个 flutter 应用程序(仍在学习中)并且我能够制作一个登录屏幕。 但是,我注意到该应用程序没有响应。 当我在模拟器上测试时,它工作正常,但是当我将其安装到显示屏较小的手机时,我注意到小部件并不小,因此手机无法立即显示整个屏幕。 有人可以帮助我使这个应用程序具有响应性,使其适合任何尺寸的屏幕吗?
我的完整代码如下;
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(),
),
),
);
}
}
我创建了一篇关于 flutter 中响应式 UI 的详细文章,我希望它会有所帮助
TDLR(来自帖子):
在响应式 UI 中,我们不使用尺寸和位置的硬编码值。 使用MediaQuery
获取窗口的实时大小。
使用Flexible
和Expanded
小部件获得灵活的 UI,该 UI 使用百分比而不是硬编码值。
使用LayoutBuilder
获取父小部件的ConstraintBox
。
您可以使用MediaQuery
或OrientationBuilder
获取设备的OrientationBuilder
。
为不同屏幕尺寸制作响应式 UI 的最简单方法是Sizer插件。
任何屏幕尺寸设备和平板电脑中的响应式用户界面。 检查它这个插件⬇️
https://pub.dev/packages/sizer
.h - for widget height
.w - for widget width
.sp - for font size
在像这样的值之后使用.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)),
);
我用这个插件构建了许多响应式 UI。
请尝试以下操作:
尽可能避免硬编码维度。
如果您无法避免将宽度或高度固定为某个值,请尝试使用实际屏幕尺寸计算该值。 示例: MediaQuery.of(context).size.width - someValue
使用已有的属性而不是固定宽度和高度。 例子:
一种。 crossAxisAlignment: CrossAxisAlignment.stretch
用于将按钮拉伸到全屏尺寸而不是minWidth: 400.0
湾 padding: const EdgeInsets.symmetric(vertical: 12.0)
,用于按钮垂直填充而不是height: 50.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;
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.