OpenFlutter / flutter_screenutil

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

Changes are not applied to app until hot reload is done #433

Closed n1h41 closed 1 year ago

n1h41 commented 1 year ago

the flutter_screenutil size changes are only being applied after the ui is reloaded. After a hot restart or when the app is tested on a real device the changes are not show in the app

Below is my initialisation of the package in main.dart

Widget build(BuildContext context) { return ScreenUtilInit( designSize: const Size(428, 926), minTextAdapt: true, splitScreenMode: true, builder: (context, child) => MaterialApp( title: "LookzUp", locale: _locale, navigatorKey: navigatorKey, debugShowCheckedModeBanner: false, theme: ThemeData( appBarTheme: AppBarTheme( iconTheme: IconThemeData(color: Styles.titleColor), color: Styles.pageColour, actionsIconTheme: IconThemeData(color: Styles.titleColor), elevation: 0, titleTextStyle: TextStyle(fontSize: 18, color: Styles.titleColor), ), scaffoldBackgroundColor: Styles.pageColour, fontFamily: 'Kozuka_Gothic_Pr6N', ), supportedLocales: [ Locale("en"), Locale("hi"), Locale("bn"), ], localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalCupertinoLocalizations.delegate, GlobalWidgetsLocalizations.delegate, const TranslationsDelegate(), ], onGenerateRoute: Routes.generateRoute, home: child, builder: (context, widget) => ResponsiveWrapper.builder( ClampingScrollWrapper.builder(context, widget), breakpoints: const [ ResponsiveBreakpoint.resize(576, name: MOBILE), ResponsiveBreakpoint.autoScale(500, name: TABLET), ResponsiveBreakpoint.resize(992, name: DESKTOP), ResponsiveBreakpoint.autoScale(1700, name: 'XL'), ], ), ), child: !_initialized ? CircularProgressIndicator() : SplashScreen(), ); }

github-actions[bot] commented 1 year ago

This issue is stale because it has been open for 30 days with no activity.

definitelyme commented 1 year ago

I noticed that if you place the ScreenUtilInit widget above the MaterialApp, you lose access to updates/changes to MediaQueryData (even if you use the useInheritedMediaQuery property).

To fix this, put the ScreenUtilInit widget in MaterialApp.builder; and Hot reloads, ui updates, keyboard & other configurations should work fine. The api docs need to be updated.

I refactored your main.dart

Widget build(BuildContext context) {
  return MaterialApp(
    title: "LookzUp",
    locale: _locale,
    navigatorKey: navigatorKey,
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Styles.titleColor),
        color: Styles.pageColour,
        actionsIconTheme: IconThemeData(color: Styles.titleColor),
        elevation: 0,
        titleTextStyle: TextStyle(fontSize: 18, color: Styles.titleColor),
      ),
      scaffoldBackgroundColor: Styles.pageColour,
      fontFamily: 'Kozuka_Gothic_Pr6N',
    ),
    supportedLocales: [
      Locale("en"),
      Locale("hi"),
      Locale("bn"),
    ],
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      const TranslationsDelegate(),
    ],
    onGenerateRoute: Routes.generateRoute,
    // home: child,
    builder: (_, __) => ScreenUtilInit(
      designSize: const Size(428, 926),
      minTextAdapt: true,
      splitScreenMode: true,
      useInheritedMediaQuery: true,
      child: !_initialized ? CircularProgressIndicator() : SplashScreen(),
      builder: (context, child) => ResponsiveWrapper.builder(
        ClampingScrollWrapper.builder(context, child),
        breakpoints: const [
          ResponsiveBreakpoint.resize(576, name: MOBILE),
          ResponsiveBreakpoint.autoScale(500, name: TABLET),
          ResponsiveBreakpoint.resize(992, name: DESKTOP),
          ResponsiveBreakpoint.autoScale(1700, name: 'XL'),
        ],
      ),
    ),
  );
}
github-actions[bot] commented 1 year ago

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] commented 1 year ago

This issue was closed because it has been inactive for 14 days since being marked as stale.