[英]how to make different layout for tablet in flutter
I'm thinking about making different layout for Tablet/iPad version but I'm new to Flutter so I'm not really sure how to make it.我正在考虑为平板电脑/iPad 版本制作不同的布局,但我是 Flutter 的新手,所以我不太确定如何制作。 I'll be really appreciated if I can get any suggestion on how to do it.
如果我能得到任何关于如何做到这一点的建议,我将不胜感激。
Right now If I run on Tablet, my cards are stretch out and I'm trying to fix it right now.现在,如果我在平板电脑上运行,我的卡就会伸出来,我现在正试图修复它。 Also I'm trying to add a divider and column on the right side (attached pic of the design below) so that I can add more text.
此外,我正在尝试在右侧添加一个分隔符和列(下面附上设计的图片),以便我可以添加更多文本。
This is my cards这是我的卡片
Widget build(BuildContext context) {
return Container(
height: 180,
child: SingleChildScrollView(
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Column(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10,0),
child: Row(children: [
Text(
title,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Spacer(),
Container(
child: IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context)=> DetailsPage("Favorite")));
},
))
]),
),
Divider(color: Colors.black),
Row(children: [
//Legend
tileWidget(TileItem(
topText: "Top",
middleText: "Middle",
bottomText: "Bottom")),
Container(
color: Colors.red,
height: 60, width: 2),
(tileItems.length < 1) ? null : tileWidget(tileItems[0]),
Container(
color: Colors.green,
height: 60, width: 2),
(tileItems.length < 2) ? null : tileWidget(tileItems[1]),
Container(
color: Colors.black26, height: 60, width: 2),
(tileItems.length < 3) ? null : tileWidget(tileItems[2])
]),
]),
),
),
);
}
To get the screen width, use MediaQuery.of(context).size.width
Make a widget for any width under 600dp (ie. the phone) and another for any width above (ie. the tablet).要获取屏幕宽度,请使用
MediaQuery.of(context).size.width
为 600dp 以下的任何宽度(即手机)制作一个小部件,为高于 600dp 的任何宽度制作一个小部件(即平板电脑)。 Then your code will look something like this:然后您的代码将如下所示:
body: OrientationBuilder(builder: (context, orientation) {
if (MediaQuery.of(context).size.width > 600) {
isTablet= true;
} else {
isTablet= false;
} etc...
}
Here is a helpful resource: https://medium.com/flutter-community/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434这是一个有用的资源: https://medium.com/flutter-community/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.