Flutter responsiveness problem on various mobile devices

Issue

I am a beginner to Flutter and I tried creating a dummy login page. When I tried to run the app it was flawless on Pixel 3 XL but it was not good in Pixel 2 XL. How would I manage the responsiveness? I came across the MediaQuery widget, but how could I create a completely responsive app for each device? There are many variations among today’s mobile devices (like notched display, fullscreen, etc) and thereafter comes the tablets. How could I manage this? Should I write code for each and every resolution?

Here is my design on Pixel 3 XL and Pixel 2 XL

running on pixel 3 XL

running on pixel 2 XL

Solution

The reason behind this problem is the sizedbox widget with height 100px.
removing that and using mainaxisalignment as spaceevenly gives the required output.
Here is the modified code:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          bgimage,
         Column(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                logoimage,    
                userName(),    
                password(),
                forgotPassword(),    
                loginButton(),
                googleSignIn(),
                signUp()
              ],
            ),
        ],
      ),
    );
  }

This solves the problem.

Answered By – strek

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *