How Responsive is Wonderous

I believe every flutterDev has tried Wonderous app. If not then go and try now. It’s a masterpiece not just visually but codewise. yes it is open-source.

We’ll cover other parts of this app too but for today, let’s see how Wonderous app handles responsiveness for different screen sizes.

So firstly it has a styles.dart file which has a lots of immutable classes. and the main one is AppStyle which takes a single parameter in its argument i.e. ScreenSize

next it checks for the shortest side i.e, width and assigns the scale factor different values according to the screenWidth

Just like AppStyle, all other responsive values such as borderRadius, shadows, insets etc

are also defined here. but some of them depends on this AppStyle class.

Let’s see one of them for example. In Text class, firstly different families are defined for different locales.

Next it has two helper methods which helps create all different variations of fontstyles.

Here are some examples

which consists of a static instance of AppStyle class. inside the build method, this class gets the

So at any instance if the screen gets rebuilded, all the styles get adapted accordingly.

One more interesting element in main.dart file. for global accessibility, it introduces a global $styles variable which can be accessed from any part of the application

Now use it anywhere like a prooo

That’s it. that’s how gskinner does it. that’s how pro devs do it.

see you in sometime👋🏽

Related posts:

There was a time when being an actor was seen as the lowest rung one could butt up against on the social class ladder. There was a time when the slightest bodily twitch from the subject of a…