Sizer vs ScreenUtil — What You Should Prefer for Responsive Layouts in Flutter
FlutterPulseThis article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀
As Flutter is gaining momentum rapidly, we get to see outstanding UI performances in various applications, which, in context relates to how…
As Flutter is gaining momentum rapidly, we get to see outstanding UI performances in various applications, which, in context relates to how it displays within different devices and the web as well.
Well, certain packages are used to build responsive layouts in Flutter, but today we are going to focus on Sizer and ScreenUtil. As this article gains momentum, we shall see, the advantages of both packages, what you should prefer for your next Flutter app, and so on… Let's get started.
The Index
Sizer vs ScreenUtil
— Difference and Recommendation
Summary
— : Sizer vs ScreenUtil
Both packages serve the best purpose for responsive layouts in Flutter, yet there are certain minute things that we must adapt to build our next app keeping in mind the variety these have to offer.
-Sizer
Sizer offers the following:
Simple and quite adaptable
Uses MediaQuery to calculate screen sizes
Percentage-based sizing (h: height, w: width, sp: (pixel density)
Usage:
Wrap MaterialApp with:
/// Don't forget to import
import 'package:sizer/sizer.dart';
return Sizer(
builder: (context, orientation, screenType) {
return MaterialApp(
title: 'Responsive Layouts',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyApp(),
);
}
);
Also, you can set a maximum mobile and tablet width:
maxMobileWidth: 599,
maxTabletWidth: 768,
How to use it?
return SizedBox(
height: 80.h,
width: 80.w,
child: AppText.subHeader(
text: "Give this article some claps👏👏!!",
fontSize: 16.sp,
),
);
Let's now see what ScreenUtil has to offer.
-ScreenUtil
Flutter ScreenUtil offers the following:
Advanced & flexible (reasonable responsive layouts)
Supports custom design drafts (a device that is being displayed in third-party platforms for app designs)
Supports split-screen mode
Aspect-ratio / Pixel-perfect scaling
Usage:
Wrap MaterialApp with:
/// Don't forget to import
import 'package:flutter_screenutil/flutter_screenutil.dart';
return ScreenUtilInit(
splitScreenMode: true,
builder: (context, child) {
return MaterialApp(
title: 'Responsive Layouts',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyApp(),
);
}
);
Moreover, you can set a custom design size:
designSize: Size(375, 812),
As this package is considered more advanced, there are various other entities as well.
ensureScreenSize: true,
useInheritedMediaQuery: true,
minTextAdapt: true,
How to use it?
return Container(
height: 120.h,
width: 120.w,
padding: EdgeInsets.symmetric(
horizontal: 6,
vertical: 6
),
decoration: BoxDecoration(
color: Colors.yellow
),
child: AppText.subHeader(
text: "Don't forget to follow me..👍👍",
fontSize: 16.sp,
color: Colors.black,
),
);
It's time to wind up this article.
Hope you enjoyed reading!
— : Summary
As we learned about the advantages and benefits of using Sizer and ScreenUtil for responsive layouts, we can summarize in this way:
If you opt for a percentage-based approach, sizer is the best choice.
Whereas, for pixel-perfect scaling, choose ScreenUtil.
--Recommendations:
If you're working on a simple project with fewer screens, Sizer should be your first choice, as it is quite easy to use.
If you're working on an app with complex layouts, you must opt for ScreenUtil to support exact design proportions.
If you found it helpful, give it some claps, and don't forget to follow me.
Check out my social media handles.
Mustafa Tahir,
Signing off