Question posted in 
I am implementing a Figma design in Flutter using screen_utils to match the design exactly. The design dimensions are 430×932, but I’m encountering issues on smaller screens.
I tried solving this with FittedBox, but it caused visual inconsistencies. For example, buttons that have fixed sizes in the design end up with varying height values across pages.
Do you think trying to make the design responsive on smaller devices is unnecessary? Would it be a smart solution to simply use a SingleChildScrollView to handle the layout instead?
Thank you!
Image:
main:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.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: WelcomePage(),
);
},
);
}
}
code:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
class WelcomePage extends StatefulWidget {
const WelcomePage({super.key});
@override
State<WelcomePage> createState() => _WelcomePageState();
}
class _WelcomePageState extends State<WelcomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 24.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 36.h,
),
Center(
child: Image.asset(
"assets/images/logo.png",
),
),
SizedBox(
height: 48.5.h,
),
Column(
children: [
Text(
"Let's Get Started!",
style: TextStyle(
fontSize: 32.sp,
fontWeight: FontWeight.w700,
color: Colors.black,
height: 1.6,
fontFamily: "Urbanist",
),
),
SizedBox(
height: 12.h,
),
Text(
"Let's dive in into your account",
style: TextStyle(
fontSize: 18.sp,
fontWeight: FontWeight.w400,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
),
],
),
SizedBox(
height: 48.5.h,
),
Column(
children: [
SizedBox(
height: 58.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.r),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset("assets/images/google.png"),
const SizedBox(width: 8),
Expanded(
child: Text(
"Continue with Google",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.bold,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
)), // Metin
],
),
),
),
SizedBox(
height: 20.h,
),
SizedBox(
height: 58.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.r),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset("assets/images/apple.png"),
const SizedBox(width: 8),
Expanded(
child: Text(
"Continue with Apple",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.bold,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
)), // Metin
],
),
),
),
SizedBox(
height: 20.h,
),
SizedBox(
height: 58.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.r),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset("assets/images/facebook.png"),
const SizedBox(width: 8),
Expanded(
child: Text(
"Continue with Facebook",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.bold,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
)), // Metin
],
),
),
),
SizedBox(
height: 20.h,
),
SizedBox(
height: 58.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.r),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset("assets/images/twitter.png"),
const SizedBox(width: 8),
Expanded(
child: Text(
"Continue with Twitter",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.bold,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
)), // Metin
],
),
),
),
],
),
SizedBox(
height: 48.5.h,
),
Column(
children: [
SizedBox(
height: 58.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF369FFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.r),
),
),
child: Text(
"Sign up",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
),
),
),
SizedBox(
height: 20.h,
),
SizedBox(
height: 58.h,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFEFF7FF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.r),
),
),
child: Text(
"Sign in",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.sp,
fontWeight: FontWeight.bold,
color: const Color(0xFF369FFF),
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
),
),
),
],
),
SizedBox(
height: 48.5.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Privacy Policy",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
),
Text(
" - ",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
),
Text(
"Terms of Service",
style: TextStyle(
fontSize: 14.sp,
fontWeight: FontWeight.w400,
color: Colors.black,
height: 1.6,
letterSpacing: .2,
fontFamily: "Urbanist",
),
),
],
)
],
),
),
),
);
}
}
Sample Figma Design : https://www.figma.com/design/5SiXgaL0WrRYispa6vWboB/Untitled?node-id=0-1&m=dev&t=iIgwUW5v1zEkEU27-1
2
Answers
For responsiveness, I prefer responsive_framework, explore it too.
And in my opinion setting the limits is better so use of SingleChildScrollView is a good thing.
You don’t want pixel perfect. You want responsive. And Flutter has many amazing tools to make responsive layouts, like LayoutBuilder for breakpoints, and Flex (Row/Column) widgets for adaptive sizing. Figma and other mockup tools are generally very poor at representing this… the best tool to preview layout designs is Flutter itself (thanks to hot reload). Oh, and familiarize yourself with less-referenced layout widgets like FittedBox, FractionallySizedBox, AspectRatio, Spacer, Wrap, and learn when to use double.infinity for a width or height rather than querying with MediaQuery for the useless screen size. This is a great writeup from the author of Boxy on the fundamentals of Flutter layout including MediaQuery: https://notes.tst.sh/flutter/media-query/.