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

问题描述

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

解决方法

您可以使用 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)),child: Text(
                  _shortcut.description,maxLines: 2,overflow: TextOverflow.ellipsis,]),))),);
  }