What is the best way to handle with screen sizes in Flutter?

Question

I'm working in my first side project and I have a doubt with how to handle the sizes of my widgets depending on the device screen.

In iPhone 11 looks great, but when I emulate it in Nexus 5 all things become enormous... typographies, inputs, buttons... :(

What do you think that is the most efficient way (that it's OK for the most cases) to have a nice UI always ?

Thank you !

EDIT: Here is the code of the home page :)

  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

You can use the BuildContext context with a MediaQuery to get the current devices screen size and can set the size of your widgets based on that value.
For example:

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