如何在颤振中为手机制作响应式用户界面

Question

我观察到小部件在小屏幕上显示得更大，在大屏幕上显示得更小。 在大屏幕上它看起来很不错，但在小屏幕上看起来很奇怪。 如何在不同的移动屏幕尺寸下制作响应式且美观的 UI...??

Answer 1

您可以使用 MediaQuery.of(context).size 方法检索当前屏幕的大小并根据此值定义小部件的大小。
这是一个例子：

@override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 3.5,
      child: Center(
          child: Card(
              child: InkWell(
        onTap: () => _openUrl(_shortcut.url),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: MediaQuery.of(context).size.height / 6,
                color: Color(int.parse("0xFF${_shortcut.color}")),
                child: Center(child: Icon(_shortcut.icon, color: Colors.white)),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(_shortcut.title,
                    style: TextStyle(fontWeight: FontWeight.bold)),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  _shortcut.description,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ]),
      ))),
    );
  }