I’m currently developing a Flutter application and utilizing the flutter_screenutil library to implement a responsive layout based on 390x844 design specifications. However, I’m facing challenges with how the layout adapts to smaller screen sizes.
While testing on devices with different dimensions, I’ve noticed that the layout does not appropriately scale. I attempted to use FittedBox, but it ended up creating a lot of inconsistencies, especially with button sizes which fluctuate unpredictably across various screens.
Should I consider switching to a ScrollView instead of striving for a perfect fit? Or is there a more effective approach to tackle this issue of responsive design?
Here’s my main app setup:
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const AppRoot());
}
class AppRoot extends StatelessWidget {
const AppRoot({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(390, 844),
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
},
);
}
}
And here’s my login screen widget:
class LoginScreen extends StatefulWidget {
const LoginScreen({super.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(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: 40.h),
Center(
child: Image.asset("assets/icons/app_logo.png"),
),
SizedBox(height: 50.h),
Text(
"Welcome Back!",
style: TextStyle(
fontSize: 28.sp,
fontWeight: FontWeight.w600,
color: Colors.black87,
fontFamily: "Roboto",
),
),
SizedBox(height: 15.h),
Text(
"Please sign in to continue",
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.w300,
color: Colors.grey,
fontFamily: "Roboto",
),
),
SizedBox(height: 40.h),
_buildSocialButton(
"Continue with Gmail",
"assets/icons/gmail.png",
Colors.red,
),
SizedBox(height: 15.h),
_buildSocialButton(
"Continue with Apple ID",
"assets/icons/apple_icon.png",
Colors.black,
),
SizedBox(height: 30.h),
_buildActionButton(
"Create Account",
const Color(0xFF4285F4),
Colors.white,
),
SizedBox(height: 15.h),
_buildActionButton(
"Login",
const Color(0xFFE3F2FD),
const Color(0xFF4285F4),
),
],
),
),
),
);
}
Widget _buildSocialButton(String title, String iconPath, Color iconColor) {
return SizedBox(
height: 55.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28.r),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(iconPath, width: 24.w, height: 24.h),
SizedBox(width: 12.w),
Text(
title,
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.w500,
color: Colors.black87,
fontFamily: "Roboto",
),
),
],
),
),
);
}
Widget _buildActionButton(String title, Color bgColor, Color textColor) {
return SizedBox(
height: 55.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: bgColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28.r),
),
),
child: Text(
title,
style: TextStyle(
fontSize: 15.sp,
fontWeight: FontWeight.w500,
color: textColor,
fontFamily: "Roboto",
),
),
),
);
}
}
I appreciate any advice you could provide!