some text widgets in build mode is missing

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: '/',
   
        
      );
    }
  ),
);

}
}

@Akshaykakkodi

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

try use 5.8.4

same problem

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.....
})

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!

我找到了 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

@spring321

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

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

@sahilmind

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

@Mounir-Bouaiche

@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.

@hamiranisahil

@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

@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.

@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

@Mounir-Bouaiche

@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!

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

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

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

@tamremariam

@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.

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.

What is the solution to this problem?

@tamremariam

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

@tamremariam

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.

@CallMeBossC

@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

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
);

My issue got fixed after adding below code.

await ScreenUtil.ensureScreenSize();

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: '/',

    
  );
}

),
);

Navigation Menu

Repository navigation

some text widgets in build mode is missing #558

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

some text widgets in build mode is missing #558

Description

Activity

sagnik-sanyal commented on Mar 29, 2024

YuchenTOR commented on Apr 1, 2024

mozomig commented on Apr 10, 2024

mozomig commented on Apr 10, 2024

hmartiins commented on Apr 11, 2024

spring321 commented on Apr 20, 2024

Mounir-Bouaiche commented on May 30, 2024

sahilmind commented on May 31, 2024

Mounir-Bouaiche commented on May 31, 2024

hamiranisahil commented on May 31, 2024

Mounir-Bouaiche commented on May 31, 2024

hamiranisahil commented on May 31, 2024

Mounir-Bouaiche commented on May 31, 2024

hamiranisahil commented on May 31, 2024

bishal-rumba007 commented on Jun 4, 2024

tamremariam commented on Jul 25, 2024

tamremariam commented on Jul 26, 2024

bishal-rumba007 commented on Jul 26, 2024

CallMeBossC commented on Sep 3, 2024

CallMeBossC commented on Sep 3, 2024

bishal-rumba007 commented on Sep 3, 2024

CallMeBossC commented on Sep 3, 2024

bishal-rumba007 commented on Sep 3, 2024

CallMeBossC commented on Sep 3, 2024

YuyaKoshimizu commented on Nov 1, 2024

wdcs-nadimansari commented on Nov 7, 2024

cbt-bdsm commented on Feb 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions