OpenFlutter / flutter_screenutil

Flutter screen adaptation, font adaptation, get screen information
https://pub.dartlang.org/packages/flutter_screenutil
Apache License 2.0
3.88k stars 497 forks source link

some text widgets in build mode is missing #558

Open Akshaykakkodi opened 6 months ago

Akshaykakkodi commented 6 months ago

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 commented 6 months ago

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

YuchenTOR commented 6 months ago

try use 5.8.4

mozomig commented 5 months ago

same problem

mozomig commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

我找到了 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 commented 4 months ago

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

sahilmind commented 4 months ago

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

Mounir-Bouaiche commented 4 months ago

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

hamiranisahil commented 4 months ago

@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 commented 4 months ago

@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

hamiranisahil commented 4 months ago

@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 commented 4 months ago

@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 commented 4 months ago

@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 commented 4 months ago

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

tamremariam commented 2 months ago

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

tamremariam commented 2 months ago

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

bishal-rumba007 commented 2 months ago

@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 commented 1 month ago

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 commented 1 month ago

What is the solution to this problem?

bishal-rumba007 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

CallMeBossC commented 1 month ago

@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