在Flutter中，处理不同屏幕尺寸的最佳方式是什么？

Question

在Flutter中，处理不同屏幕尺寸的最佳方式是什么？

flutter

5

我正在进行我的第一个副业项目，并且对如何根据设备屏幕处理小部件的大小有疑问。

在iPhone 11上看起来很棒，但是当我在Nexus 5上模拟它时，所有东西都变得巨大...字体，输入框，按钮...:(

您认为始终拥有漂亮的UI最有效的方法是什么（对于大多数情况而言）？

谢谢！

编辑：这是主页的代码 :)

  Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Theme.of(context).backgroundColor,
    child: SafeArea(
        child: Container(
          padding: EdgeInsets.all(30),
          child: Flex(
            direction: Axis.vertical,
            children: <Widget>[
            Flexible(
              flex: 2,
              child: BounceInDown(
                from: 10,
                child: Container(
                  alignment: Alignment.topLeft,
                  child: Container(
                    child: SvgPicture.asset(
                      'assets/svg/twiger-face.svg',
                      color: Theme.of(context).accentColor,
                      alignment: Alignment.topLeft,
                      width: 100,
                      height: 100
                    )
                  )
                ),
              ),
            ),
            Flexible(
              flex: 6,
              child: Column(
                children: <Widget>[
                  FadeInDown(
                    from: 10,
                    child: _createTitle(AppLocalizations.of(context).translate("home_title"))
                  ),
                  SizedBox(height: 15.0),
                  FadeInUp(
                    from:5,
                    child: _createForm()
                  ),
                  if(isValidTweet(textController.text))
                  _validTweetMessage(),
                  if(!isValidTweet(textController.text) && textController.text != '')
                  _invalidTweetMessage(),                      
                ]
              ),
            ),
            Flexible(
              flex: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children:[
                  Container(
                    child: RawMaterialButton(
                      padding: EdgeInsets.all(10),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)
                      ),
                      child: RichText(
                        text: TextSpan(
                          style: TextStyle(color: Theme.of(context).accentColor),
                          children: <TextSpan>[
                            TextSpan(text: AppLocalizations.of(context).translate("feedback_btn")), 
                            TextSpan(text: "Feedback", style: TextStyle(fontWeight: FontWeight.w700))
                          ]
                        ),
                      ),
                      onPressed: (){
                        _showFeedbackModal(context);
                      },
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        BounceInDown(
                          from: 10,
                          child: _createPasteTweetBtn(context)
                        ),
                        SizedBox(width: 20),
                        BounceInDown(
                          from: 10,                   
                          child: _createSendTweetBtn(context, _formKey, textController)), 
                      ]
                    ),
                  ),
                ]
              ),
            )  
          ],),
        ),
      ),
  ),
);
}

- davizgarzia

添加了代码...抱歉！这是我第一次在这里发布:( 而且我没有使用 Stack :S - davizgarzia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sanket Vekariya · Accepted Answer

你可以使用BuildContext context和MediaQuery，以获取当前设备的屏幕大小，并根据该值设置小部件的大小。
例如：

var width = MediaQuery.of(context).size.width  * 0.4; // set width to 40% of the screen width
var height = MediaQuery.of(context).size.height  * 0.4; // set height to 40% of the screen height