flutter_screenutil icon indicating copy to clipboard operation
flutter_screenutil copied to clipboard

some text widgets in build mode is missing

Open Akshaykakkodi opened this issue 1 year ago • 26 comments

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 avatar Mar 27 '24 18:03 Akshaykakkodi

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

sagnik-sanyal avatar Mar 29 '24 07:03 sagnik-sanyal

try use 5.8.4

YuchenTOR avatar Apr 01 '24 14:04 YuchenTOR

same problem

mozomig avatar Apr 10 '24 08:04 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.....
})

mozomig avatar Apr 10 '24 09:04 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.....
})

Work for me! Thanks!

hmartiins avatar Apr 11 '24 14:04 hmartiins

我找到了 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 avatar Apr 20 '24 03:04 spring321

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

Mounir-Bouaiche avatar May 30 '24 21:05 Mounir-Bouaiche

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

sahilmind avatar May 31 '24 10:05 sahilmind

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

Mounir-Bouaiche avatar May 31 '24 10:05 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 avatar May 31 '24 10:05 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 ?

https://github.com/OpenFlutter/flutter_screenutil/assets/59919990/ff78c8d3-f808-441a-a136-c607ba54beb6

Mounir-Bouaiche avatar May 31 '24 11:05 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 avatar May 31 '24 11:05 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.

@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 avatar May 31 '24 11:05 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!

hamiranisahil avatar May 31 '24 11:05 hamiranisahil

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

bishal-rumba007 avatar Jun 04 '24 07:06 bishal-rumba007

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

tamremariam avatar Jul 25 '24 13:07 tamremariam

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

tamremariam avatar Jul 26 '24 09:07 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.

bishal-rumba007 avatar Jul 26 '24 09:07 bishal-rumba007

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 avatar Sep 03 '24 09:09 CallMeBossC

What is the solution to this problem?

CallMeBossC avatar Sep 03 '24 09:09 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'), ); }, )

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

bishal-rumba007 avatar Sep 03 '24 11:09 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'), ); }, )我不确定,您可能还需要添加: 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.

CallMeBossC avatar Sep 03 '24 12:09 CallMeBossC

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

bishal-rumba007 avatar Sep 03 '24 12:09 bishal-rumba007

@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

CallMeBossC avatar Sep 03 '24 13:09 CallMeBossC

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

YuyaKoshimizu avatar Nov 01 '24 04:11 YuyaKoshimizu

My issue got fixed after adding below code.

await ScreenUtil.ensureScreenSize();

wdcs-nadimansari avatar Nov 07 '24 10:11 wdcs-nadimansari