Responsive Scaling Using Mathematics in Flutter
Nothing is as heartbreaking as working on an app design and seeing it fail spectacularly when tested on different devices; the images, text, CTAs, everything seems off. You worked night and day to create an amazing design but now, all your efforts seem in vain, since the result is completely off track.
Two words you need to think about — Responsive Scaling.
What is Responsive Scaling?
Resizing of a UI component according to the screen dimensions on which it’s being displayed.
But why is it important?
- Offers Consistent User Experience Across All Devices
- Prevents Overflows and Underflows
- Ensures Accessibility
Responsive scaling has been nerve-wracking for UI developers and has led to sleepless nights as the only thing they can think about is “What Went Wrong?”, “How Do I Fix This?”
UI developers often face this issue and despite using flexible widgets and religiously following UI principles mentioned in various developer communities like StackOverflow, mapping a set of points on specific locations in a particular image to ensure responsive scaling is still challenging, and as always Mathematics came to his rescue!
Using basic mathematics, ratios to be specific, UI developers will be able to devise a solution for the above-stated problem when designing an app with Flutter.
Flutter, an open-source UI software development kit popularly used by developers owing to the fact that a single code can run on multiple platforms, be it Android, iOS, Web, Desktop, Embedded; is like a breath of fresh air. But, oftentimes a design that you created for iPhone won’t run properly on Android — RenderFlowException because iPhone sizes didn’t quite work for android, owing to different screen configurations as devicePixelRatio.
For this, a standard solution that will work seamlessly is required, a codebase that can handle portrait, landscape, and multiple mobile phone resolutions.
How Widgets Interact With Canvas?
Every platform provides a canvas (a virtual layer where UI components are rendered for different platforms). In the case of Flutter, Widget Tree — a hierarchical structure to arrange widgets which are then projected on canvas provided by platforms you’re designing an app for, e.g., if you’re rendering a flutter application on android, the canvas will be provided by Android.
Since canvas is the part where the widget gets rendered on screen, so when a user interacts with a widget, an event is triggered that leads to a callback to the widget which then interacts with native code accordingly.
How to Ensure Responsive Scaling?
Step 1: Choose a reference device with a standard screen size to calculate the scaling factor.
Step 2: Use old school mathematics to calculate “Height-scale Ratio (H’/H)” and “Width-scale Ratio(W’/W)”, where H’ and W’ are the height and width of the actual device respectively and H and W are the height and width of the standard device chosen respectively.
Step 3: Calculate the relative height and width by:
h*(H’/H) and w*(W’/W)
Step 4: To ensure accessibility, the text-scale factor is taken into account.
h*(H’/H)*(text-scale-factor) and w*(W’/W)*(text-scale-factor)
Here’s how you can implement this:
- Define reference height and width
- Declare variables to hold relative scaling factors
- Calculate and store relative scaling factors
- Use lifecycle hook to provide screen height, width, and text-scale-factor in real-time
- Use scale factors to scale objects
Result?
Every point will be plotted perfectly with minimal implementation using simple mathematics.
