如何在颤动中为平板电脑制作不同的布局答案

【问题标题】：how to make different layout for tablet in flutter如何在颤动中为平板电脑制作不同的布局
【发布时间】：2020-09-04 17:49:04
【问题描述】：

我正在考虑为平板电脑/iPad 版本制作不同的布局，但我是 Flutter 的新手，所以我不太确定如何制作。如果我能得到任何关于如何做的建议，我将不胜感激。

现在如果我在平板电脑上运行，我的卡会伸出来，我现在正在尝试修复它。此外，我正在尝试在右侧添加一个分隔符和列（下面附上设计的图片），以便我可以添加更多文本。

这是我的卡片

   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])
            ]),
          ]),
        ),
      ),
    );
  }

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies flutter-animation flutter-test

【解决方案1】：

要获取屏幕宽度，请使用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...
      }

这是一个有用的资源：@987654321@

【讨论】：