如何根据不同的屏幕尺寸使 Flutter 应用程序响应? [英] How to make flutter app responsive according to different screen size?
问题描述
我在根据各种屏幕尺寸做出响应方面遇到了困难.如何让它响应?
@override小部件构建(BuildContext 上下文){返回新容器(装饰:新 BoxDecoration(颜色:Colors.white)，孩子:新堆栈(孩子们: [新填充(填充:const EdgeInsets.only(底部:350.0)，孩子:new GradientAppBar(" "),),新定位(底部:150.0，高度:260.0，左:10.0，右:10.0，孩子:新填充(填充:新的 EdgeInsets.all(10.0)，孩子:新卡(孩子:新列(mainAxisSize: MainAxisSize.min,孩子们:<小部件>[const ListTile(标题:常量文本('登录'，textAlign: TextAlign.center,风格:const TextStyle(字体大小:16.50，fontFamily:Helvetica"，fontWeight: FontWeight.bold,颜色:Colors.black87，字母间距:1.00，),),),新的 ListTile(领先:const Icon(Icons.person),标题:新的文本字段(控制器:_user1，装饰:新的 InputDecoration(labelText: '输入用户名'),),),新的 ListTile(领先:const 图标(Icons.person_pin)，标题:新的文本字段(控制器:_pass1，装饰:新的 InputDecoration(labelText: '输入密码'),晦涩文本:真实，),),],),),),),新定位(底部:70.0，左:15.0，右:05.0，孩子:新的 ButtonTheme.bar(//使按钮使用适合卡片的样式孩子:新按钮栏(孩子们:<小部件>[新的平面按钮(填充:新的 EdgeInsets.only(右:13.0)，孩子:新文本('在这里注册'，样式:新文本样式(颜色:Colors.black87，fontFamily:Helvetica"，字体大小:15.00，fontWeight: FontWeight.bold),),按下: () {Navigator.of(context).pushNamed('/facebook');},),新的平面按钮(填充:新的 EdgeInsets.only(右:22.0)，孩子:新文本('忘记密码?'，样式:新文本样式(颜色:Colors.black87，fontFamily:Helvetica"，字体大小:15.00，fontWeight: FontWeight.bold),),按下: () {Navigator.of(context).pushNamed('/忘记');},),],),),),新定位(底部:73.0，高度:180.0，左:20.0，右:52.0，孩子:新填充(填充:新的 EdgeInsets.all(0.00)，孩子:新按钮主题(最小宽度:10.0，高度:20.0，填充:新的 EdgeInsets.only(右:37.0)，孩子:新按钮栏(孩子:<小工具>[新的 CupertinoButton(边界半径:const BorderRadius.all(const Radius.circular(36.0)),填充:新的 EdgeInsets.only(左:70.0)，颜色:常量颜色(0xFF426DB7)，孩子:新文本("登录 ",样式:新文本样式(颜色:Colors.white，字体大小:12.50，fontFamily:手写"，fontWeight: FontWeight.w500,字母间距:0.00)，),onPressed: () {})]),),),),],),);}}Using MediaQuery class:
MediaQueryData queryData;queryData = MediaQuery.of(context);<块引用>
MediaQuery:建立媒体查询解析的子树到给定的数据.
MediaQueryData:关于媒体的信息(例如，窗口).
获取设备像素比:
queryData.devicePixelRatio获取设备屏幕的宽度和高度:
queryData.size.width查询数据.大小.高度获取文本比例因子:
queryData.textScaleFactor使用AspectRatio班级:
来自文档:
<块引用>一个小部件，它尝试将子项的大小调整为特定的纵横比.
小部件首先尝试布局允许的最大宽度约束.小部件的高度是通过应用给定的纵横比与宽度，表示为宽度与高度.
例如，16:9 的宽:高纵横比的值为16.0/9.0.如果最大宽度为无限大，则通过将纵横比应用于最大高度来确定初始宽度.
现在考虑第二个例子，这次的纵横比为 2.0和布局约束要求宽度介于 0.0 和100.0 和高度在 0.0 和 100.0 之间.我们将选择宽度为 100.0(允许的最大)和高度为 50.0(以匹配纵横比).
//示例新中心(孩子:新的纵横比(纵横比:100/100，孩子:新容器(装饰:新的 BoxDecoration(形状:BoxShape.rectangle，颜色:Colors.orange,)),),),I am facing difficulties to make it responsive according to various screen sizes. How to make it responsive?
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(color: Colors.white),
child: new Stack(
children: [
new Padding(
padding: const EdgeInsets.only(bottom: 350.0),
child: new GradientAppBar(" "),
),
new Positioned(
bottom: 150.0,
height: 260.0,
left: 10.0,
right: 10.0,
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: const Text(
'LOGIN',
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 16.50,
fontFamily: "Helvetica",
fontWeight: FontWeight.bold,
color: Colors.black87,
letterSpacing: 1.00,
),
),
),
new ListTile(
leading: const Icon(Icons.person),
title: new TextField(
controller: _user1,
decoration: new InputDecoration(
labelText: ' Enter a username'),
),
),
new ListTile(
leading: const Icon(Icons.person_pin),
title: new TextField(
controller: _pass1,
decoration: new InputDecoration(
labelText: ' Enter a password'),
obscureText: true,
),
),
],
),
),
),
),
new Positioned(
bottom: 70.0,
left: 15.0,
right: 05.0,
child: new ButtonTheme.bar(
// make buttons use the appropriate styles for cards
child: new ButtonBar(
children: <Widget>[
new FlatButton(
padding: new EdgeInsets.only(right: 13.0),
child: new Text(
'REGISTER HERE',
style: new TextStyle(
color: Colors.black87,
fontFamily: "Helvetica",
fontSize: 15.00,
fontWeight: FontWeight.bold),
),
onPressed: () {
Navigator.of(context).pushNamed('/facebook');
},
),
new FlatButton(
padding: new EdgeInsets.only(right: 22.0),
child: new Text(
'FORGOT PASSWORD?',
style: new TextStyle(
color: Colors.black87,
fontFamily: "Helvetica",
fontSize: 15.00,
fontWeight: FontWeight.bold),
),
onPressed: () {
Navigator.of(context).pushNamed('/Forgot');
},
),
],
),
),
),
new Positioned(
bottom: 73.0,
height: 180.0,
left: 20.0,
right: 52.0,
child: new Padding(
padding: new EdgeInsets.all(0.00),
child: new ButtonTheme(
minWidth: 10.0,
height: 20.0,
padding: new EdgeInsets.only(right: 37.0),
child: new ButtonBar(children: <Widget>[
new CupertinoButton(
borderRadius:
const BorderRadius.all(const Radius.circular(36.0)),
padding: new EdgeInsets.only(left: 70.0),
color: const Color(0xFF426DB7),
child: new Text(
" LOGIN ",
style: new TextStyle(
color: Colors.white,
fontSize: 12.50,
fontFamily: "Handwriting",
fontWeight: FontWeight.w500,
letterSpacing: 0.00),
),
onPressed: () {})
]),
),
),
),
],
),
);
}
}
Using MediaQuery class:
MediaQueryData queryData;
queryData = MediaQuery.of(context);
MediaQuery: Establishes a subtree in which media queries resolve to the given data.
MediaQueryData: Information about a piece of media (e.g., a window).
To get Device Pixel Ratio:
queryData.devicePixelRatio
To get width and height of the device screen:
queryData.size.width
queryData.size.height
To get text scale factor:
queryData.textScaleFactor
Using AspectRatio class:
From doc:
A widget that attempts to size the child to a specific aspect ratio.
The widget first tries the largest width permitted by the layout constraints. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height.
For example, a 16:9 width:height aspect ratio would have a value of 16.0/9.0. If the maximum width is infinite, the initial width is determined by applying the aspect ratio to the maximum height.
Now consider a second example, this time with an aspect ratio of 2.0 and layout constraints that require the width to be between 0.0 and 100.0 and the height to be between 0.0 and 100.0. We'll select a width of 100.0 (the biggest allowed) and a height of 50.0 (to match the aspect ratio).
//example
new Center(
child: new AspectRatio(
aspectRatio: 100 / 100,
child: new Container(
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.orange,
)
),
),
),
这篇关于如何根据不同的屏幕尺寸使 Flutter 应用程序响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
