我正在考虑为Tablet / iPad版本制作不同的布局,但我是Flutter的新手,所以我不确定如何制作它。如果能提出建议,我将不胜感激。
现在,如果我在Tablet上运行,我的卡就伸出来了,我正在尝试立即修复它。另外,我正在尝试在右侧添加分隔线和列(下面的设计的图片),以便可以添加更多文本。
这是我的卡片
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])
]),
]),
),
),
);
}
要获取屏幕宽度,请使用MediaQuery.of(context).size.width
制作一个小部件,使其宽度小于600dp(即电话),而另一个小部件则大于600dp(即平板电脑)。然后您的代码将如下所示:
body: OrientationBuilder(builder: (context, orientation) {
if (MediaQuery.of(context).size.width > 600) {
isTablet= true;
} else {
isTablet= false;
} etc...
}