title: How To Do Dynamic Font Size According to ScreenWidth When Specifying FontSize In ThemeData?
body: <p>I need my font sizes to change depending on the width of the user's screen. I am using a file, size_config.dart, for this, which contains the method getProportionateScreenWidth() to retrieve the user screen width and do some calculations.</p>
  <p>Because I want a light and dark UI I am creating two ThemeData classes, and have decided to do all TextStyles in it. My issue right now is that when I attempt to call the method to set the font size I get a NoSuchMethodError: The method 'toDouble' was called on null. Presumably the reason is that the ThemeData is calculated before the app startup? Thus there is no screen width to work with so I get an error. Is there an easy fix for this?</p>
  <pre><code>//size_config.dart
  class SizeConfig {
    static MediaQueryData _mediaQueryData;
    static double screenWidth;
    static double screenHeight;
    static double defaultSize;
    static Orientation orientation;
  
    void init(BuildContext context) {
      _mediaQueryData = MediaQuery.of(context);
      screenWidth = _mediaQueryData.size.width;
      screenHeight = _mediaQueryData.size.height;
      orientation = _mediaQueryData.orientation;
    }
  }
  
  double getProportionateScreenWidth(double inputWidth) {
    double screenWidth = SizeConfig.screenWidth;
    // 375 is the layout width that designer use
    return (inputWidth / 375.0) * screenWidth;
  }
  </code></pre>
  <pre><code>//themes.dart
  ThemeData lightTheme() {
    return ThemeData (
      textTheme: lightTextTheme()
      //and other theme stuff
    );
  }
  
  TextTheme textTheme() {
    return TextTheme(
        headline1: TextStyle(
            color: Color(0xFF000000),
            fontSize: getProportionateScreenWidth(25), //problem is with here i believe
            fontWeight: FontWeight.normal),
    );
  }
  </code></pre>
  <pre><code>//main.dart
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: lightTheme(), //instantiating theme
        initialRoute: '/onboarding',
        routes: {
          '/onboarding': (context) =&gt; OnboardingScreen(),
          '/home': (context) =&gt; HomeScreen(),
          '/assistant': (context) =&gt; AssistantScreen(),
        },
      );
    }
  }
  </code></pre>
  <pre><code>//body.dart (where headline1 is being used) don't believe problem is here as this is not even rendered in upon start of the app (an onBoarding screen comes before it named routing is used to navigate the separate screens)
  Text(
    'Hello,',
    textAlign: TextAlign.left,
    style: Theme.of(context).textTheme.headline1,
  ),
  </code></pre>
  <pre><code>//Error message
  ════════ Exception caught by widgets library ═══════════════════════════════════
  The following NoSuchMethodError was thrown building MyApp(dirty):
  The method 'toDouble' was called on null.
  Receiver: null
  Tried calling: toDouble()
  
  The relevant error-causing widget was
      MyApp 
  package:dash/main.dart:17
  When the exception was thrown, this was the stack
  #0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:51:5)
  #1      double.*  (dart:core-patch/double.dart:36:23)
  #2      getProportionateScreenWidth 
  package:dash/size_config.dart:29
  #3      textTheme 
  package:dash/themes.dart:35
  #4      lightTheme 
  package:dash/themes.dart:11
  ...
  ════════════════════════════════════════════════════════════════════════════════
  </code></pre>
  <p>Help is greatly appreciated!</p>