How to call ScreenUtil() from ThemeData when app is building?

[daybson]

I want to be able to use ScreenUtil().Sp(20), for example, directly from my theme definition.

This is my actual code:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _appTitle,
      theme: _getAppTheme(), //HERE
      home: HomePage(key, _appTitle),
      builder: (BuildContext context, Widget widget) {
        ScreenUtil.init(context,
            width: 1080, height: 1920, allowFontScaling: true);
        return Padding(
          child: widget,
        );
      },
    );
  }

ThemeData _getAppTheme() {
    return ThemeData(
        primaryColorLight: Colors.blue,
        primaryColorDark: Colors.deepPurple,
        //...
        primaryTextTheme: TextTheme(
          bodyText1: TextStyle(
              fontSize: ScreenUtil().setSp(16), //HERE: this is what I want to do
              color: Colors.black87,
              fontWeight: FontWeight.w400,
              letterSpacing: 0.5),
        ),
       );
  }

But I got the Exception:

I/flutter ( 9488): The method 'setSp' was called on null.

Which make senses, because I'm calling _getAppTheme() before I init the ScreenUtil.
If I try to put the ScreenUtil.init(...) inside my _getAppTheme(), and modify it to receive the BuildContext parameter, as follows:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _appTitle,
      home: HomePage(key, _appTitle),
      theme: _getAppTheme(context),
      builder: (BuildContext context, Widget widget) {
  .....
 ThemeData _getAppTheme(BuildContext context) {
    ScreenUtil.init(context, width: 1080, height: 1920, allowFontScaling: true);
    return ThemeData(
        primaryColorLight: Colors.blue,
 ....

It doesn't works, and throws this exception then:

I/flutter ( 9488): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 9488): The following assertion was thrown building Rpg3dit(dirty, state: _Rpg3ditState#e515c):
I/flutter ( 9488): MediaQuery.of() called with a context that does not contain a MediaQuery.
I/flutter ( 9488): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
I/flutter ( 9488): This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
I/flutter ( 9488): a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
I/flutter ( 9488): The context used was:
I/flutter ( 9488):   Rpg3dit
I/flutter ( 9488):
I/flutter ( 9488): The relevant error-causing widget was:
I/flutter ( 9488):   Rpg3dit 
package:rpg3dit/main.dart:12
I/flutter ( 9488):
I/flutter ( 9488): When the exception was thrown, this was the stack:

There's a way to workaround this? Is possible to use ScreenUtil inside the ThemeData definition?

[Hijodelalunah]

You need a MaterialApp or a WidgetsApp where ScreenUtil will be initialized because ScreenUtil is trying to access a MediaQuery context which only descendants of MediaQuery can access it.
Why don't you initialize it in HomePage ? it is mentioned in readme.

Be sure to set the page in the MaterialApp's home(ie the entry file, just set it once) to ensure that the fit size is set before each use

[daybson]

Why don't you initialize it in HomePage ?

Because I can't set app theme from initial page, only in main when I return MaterialApp...

[Hijodelalunah]

Try
Widget build(BuildContext context) { ScreenUtil.init(context, width: 1080, height: 1920, allowFontScaling: true); return MaterialApp( title: _appTitle, theme: _getAppTheme(), //HERE home: HomePage(key, _appTitle), builder: (BuildContext context, Widget widget) { return Padding( child: widget, ); }, ); }

[daybson]

Try
Widget build(BuildContext context) { ScreenUtil.init(context, width: 1080, height: 1920, allowFontScaling: true); return MaterialApp( title: _appTitle, theme: _getAppTheme(), //HERE home: HomePage(key, _appTitle), builder: (BuildContext context, Widget widget) { return Padding( child: widget, ); }, ); }

I have tried that before, gives me the same error:

I/flutter (17178): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().

Sounds like when I use the context object outside an Widget builder, the MediaQuery can not be instantiated properly.

So, I'm not shure if this is a package limitation, or Flutter limitation...
But would be nice if we could use the package right inside the Theme app, allowing us to set all text sizes only once in ThemeData.

[Hijodelalunah]

This should work try to adapt your code as following:

void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: ThemeData,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   ScreenUtil.init(context,width: 1080, height: 1920, allowFontScaling: true);
    return Container(
      child: ...,
    );
  }
}

check https://stackoverflow.com/questions/50214338/flutter-error-mediaquery-of-called-with-a-context-that-does-not-contain-a-med
for more informations, using ScreenUtil.init() uses MediaQuery which causes the problem.

[lizhuoyuan]

I remember that the theme can be modified, you can try to modify the content of the theme after getting the context
And , thanks for your help . @Hijodelalunah

[talatkuyuk]

This should work try to adapt your code as following:
void main() => runApp(App());
class App extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Title',
theme: ThemeData,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
ScreenUtil.init(context,width: 1080, height: 1920, allowFontScaling: true);
return Container(
child: ...,
);
}
}

check https://stackoverflow.com/questions/50214338/flutter-error-mediaquery-of-called-with-a-context-that-does-not-contain-a-med
for more informations, using ScreenUtil.init() uses MediaQuery which causes the problem.

You didn't understand the problem. That code is known, it is normal usage of screenutil.
But @kazyamof want to use the screenutil in ThemeData. This is the problem.

[talatkuyuk]

Why it is closed? I have the same point. I want to use ScreenUtil in ThemeData so that I forexample would like to give height to Buttons via ButtonThemeData(height: 30.h) in one place for all buttons in my application.

But When I use it ThemeData , I receive the same error @kazyamof mentioned . When I initialize the ScreenUtil before MaterialApp, or in MaterialApp builder, again I receive the same error that @kazyamof mentioned above.

[JeremiFerre]

I think you can use new beta 3.0.0 version of ScreenUtil which doesn't require context to be initialized. Therefore, it is now possible to use it in ThemeData. (https://pub.dev/packages/flutter_screenutil/versions/3.0.0-beta.2)

[hadi7khan]

Why it is closed? I have the same point. I want to use ScreenUtil in ThemeData so that I forexample would like to give height to Buttons via ButtonThemeData(height: 30.h) in one place for all buttons in my application.

But When I use it ThemeData , I receive the same error @kazyamof mentioned . When I initialize the ScreenUtil before MaterialApp, or in MaterialApp builder, again I receive the same error that @kazyamof mentioned above.

Were you able to solve it. I am in a similar situation. I want to use screenutils in themeData which is predefined for my application

[Mounir-Bouaiche]

@hadi7khan , to use library, it first needs to do some calculations, so you must initialize it with a context that know sizes (ascensor of mediaquery). So, you must wrap your MaterialApp with a special Builder that calls mediaquery (flutter >= 3.10) or implement your special widget that will handle screen size changed (flutter < 3.10). There's already a special widget in the library that handle all that and more: ScreenUtilInit. Read Documentation for more.

Before creating this special widget, there was an example(or workaround) to do that:

void main() async {
  runApp(MyApp());
}
...
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'),
    );
  },
)

