How to set MediaQuery textScaleFactor throughout the application and not for each page

Question

Main

final query = MediaQuery.of(context);

return MediaQuery(
  data: query.copyWith(textScaleFactor: 1.4),
  child: MaterialApp(
     title: "Flutter Demo",
     initialRoute: '/loginPage',
  )
);

 ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (13775): The following assertion was thrown building MyApp(dirty, state: _MyAppState#38690):
I/flutter (13775): MediaQuery.of() called with a context that does not contain a MediaQuery.
I/flutter (13775): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
I/flutter (13775): This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
I/flutter (13775): a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.

With the MediaQuery class and its data property, I would like to condition the textScaleFactor for the whole application, however I can not get a context before a MaterialApp...

So I don't want to go for each page I have adding the class like parent, how could I can add the class only once for the whole application?

LoginPage (it works but i don't want this)

final query = MediaQuery.of(context);

return MediaQuery(
  data: query.copyWith(textScaleFactor: 1.4),
  child: Scaffold(
     [...]
  );

Thank you,

Does this answer your question? [Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery](https://stackoverflow.com/questions/50214338/flutter-error-mediaquery-of-called-with-a-context-that-does-not-contain-a-med) https://stackoverflow.com/a/50225819/4679965 — Adelina, Oct 12 '21 at 08:37
No, because I have to do it on each page, for example I have 10 main pages, I'm not going to do it 10 times, is there any way to do it globally? — Daniel Roldán, Oct 12 '21 at 09:35

Adelina · Answer 1 · 2021-10-12T12:12:58.023

1

The easiest is to wrap MaterialApp with another MaterialApp and set useInheritedMediaQuery:

    return MaterialApp(
      home: LayoutBuilder(
        builder: (context, _) { # builder so we can access MaterialApp context
          final query = MediaQuery.of(context);
          return MediaQuery(
              data: query.copyWith(textScaleFactor: 1.4),
              child: MaterialApp( 
                  useInheritedMediaQuery: true, #inherited MediaQuery will be used
                  ....

Another way is to use WidgetsBinding.instance.window.physicalSize https://stackoverflow.com/a/60415290/4679965

edited Oct 12 '21 at 12:12

answered Oct 12 '21 at 09:41

Adelina

10,915
1
38
46

1

It doesn't show any error, but it doesn't work like that apparently, it doesn't read the MediaQuery data, and also my attributes of the second MaterialApp, for example debugShowCheckedModeBanner. – Daniel Roldán Oct 12 '21 at 11:25
Also the problem with `WidgetsBinding.instance.window.physicalSize` is that it doesn't have the copyWith for the MediaQuery – Daniel Roldán Oct 12 '21 at 11:29
1

Need to add `useInheritedMediaQuery: true` param, updated answer – Adelina Oct 12 '21 at 12:12
Oh, okey, well, i don't have my Flutter updated to 2.0 so... xD but thx anyways ! – Daniel Roldán Oct 12 '21 at 12:23

score 0 · Accepted Answer · answered Feb 17 '22 at 09:19

After a while, I was able to solve it in the following way without using another MaterialApp or WidgetsApp.

      MaterialApp(
        debugShowCheckedModeBanner: false,
        navigatorKey: navigatorKey, // here
        onGenerateRoute: RouteGenerator.generateRoute,
        [...]
        builder: (BuildContext context, Widget? child) => MediaQuery(
          data: MediaQuery.of(context).copyWith(
            textScaleFactor: MediaQuery.of(context)
                .textScaleFactor
                .clamp(1.0, 1.4),
          ),
          child: child ?? const SizedBox.shrink(),
        ),
      ),

Create a global variable in my route generator file and only call it in the app material

[...]
import 'package:flutter/material.dart';

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class RouteGenerator {
[...]

How to set MediaQuery textScaleFactor throughout the application and not for each page

Main

LoginPage (it works but i don't want this)

2 Answers2