All text in the app is invisible

[BrunoJurkovic]

Description

All of the text in the app is invisible, this seems to be a reoccurring problem with this package and is preventing us from releasing the app.

Where it occurs

We have noticed that this bug occurs on Android, specifically on release mode. I am unable to reproduce this bug on my iOS simulator or my Android simulator.

What I have done to mitigate this

• I have added a builder method to my material app where I use setContext().
• Wrapped the ScreenUtilInit widget with a MediaQuery and passed it data: MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
• Removed const from the home parameter of the MaterialApp.

Extra Info + Image

• I am using GetMaterialApp instead of the vanilla MaterialApp.
• Seems to be the same issue as issue on release mode #348 release版本打包 界面会变形 #80 App not rendering in real device on release mode or profile mode only debug mode working #341 New Version version flutter_screenutil 5.1.1 is not working with GetMaterial App #337
• I am using the latest flutter version, flutter doctor shows no issues.
• 

[BrunoJurkovic]

Here is a code sample on how I instantiate the package:

 @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance!.window),
      child: ScreenUtilInit(
        designSize: ScreenUtil.defaultSize,
        builder: () => GetMaterialApp(
          title: 'Unisport',
          debugShowCheckedModeBanner: false,
          translations: AppTranslations(),
          locale: window.locale,
          fallbackLocale: const Locale('hr', 'HR'),
          themeMode: themeController.themeMode,
          theme: lightTheme,
          darkTheme: darkTheme,
          home: SplashScreen(),
          builder: (ctx, child) {
            ScreenUtil.setContext(ctx);
            return child!;
          },
        ),
      ),
    );
  }

[FlawLessx]

did you find solution? i also faced this problem on release mode after several run. Example 10 times open app 3 times will throw missing font size

[BrunoJurkovic]

did you find solution? i also faced this problem on release mode after several run. Example 10 times open app 3 times will throw missing font size

Nope, seems like the issue is still present. This absolutely crushed our plans of releasing the app on the date that we were supposed to..

[BrunoJurkovic]

Ok, somehow the issue seems to be resolved. I resolved it by doing the following steps:

1. Removing all const from every screen page. (For example, if I push to a screen (ctx) => *const* ScreenScreen() you remove the const keyword)
2. Placed ScreenUtil.setContext(context) in every widget, screen and component I could find. (otherwise, it would throw me a null operator used on null value error)
3. Most importantly (I think) wrapping the child with a MediaQuery widget (Check below).

 @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      builder: () => GetMaterialApp(
        title: 'Unisport',
        debugShowCheckedModeBanner: false,
        translations: AppTranslations(),
        locale: window.locale,
        fallbackLocale: const Locale('hr', 'HR'),
        themeMode: themeController.themeMode,
        theme: lightTheme,
        darkTheme: darkTheme,
        home: SplashScreen(),
        builder: (ctx, child) {
          ScreenUtil.setContext(ctx);
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: child!,
          );
        },
      ),
    );
  }
}

[BrunoJurkovic]

@FlawLessx Here is the solution that worked for me btw :)

[BrunoJurkovic]

@lizhuoyuan This issue should definitely be resolved ASAP as this is affecting a lot of people and your package is very important :) (If you need help fixing this message me somehow and we will investigate the issue together). I am not going to close this issue as this is just a hotfix, not a real solution. If you don't agree with me, that's okay, you can go ahead and close the issue.

[FlawLessx]

@BrunoJurkovic Unfortunately it didn't work, for me how to deal with it with overriding fontSize from themeData like
Theme.of(context).textTheme.bodyText2!.copyWith(fontSize: 16.sp)

[BrunoJurkovic]

@BrunoJurkovic Unfortunately it didn't work, for me how to deal with it with overriding fontSize from themeData like
Theme.of(context).textTheme.bodyText2!.copyWith(fontSize: 16.sp)

I'm sorry, could you please rephrase your question?

[vekariyasagar]

It's worked for me as well

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppName',
      navigatorKey: NavigationService.navigatorKey,
      onGenerateRoute: Application.router.generator,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (context, widget) {
        //add this line
        ScreenUtil.setContext(context);
        return MediaQuery(
          //Setting font does not change with system font size
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          child: widget!,
        );
      },
      home: SplashScreen(),
    );
  }

[y-alkhateeb]

I'm using Theme and inside Theme I added textStyle with .sp, so I can't fix this issue until wrap widget which is into Builder with Theme

