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 stackoverflow.com/q/49891969/10157127

Md. Yeasin Sheikh
– Md. Yeasin Sheikh

2022-08-18 14:13:09 +00:00
Commented Aug 18, 2022 at 14:13 — Md. Yeasin Sheikh
– Md. Yeasin Sheikh, Commented Aug 18, 2022 at 14:13

GrahamD · Accepted Answer · 2020-07-21 07:42:10Z

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, 2020 at 7:42

GrahamD

3,1853 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miguel Chavez Over a year ago

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

GrahamD Over a year ago

Glad I could help.

ng5002 · Accepted Answer · 2020-07-20 20:12:00Z

0

Try wrapping your entire homepage in a builder widget.

edited Jul 20, 2020 at 20:12

answered Jul 20, 2020 at 19:57

ng5002

5032 silver badges4 bronze badges

1 Comment

Miguel Chavez Over a year ago

Got the same error trying to use Builder Widget above MaterialApp, thanks for your answer

Pranav Manoj · Accepted Answer · 2022-08-18 15:25:16Z

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.

gaborszakacs · Accepted Answer · 2022-09-04 13:03:29Z

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 )

Chemsdine · Accepted Answer · 2025-02-03 15:06:10Z

There is a work around this and it is by providing a new instance of the component you want to give a theme to using mediaQuery I think it's the least hassle for the most outcome like in here

The theme property in the material app

 theme: ThemeClass.lightTheme.copyWith( elevatedButtonTheme: elevatedButtonTheme(), outlinedButtonTheme: outlinedButtonTheme(), ),

A function to return the button theme for example

 elevatedButtonTheme() { return ElevatedButtonThemeData( style: ElevatedButton.styleFrom( minimumSize: Size( double.maxFinite, getProportionateScreenHeight(49), ), elevation: 0, textStyle: textThemeLight.labelLarge!.copyWith( fontWeight: FontWeight.w600, color: Colors.white, ), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), foregroundColor: Colors.white, backgroundColor: primaryColor, ), ); }

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Linked

Related