Font scaling with screen utils

[Riccardo Strazzer]

Description

I have a problem with font scaling with flutter_screenutils.
Here's my TextTheme.

headlineLarge: TextStyle(
  fontSize: 48.sp,
  fontWeight: FontWeight.w700,
  height: 60 / 48,
  color: const Color(0xFF000000),
),
headlineMedium: TextStyle(
  fontSize: 32.sp,
  fontWeight: FontWeight.w700,
  height: 40 / 32,
  color: const Color(0xFF000000),
),

As you can see I'm using .sp to get the font scaling and it works in app. image
In widgetbook all fonts are way too big. image.

My thoughts: probably the fact we are in a horizontal screen (ex. browser) the scaling is not as the real one.

Also I get LateInitializationError: Field '_minTextAdapt@782084504' has not been initialized. error when using the addon.

[Youssef]

Hello @crispy-riccardo 👋
Can you provide a reproduction repo?

[Riccardo Strazzer]

Hello @crispy-riccardo 👋 Can you provide a reproduction repo?

Sure, here. https://github.com/crispy-riccardo/widgetbook_screenutils_bug

If you launch chrome with mobile aspect ratio it works, but when fullscreen all the scaling is wrong.

[Youssef]

Since ScreenUtil is defined after ThemeAddon, the .sp is used on a context that does not have ScreenUtil yet. A possible solution would be to create a custom BuilderAddon for Theme as follows:

addons: [
  BuilderAddon(
    name: 'ScreenUtil',
    builder: (context, child) {
      return ScreenUtilInit(
        // ...
        child: child,
      );
    },
  ),
  BuilderAddon(
    name: 'Theme',
    builder: (context, child) {
      // context have access to ScreenUtil here
      return Theme(
        data: ThemeData.light(), // Define your theme here
        child: child,
      );
    },
  ),
]

You can have a look on how MaterialThemeAddon is defined so that you can provide all the necessary widgets in the tree.
Let me know if that does not solve the original issue, and I will reopen this. Until then, I will close this issue.

[Riccardo Strazzer]

The issue persist.
https://imgur.com/usnwmm6

[Youssef]

@crispy-riccardo Please update the reproduction repo to match the photo you have attached, otherwise I won't be able to reproduce it.

[Riccardo Strazzer]

It seems the problem is with DeviceFrameAddon , when I put it after the theme and screen utils addons I can replicate the bug, when I put it before those it works normally.