Cant use MediaQuery.of(context) for Themes in Flutter

Question

Hi I am trying to create several TextTheme and change the fonts sizes using MediaQuery.of(context) based on this article:

Flutter — Effectively scale UI according to different screen sizes

But I am getting this error:

MediaQuery.of() called with a context that does not contain a MediaQuery.

I know based on this post: Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery

I should use MediaQuery on my HomePage but then I cannot create themes using MediaQuery then?

Here is my code:

  child:
    MaterialApp(
            theme: ThemeData(
                /// TextFields Handlers transparent
                textSelectionHandleColor: Colors.transparent,
                pageTransitionsTheme: const PageTransitionsTheme(
                  builders: <TargetPlatform, PageTransitionsBuilder>{
                    TargetPlatform.android: ZoomPageTransitionsBuilder(),
                  },
                ),
                textTheme: TextTheme(
                  /// Pages Titles
                  headline1: textTheme(
                    fontSize: (MediaQuery.of(context).size.width / 100) * 1.5,
                    fontWeight: FontWeight.w600,
                    color: Globals.allColors['celeste'],
                  ),
                  headline2: textTheme(
                      fontSize: 15,
                      fontWeight: FontWeight.w600,
                      color: Globals.allColors['cetaceanBlue']),
                      ...

The error is at:

(MediaQuery.of(context).size.width / 100) * 1.5,

Thanks in advance!

Possible duplicate https://stackoverflow.com/q/49891969/10157127 — Md. Yeasin Sheikh, Aug 18 '22 at 14:13

ng5002 · Answer 1 · 2020-07-20T20:12:00.760

0

Try wrapping your entire homepage in a builder widget.

edited Jul 20 '20 at 20:12

answered Jul 20 '20 at 19:57

ng5002

477
2
4

Got the same error trying to use `Builder` Widget above `MaterialApp`, thanks for your answer – Miguel Chavez Jul 21 '20 at 15:18

score 0 · Accepted Answer · answered Jul 21 '20 at 07:42

0

No, you cannot create your material theme with values retrieved from Mediaquery. You set 'default' font size, etc. in your material app theme data. Then in your home page build method you call Mediaquery and modify your font size for that page if necessary.

answered Jul 21 '20 at 07:42

GrahamD

2,952
3
15
26

That is a shame, it would be useful to resize the fonts based on each device resolution, using `themes` instead of changing them with `.copyWith` all over the code. Thanks for your answer Graham – Miguel Chavez Jul 21 '20 at 15:26
Glad I could help. – GrahamD Jul 21 '20 at 16:45

score 0 · Answer 3 · answered Aug 18 '22 at 15:25

You could do this like a one-off kind of thing. You could save your text themes in a themes.dart file or something like that..and then subsequently, you could have a loading page, where you make a MediaQuery and calculate your theme values there.

I think you might have to run setState after that, maybe not, because when you navigate to your home screen from there, the values of the theme would have updated.

score 0 · Answer 4 · answered Sep 04 '22 at 13:03

MediaQuery needs the MaterialApp widget as an ancestor, you can't use it when constructing the MaterialApp itself. A workaround is not using the theme property but wrapping the descendants with a Theme widget using the builder property. It will have the MaterialApp as an ancestor so you can use MediaQuery there.

MaterialApp(
  builder: (context, child) {
    return Theme(
      data: ThemeData(
        // your theme
        // can use e.g. MediaQuery.of(context).size.width here
      ),
      child: child,
    );
  },
  home: SomeScreen(),
  // etc, no theme here
)

Cant use MediaQuery.of(context) for Themes in Flutter

4 Answers4