Flutter responsive fontSize - flutter

Question

I've got a file called text_styles.dart which contains many different TextStyles like that (without a class or something else):
TextStyle subheadingTextStyle = TextStyle(
color: blackColor,
fontSize: 20.0,
height: 1.7);
I call this TextStyle in other files with
style: subheadingTextStyle
Now I want to resize the font size depending on the screen size like described here: Flutter fontsize in web
So I changed my subheadingTextStyle:
TextStyle subheadingTextStyle = TextStyle(
color: blackColor,
fontSize: Responsive.isDesktop(context)
? 20
: Responsive.isTablet(context)
? 15
: 10,
height: 1.7);
But I get an error that the context is undefined (because I try to access context outside of its scope).
What's the best way to fix that? Or is there any other (better?) way to dynamically resize the font size depending on the screen size?

Answer 1

If u want to use your method what u described then u need to handle like this below
TextStyle subheadingTextStyle = TextStyle(
color: Colors.black,
fontSize: 20.0,
height: 1.7,
);
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(
'Hello!',
style: subheadingTextStyle.copyWith(
fontSize: Responsive.isDesktop(context)
? 20
: Responsive.isTablet(context)
? 15
: 10,
),
);
}
}
class Responsive {
static bool isMobile(BuildContext context) =>
MediaQuery.of(context).size.width < 730;
static bool isTablet(BuildContext context) =>
MediaQuery.of(context).size.width < 1190 &&
MediaQuery.of(context).size.width >= 730;
static bool isDesktop(BuildContext context) =>
MediaQuery.of(context).size.width >= 1190;
}
But my suggestion is: make responsive based on device using any of this packages
https://pub.dev/packages/flutter_screenutil
or
https://pub.dev/packages/sizer