Layout Problems with Different Screen Sizes
I’m working on a Flutter app based on a Figma mockup with dimensions 430x932. I’m using the screen_utils package to make everything match the original design exactly.
The problem is that when I test on smaller phones, the layout breaks. I attempted to fix this by wrapping things in FittedBox widgets, but this created new problems. For example, my buttons now have different heights on different screens even though they should be consistent.
Here’s my app setup:
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const LoginApp());
}
class LoginApp extends StatelessWidget {
const LoginApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(430, 932),
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
},
);
}
}
And here’s my main screen code:
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.w),
child: Column(
children: [
SizedBox(height: 40.h),
Image.asset("assets/images/app_logo.png"),
SizedBox(height: 50.h),
Text(
"Welcome Back!",
style: TextStyle(
fontSize: 28.sp,
fontWeight: FontWeight.w600,
fontFamily: "Roboto",
),
),
SizedBox(height: 15.h),
Text(
"Please login to continue",
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w300,
fontFamily: "Roboto",
),
),
SizedBox(height: 45.h),
_buildLoginButton("Login with Gmail", "gmail_icon.png"),
SizedBox(height: 15.h),
_buildLoginButton("Login with Apple ID", "apple_icon.png"),
SizedBox(height: 15.h),
_buildLoginButton("Login with Facebook", "facebook_icon.png"),
SizedBox(height: 40.h),
_buildPrimaryButton("Create Account", Color(0xFF4285F4)),
SizedBox(height: 15.h),
_buildSecondaryButton("Already have account?", Color(0xFFE8F0FE)),
],
),
),
),
);
}
Widget _buildLoginButton(String text, String iconPath) {
return SizedBox(
height: 55.h,
width: double.infinity,
child: OutlinedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/images/$iconPath"),
SizedBox(width: 10),
Text(
text,
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
fontFamily: "Roboto",
),
),
],
),
),
);
}
Widget _buildPrimaryButton(String text, Color bgColor) {
return SizedBox(
height: 55.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: bgColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.r),
),
),
child: Text(
text,
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w600,
color: Colors.white,
fontFamily: "Roboto",
),
),
),
);
}
}
I’m wondering if I should just give up on making it perfectly responsive and use SingleChildScrollView instead. What do you think would be the better approach here?