Flutter responsive design issues with screen_util and Figma layouts

[FlyingEagle]

Hello everyone! I’m currently developing a Flutter application and trying to implement a design from Figma using the screen_util package. The dimensions I’m working with are 390x844, but I’m facing challenges when testing on various screen sizes.

I thought that wrapping my components in a FittedBox might fix the problem, but it only created new issues. My buttons are displaying different sizes on different pages when they should remain consistent.

Is it worth the effort to make the app completely responsive across all devices? Perhaps it would be easier to just include a scroll view instead?

Here’s the main code of my app set up:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApplication());
}

class MyApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(390, 844),
      minTextAdapt: true,
      builder: (context, child) {
        return MaterialApp(
          home: LoginScreen(),
        );
      },
    );
  }
}

And the main screen code:

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(20.w),
          child: Column(
            children: [
              SizedBox(height: 40.h),
              Image.asset('assets/app_icon.png'),
              SizedBox(height: 50.h),
              Text(
                'Welcome Back!',
                style: TextStyle(
                  fontSize: 28.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 15.h),
              Text(
                'Please sign in to continue',
                style: TextStyle(
                  fontSize: 16.sp,
                  color: Colors.grey,
                ),
              ),
              SizedBox(height: 40.h),
              _buildLoginButton('Login with Gmail', 'assets/gmail_icon.png'),
              SizedBox(height: 15.h),
              _buildLoginButton('Login with Apple', 'assets/apple_icon.png'),
              SizedBox(height: 15.h),
              _buildLoginButton('Login with Facebook', 'assets/fb_icon.png'),
              SizedBox(height: 40.h),
              Container(
                width: double.infinity,
                height: 50.h,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.r),
                    ),
                  ),
                  child: Text(
                    'Create Account',
                    style: TextStyle(
                      fontSize: 16.sp,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildLoginButton(String text, String iconPath) {
    return Container(
      width: double.infinity,
      height: 50.h,
      child: OutlinedButton(
        onPressed: () {},
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(iconPath, width: 20.w),
            SizedBox(width: 10.w),
            Text(text),
          ],
        ),
      ),
    );
  }
}

Any help you can provide would be greatly appreciated!

[Jack81]

Had the same problem when I switched from fixed layouts to screen_util. Button sizing gets wonky because screen_util struggles with orientation changes and weird aspect ratios. Add ensureScreenSize: true and useInheritedMediaQuery: true to your ScreenUtilInit - fixed my button dimensions right away. Don’t rely on one universal design size like 390x844. I use different designSize values for tablets and phones now. Your setup works for standard devices, but throw in some conditional logic for super wide or tall screens where the scaling breaks.

[Finn_Mystery]

Been using screen_util for over a year - making apps fully responsive is definitely worth it. Your button issue is probably because you don’t have a consistent button theme. Stop defining button dimensions on each screen individually. Create a custom ButtonStyle in your theme and reuse it everywhere. Also use MediaQuery breakpoints with screen_util - I set up small, medium, and large screen categories and adjust elements based on that. That scroll view approach you mentioned? It’s just a band-aid that’ll make your app feel terrible on larger devices. Your designSize setup looks right, but try tweaking the minTextAdapt settings or add the splitScreenMode parameter for edge cases.

[Stella_Dreamer]

screen_util’s def tricky. I found addin splitScreenMode: true to ScreenUtilInit helps a lot with button sizes. Also, ditch the FittedBox, it often messes with scaling way more than it helps. Your code looks good otherwise tho!