is it possible to use if statements to change the font size in themedata based off the size of the screen (media query)?

Question

I'm trying to set the font size of the text in my app through the themeData using media Query.

eg. if screen size is smaller the x, font size should be x.

is this even possible to achieve? and if so, how would I go about it?

here is my MyApp code in my main.dart:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: Colors.black,
          textTheme: TextTheme(
            bodyText1: TextStyle(
              fontWeight: FontWeight.bold,
              fontFamily: 'SourceSansPro',
            ),
          ),
        ),
        debugShowCheckedModeBanner: false,
        initialRoute: '/second',
        routes: {
          '/': (context) => pageone(),
          '/first': (context) => pagetwo(),
          '/second': (context) => pagethree(),
        });
  }
}

When I try and use var screenSize = MediaQuery.of(context).size; as a variable into MyApp, i'm getting an error on context.

thanks so much and any help would be greatly appreciated.

score 0 · Accepted Answer · answered Jan 21 '23 at 22:46

I would create multiple TextThemes, one for each screen size you want to support:

TextTheme smallTextTheme = TextTheme(
  bodySmall: TextStyle(
    fontWeight: FontWeight.bold,
    fontFamily: 'SourceSansPro',
    fontSize: 14,
  ),
  bodyMedium: TextStyle(
    fontWeight: FontWeight.bold,
    fontFamily: 'SourceSansPro',
    fontSize: 16,
  ),
);

TextTheme largeTextTheme = TextTheme(
  bodySmall: TextStyle(
    fontWeight: FontWeight.bold,
    fontFamily: 'SourceSansPro',
    fontSize: 18,
  ),
  bodyMedium: TextStyle(
    fontWeight: FontWeight.bold,
    fontFamily: 'SourceSansPro',
    fontSize: 20,
  ),
);

Then in MaterialApp, you can determine which TextTheme you use based on the screen size:

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: WidgetsBinding.instance.window.physicalSize.width > 600 ? largeTextTheme : smallTextTheme,
      ),
      home: const MyHomePage(),
    );

See this answer for how to use the device size in the MaterialApp widget. If you try to use MediaQuery, you will get an error like this:

No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.

score 0 · Answer 2 · answered Jan 21 '23 at 22:46

You need to separate the context(initialize on top level). then you will be able to read.

You can do

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Theme(
      data: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black,
        textTheme: TextTheme(
          bodyText1: TextStyle(
            fontWeight: FontWeight.bold,
            fontFamily: 'SourceSansPro',
          ),
        ),
      ),
      child: Scaffold(),
    );
  }
}

But I think it is not necessary to increase the font size.

is it possible to use if statements to change the font size in themedata based off the size of the screen (media query)?

2 Answers2