in flutter i want to set font sizes according to diffrent screen size like mobile , tab, desktop. can any one know how to do this. i'm struggling to responsive a text.

i used screen_util package for responsiveness but it couldn't satisfied me for example i set font size fontSize : 17.sp it's working fine in mobile size but on bigger screen this looks too much bigger please help me i'm stuck i n this

this is my simple code 


ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
       builder: (context , child){ 
        return
          MediaQuery(data: MediaQuery.of(context).copyWith(
          textScaler: TextScaler.linear(1.0)
        ), child:
        MaterialApp(
          debugShowCheckedModeBanner: false, 
          home:  HomePage(),

        ),
         );
       },
    );

in flutter i want to set font sizes according to diffrent screen size like mobile , tab, desktop. can any one know how to do this. i'm struggling to responsive a text.

i used screen_util package for responsiveness but it couldn't satisfied me for example i set font size fontSize : 17.sp it's working fine in mobile size but on bigger screen this looks too much bigger please help me i'm stuck i n this

this is my simple code 


ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
       builder: (context , child){ 
        return
          MediaQuery(data: MediaQuery.of(context).copyWith(
          textScaler: TextScaler.linear(1.0)
        ), child:
        MaterialApp(
          debugShowCheckedModeBanner: false, 
          home:  HomePage(),

        ),
         );
       },
    );

• flutter
• dart

• 1 "in flutter i want to set font sizes according to diffrent screen size like mobile , tab, desktop" No, you actually don't. If you leave the font sizes as the TextTheme class sets them, they'll look fine regardless of the device. Check out this summary by Pixeltoast on the fundamentals of Flutter layout including MediaQuery: notes.tst.sh/flutter/media-query – Randal Schwartz Commented Mar 8 at 18:54

1 Answer 1

Instead of relying only on ScreenUtil, you can determine the screen width and set font sizes accordingly.

double getResponsiveFontSize(BuildContext context, double baseSize) {
  double width = MediaQuery.of(context).size.width;

  if (width < 600) {
    return baseSize; // Mobile
  } else if (width < 1200) {
    return baseSize * 1.2; // Tablet
  } else {
    return baseSize * 1.5; // Desktop
  }
}

Text(
  "Responsive Text",
  style: TextStyle(fontSize: getResponsiveFontSize(context, 16)),
);

Use MediaQuery for Manual Scaling,