flutter - 在 Flutter 中处理屏幕尺寸的最佳方法是什么？

Question

我正在我的第一个副项目中工作，我对如何根据设备屏幕处理小部件的大小有疑问。

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

Answer 1

您可以使用 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