class App extends StatelessWidget {
  @override
  Widget build(BuildContext AppContext) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.dark.copyWith(
          statusBarColor: Colors.transparent,
        ),
      child: MultiProvider(
        providers: [
          ...ApplicationProvider().blocItems,
          ...ApplicationProvider().changeNotifierItems,
        ],
        child: ScreenUtilInit(
          /// [Size] must be set like as Figma or XD design
          designSize: Size(375, 812),
          minTextAdapt: true,
          builder: () => Consumer<AppConfig>(


           /// [builder] if u remove builder ScreenUtilInit will broke ur app in version 5.3.1
            builder: (context, provider, __) {
              return MaterialApp.router(
                builder: (context, widget) {
                  //add this line
                  ScreenUtil.setContext(context);
                  return MediaQuery(
                    //Setting font does not change with system font size
                    data: MediaQuery.of(context).copyWith(
                        textScaleFactor: 1.0,
                    ),
                    child: Theme(
                    data: provider.currentTheme,
                    child: widget!,
                    ),
                  );
                },



                debugShowCheckedModeBanner: false,
                title: ApplicationConstants.TITLE_APP_NAME,
                theme: provider.currentTheme,
                routerDelegate: GetIt.I<AppRouter>().delegate(),
                routeInformationParser: GetIt.I<AppRouter>().defaultRouteParser(),
                supportedLocales: S.delegate.supportedLocales,
                locale: provider.appLocal,
                // These delegates make sure that the localization data for the proper language is loaded
                localizationsDelegates: [
                  // 1
                  S.delegate,
                  // 2
                  // Built-in localization of basic text for Material widgets
                  GlobalMaterialLocalizations.delegate,
                  // Built-in localization for text direction LTR/RTL
                  GlobalWidgetsLocalizations.delegate,
                  DefaultCupertinoLocalizations.delegate,
                  GlobalCupertinoLocalizations.delegate
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

[BrunoJurkovic]

@BrunoJurkovic Unfortunately it didn't work, for me how to deal with it with overriding fontSize from themeData like
Theme.of(context).textTheme.bodyText2!.copyWith(fontSize: 16.sp)

It should work for you, make sure you're using the first initialization method.

[jacaTM]

Mine wasn't showing any text, and widget that was using the Screen Util .h or .w (widgets that were using only numbers for their height, width, with no Screen Util usage, were showing normally...) I'm now using version 5.0.3 which is working.

[Mounir-Bouaiche]

@lizhuoyuan Please check the my Pull Request #352 and tell if it fixed the problem.

@jacaTM @BrunoJurkovic and anyone else, please try this trick that worked for me.

// Add this function
Future<void> _ensureScreenSize(window) async {
  return window.viewConfiguration.geometry.isEmpty
      ? Future.delayed(
             const Duration(milliseconds: 10),
             () => _ensureScreenSize(window)
         )
      : Future.value();
}

void main() async {
  // Add these lines before calling ScreenUtil.init()/ScreenUtilInit()
  // Better add these lines before runApp() if you are using native splash screen
  final window = WidgetsFlutterBinding.ensureInitialized().window;
  await _ensureScreenSize(window);
  runApp(const MyApp());
}

[adnankhan74444]

any update regarding this issue ?

[Mounir-Bouaiche]

@adnankhan74444 My trick doesn't work for you ?

[Refaat2020]

to solve this issue remove any api in the theme
like sp

[flutter-max]

Mounir-Bouaiche.

your solution worked for me . thanks alot!

[Abdulah-butt]

simply use
flutter_screenutil: 5.8.4

This version works well

[kaneki666]

The issue still persist if u use sp in Apptheme here is a fix for latest version.

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(374, 812),
      minTextAdapt: true,
      builder: (_, child) => MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (_) => homeVM, // You should provide your ViewModel here.
          ),
        ],
        child: MaterialApp(
          title: 'Discover',
          debugShowCheckedModeBanner: false,
          theme: AppTheme.appTheme(),
          home: FutureBuilder<void>(
            future: _ensureScreenSize(context),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return const SplashView();
              } else {
                return const Scaffold(
                  body: Center(
                    child: CircularProgressIndicator(),
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }

  Future<void> _ensureScreenSize(BuildContext context) async {
    final screenSize = MediaQuery.of(context).size;
    if (screenSize.isEmpty) {
      await Future.delayed(const Duration(milliseconds: 10));
      // ignore: use_build_context_synchronously
      return _ensureScreenSize(context);
    }
  }
}

[wisdombsl]

@lizhuoyuan Please check the my Pull Request #352 and tell if it fixed the problem.

@jacaTM @BrunoJurkovic and anyone else, please try this trick that worked for me.

// Add this function
Future<void> _ensureScreenSize(window) async {
  return window.viewConfiguration.geometry.isEmpty
      ? Future.delayed(
             const Duration(milliseconds: 10),
             () => _ensureScreenSize(window)
         )
      : Future.value();
}

void main() async {
  // Add these lines before calling ScreenUtil.init()/ScreenUtilInit()
  // Better add these lines before runApp() if you are using native splash screen
  final window = WidgetsFlutterBinding.ensureInitialized().window;
  await _ensureScreenSize(window);
  runApp(const MyApp());
}

My app took forever to load. I am using a native splash screen and i added the code as well