some text widgets in build mode is missing

[Akshaykakkodi]

When building app in release mode some text widgets are missing.

ScreenUtilInit(
designSize: Size(430, 932),
minTextAdapt: true,
splitScreenMode: true,

    builder: (context,child) {
      return MaterialApp(
        theme: ThemeData(
          textSelectionTheme: TextSelectionThemeData(
            cursorColor: AppColors.lightGrey,
          ),
          
          dialogTheme: DialogTheme(backgroundColor: AppColors.white),
          inputDecorationTheme: InputDecorationTheme(
            counterStyle: AppTextStyles.text14Black400,
            hintStyle:  TextStyle(fontSize: 14.h, fontWeight: FontWeight.w400),
            contentPadding: EdgeInsets.only(left:16.h,right: 16.h),
            constraints:  BoxConstraints(maxHeight: 56.h),
          ),
          hintColor: AppColors.lightGrey,
          fontFamily: GoogleFonts.poppins().fontFamily,
          colorScheme: ColorScheme.fromSeed(seedColor: AppColors.white),
          useMaterial3: true,
        ),
        routes:AppRoutes.routes,
    
        initialRoute: '/',
   
        
      );
    }
  ),
);

}
}

[sagnik-sanyal]

I am also having this same issue, did you find a way to resolve this @Akshaykakkodi ?

[YuchenTOR]

try use 5.8.4

[mozomig]

same problem

[mozomig]

I'm find solution for 5.9.0, it's happens because in release mode when starting app screen width and screen height in ScreenUtil instance was 0 and fontSizeResolver calculate scale font incorrect.

My solution:

final designSize = const Size(412, 892);

ScreenUtilInit(
          designSize: designSize,
          fontSizeResolver: (fontSize, instance) {
            final display = View.of(context).display;
            final screenSize = display.size / display.devicePixelRatio;
            final scaleWidth = screenSize.width / designSize.width;

            return fontSize * scaleWidth;
          },
          builder: (context, _) {
              return MaterialApp.....
})

[hmartiins]

I'm find solution for 5.9.0, it's happens because in release mode when starting app screen width and screen height in ScreenUtil instance was 0 and fontSizeResolver calculate scale font incorrect.

My solution:

final designSize = const Size(412, 892);

ScreenUtilInit(
          designSize: designSize,
          fontSizeResolver: (fontSize, instance) {
            final display = View.of(context).display;
            final screenSize = display.size / display.devicePixelRatio;
            final scaleWidth = screenSize.width / designSize.width;

            return fontSize * scaleWidth;
          },
          builder: (context, _) {
              return MaterialApp.....
})

Work for me! Thanks!

[spring321]

我找到了 5.9.0 的解决方案，发生这种情况是因为在发布模式下启动应用程序时 ScreenUtil 实例中的屏幕宽度和屏幕高度为 0 并且 fontSizeResolver 计算比例字体不正确。

我的解决方案：

final designSize = const Size(412, 892);

ScreenUtilInit(
          designSize: designSize,
          fontSizeResolver: (fontSize, instance) {
            final display = View.of(context).display;
            final screenSize = display.size / display.devicePixelRatio;
            final scaleWidth = screenSize.width / designSize.width;

            return fontSize * scaleWidth;
          },
          builder: (context, _) {
              return MaterialApp.....
})

None of the above works for me

[✓] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64 (Rosetta), locale zh-Hans-CN)
• Flutter version 3.19.3 on channel stable
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ba39319843 (6 weeks ago),
• Engine revision 2e4ba9c6fb
• Dart version 3.3.1
• DevTools version 2.31.1
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn

In version 5.9.0, Android phones can run with the screen off and wiget will be missing

[Mounir-Bouaiche]

@spring321 @hmartiins @mozomig @sagnik-sanyal @Akshaykakkodi Can you try latest version 5.9.2 and see, if problem persist, thanks. Also read #568

[sahilmind]

Tested flutter_screenutil: ^5.9.3 on Pixel 6a and faced the same issue.

[Mounir-Bouaiche]

@sahilmind I can't reproduce your problem. Can you provide a reproduction code ?

[hamiranisahil]

@Mounir-Bouaiche I added the screenutil dependency and set the font size to 16.sp. The text is visible in debug mode but not in release mode on the Pixel 6a.

ScreenUtilInit(
      designSize: designSize,
      minTextAdapt: true,
      splitScreenMode: true,
      // Use builder only if you need to use library outside ScreenUtilInit context
      builder: (_, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          localizationsDelegates: AppLocalizations.localizationsDelegates,
          supportedLocales: AppLocalizations.supportedLocales,
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const SplashPage(),
        );
      },
    );

I tried @mozomig's solution, and it works fine.

[Mounir-Bouaiche]

@hamiranisahil I can't reproduce your problem.
I tried your code (flutter 3.13 + 3.19.5), and work good for me. Can you share a repo ?

screen-20240531-114022_1080x2400.mp4

[hamiranisahil]

@Mounir-Bouaiche I can't share the repo now, but I'll create a demo to share. My Mac has Flutter 3.22.0 and Dart 3.4.0, and the app is a release APK.

[Mounir-Bouaiche]

@Mounir-Bouaiche I can't share the repo now, but I'll create a demo to share. My Mac has Flutter 3.22.0 and Dart 3.4.0, and the app is a release APK.

@hamiranisahil You can use example from this repo by the way, adjust with your tweaks and push to a new branch. Thanks.
Also, could you check the new alpha version, it has a ScreenUtilSingleton widget, similar to ScreenUtilInit, if you're using only w/h/r/sp. See docs for alpha version