[hadi7khan]

@Mounir-Bouaiche I have done same thing. It's just if i try to use the custom theme, where i am using screenutils. it's throwing the error. Like in my code i am using screenutils in lightTheme:
@OverRide
Widget build(BuildContext context) {
final goRouter = ref.watch(goRouterProvider);
return ScreenUtilInit(
designSize: const Size(375, 812),
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) {
ScreenUtil.init(context);
return MaterialApp.router(
debugShowCheckedModeBanner: false,
routerDelegate: goRouter.routerDelegate,
routeInformationParser: goRouter.routeInformationParser,
routeInformationProvider: goRouter.routeInformationProvider,
title: 'Project',
theme: lightTheme,
darkTheme: darkTheme,
themeMode: currentTheme(kLight),

      );
    });

}

even if i remove ScreenUtil.init(context); which is not necessary because i am already initializing it

[Mounir-Bouaiche]

@hadi7khan , you can't. You MUST initialize the library and then use it. You are using the library before initialization. You can convert lightTheme to function lightTheme() to solve this, so the theme will be defined only when the library has been initialized.
And your utilization is wrong, you should use only ScreenUtilInit or ScreenUtil.init, but not both.

[TechSatya]

Instead of passing the MaterialApp widget through the "child" property of ScreenUtilInit, pass it through the "builder" property.

Example :

@override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 800),
      builder: (context, _) => MaterialApp(
        theme: AppThemes.getTheme(),
        initialRoute: Routes.startupView,
        onGenerateRoute: StackedRouter().onGenerateRoute,
        navigatorKey: StackedService.navigatorKey,
        navigatorObservers: [StackedService.routeObserver],
      ),
    );
  }