[hamiranisahil]

@Mounir-Bouaiche Sure, I'll adjust it with the necessary tweaks and push it to a new branch.

I'll also check the new alpha version with the ScreenUtilSingleton widget. I'll refer to the docs for the alpha version. Thanks!

[bishal-rumba007]

I was facing the same issue when using 5.9.2 wih flutter 3.19.0 and above, here is stackoverflow link:
Stackoverflow Link

I had it working by following the documentation provided in pub.dev for hybrid development:
MaterialApp(
...
builder: (ctx, child) {
ScreenUtil.init(ctx);
return Theme(
data: lightTheme,
child: HomePage(title: 'FlutterScreenUtil Demo'),
);
},
)

It was working for me until I made changes in my project, and converted it to monorepo, the ThemeData theme() is imported from common package core, and now the issue persists again.
my folder structure looks like:

/super_app

• apps

  • mini_app_1
  • mini_app_2

• packages

  • core
    • lib
      • app_theme

• melos.yaml

• pubspec.yaml

[tamremariam]

i had same issue my text all despaired after i close and open the release mode

[tamremariam]

void main() async {
// Add this line
await ScreenUtil.ensureScreenSize(); // adding this line solved my problem
runApp(MyApp());
}
...

[bishal-rumba007]

@tamremariam I am not sure about that, You might also need to add :
MaterialApp( ... builder: (ctx, child) { ScreenUtil.init(ctx); return Theme( data: ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), ), child: HomePage(title: 'FlutterScreenUtil Demo'), ); }, )

even so, I recommend not using after having gone through many issues in production.
Flutter already has rich set of Widgets to handle responsiveness.

[CallMeBossC]

I encountered the same problem. The component disappeared after the application was packaged in a release package. It was traced to the fact that the width and height obtained by screenutil were both 0.

[CallMeBossC]

What is the solution to this problem?

[bishal-rumba007]

What is the solution to this problem?

#579

@tamremariam I am not sure about that, You might also need to add : MaterialApp( ... builder: (ctx, child) { ScreenUtil.init(ctx); return Theme( data: ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), ), child: HomePage(title: 'FlutterScreenUtil Demo'), ); }, )

even so, I recommend not using after having gone through many issues in production. Flutter already has rich set of Widgets to handle responsiveness.

@CallMeBossC

[CallMeBossC]

What is the solution to this problem?这个问题的解决方案是什么？

#579

@tamremariam I am not sure about that, You might also need to add : MaterialApp( ... builder: (ctx, child) { ScreenUtil.init(ctx); return Theme( data: ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), ), child: HomePage(title: 'FlutterScreenUtil Demo'), ); }, )我不确定，您可能还需要添加： MaterialApp( ... builder: (ctx, child) { ScreenUtil.init(ctx); return Theme( data: ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), ), child: HomePage(title: 'FlutterScreenUtil Demo'), ); }, )
even so, I recommend not using after having gone through many issues in production. Flutter already has rich set of Widgets to handle responsiveness.即便如此，我建议在生产中遇到许多问题后不要使用。Flutter 已经有丰富的 Widget 集来处理响应能力。

@CallMeBossC

What is the solution to this problem?这个问题的解决方案是什么？

#579

@tamremariam I am not sure about that, You might also need to add : MaterialApp( ... builder: (ctx, child) { ScreenUtil.init(ctx); return Theme( data: ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), ), child: HomePage(title: 'FlutterScreenUtil Demo'), ); }, )我不确定，您可能还需要添加： MaterialApp( ... builder: (ctx, child) { ScreenUtil.init(ctx); return Theme( data: ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), ), child: HomePage(title: 'FlutterScreenUtil Demo'), ); }, )
even so, I recommend not using after having gone through many issues in production. Flutter already has rich set of Widgets to handle responsiveness.即便如此，我建议在生产中遇到许多问题后不要使用。Flutter 已经有丰富的 Widget 集来处理响应能力。

@CallMeBossC

I added ScreenUtil.init(context); and it worked. Why is this? I have already used the ScreenUtilInit component to wrap it, and I still need to do ScreenUtil.init again.

[bishal-rumba007]

@CallMeBossC
You can see in document here (Hybrid development uses the second way)
You dont need to wrap with ScreenUtil

[CallMeBossC]

@CallMeBossC You can see in document here (Hybrid development uses the second way) You dont need to wrap with ScreenUtil

I want to know what is the difference between the first and second initialization methods? What is Hybrid development

[YuyaKoshimizu]

When I pass the font size using flutter_screenutil to MaterialApp's theme, I get the same thing as fontSize: 0 without getting the size on some devices.
The solution is to specify the font size using a different method in theme.

For example:

// If you use .h with designSize: Size(430, 932)
ThemeData themeData(BuildContext context) {
  final screenHeight = MediaQuery.of(context).size.height;
  final scaleHeight = 932 / screenHeight;
  return ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      counterStyle: AppTextStyles.text14Black400,
      hintStyle:  TextStyle(
        fontSize: 14 * scaleHeight,
        fontWeight: FontWeight.w400,
      ),
      contentPadding: EdgeInsets.only(
        left: 16 * scaleHeight,
        right: 16 * scaleHeight,
      ),
      constraints:  BoxConstraints(maxHeight: 56 * scaleHeight),
    ),
  );
}

Then use MaterialApp in MyAppState/MyApp build.

MaterialApp(
  // omission

  // You can get the screen size by passing `context` in the build.
  theme: themeData(context),
  
  // omission
);

[wdcs-nadimansari]

My issue got fixed after adding below code.

await ScreenUtil.ensureScreenSize();