شاید برای شما هم پیش امده باشد که هنگام اجرای یک برنامه روی شبیه ساز و گوشی واقعی موبایل متوجه تفاوت اندازه فونت‌ها شده باشید. مثلا سایز روی گوشی بسیار بزرگتر از شبیه ساز نمایش داده میشود.

به عنوان مثال در شبیه ساز با این اندازه‌ها دیده میشود.

ولی در گوشی با این اندازه

برای متناسب بودن در تمام گوشی‌ها راهکار چیست؟

کافی است در فایل main.dart یک متغیر سراسری با نام textScale ایجاد کنید.

double textScale = 1.0;

سپس در کلاس MyApp این متغیر را با توجه به textScaleFactorOf مربوط به MediaQuery مجددا تنظیم کنید.

textScale = 1/ MediaQuery.textScaleFactorOf(context).toDouble();

سپس هر کجا از عدد ثابتی برای fontSize استفاده میکنید ، مقدار textScale را در آن ضرب نمایید. به عنوان مثال در تم:

bodyText2: Constant.defaultStyle2.copyWith(
     fontSize: 20 * textScale,
     fontWeight: FontWeight.w400,
),
 subtitle1: Constant.defaultStyle2.copyWith(
     fontSize: 18 * textScale,
     fontWeight: FontWeight.w400,
 ),

حال باید یک کلاس به نام Config ایجاد کنید. و سازنده MyApp را در آن فراخوانی نمایید.

class Config extends StatelessWidget {
  const Config({Key? key}) : super(key: key);
   // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyApp());
  }
}

در متد main سازنده این کلاس را فراخوانی کنید.

void main() {
  runApp(const Config());
}

حال با اجرای مجدد مشاهده میکنید که برنامه به درستی در گوشی هم نمایش داده میشود.

پس به طور کلی کد‌ها به صورت زیر خواهند بود.

double textScale = 1.0;
void main() {
  runApp(const Config());
}
class Config extends StatelessWidget {
  const Config({Key? key}) : super(key: key);
   // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyApp());
  }
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    textScale = 1 / MediaQuery.textScaleFactorOf(context).toDouble();
    return MaterialApp(
      title: 'Medic',
      theme: ThemeData(
          fontFamily: Constant.defaultStyle2.fontFamily,
          colorScheme: const ColorScheme.dark(
            ...
          ),
          textTheme: TextTheme(
            headline3: Constant.defaultStyle1.copyWith(
              fontSize: 35 * textScale,
              fontWeight: FontWeight.w500,
              color: Colors.white,
            ), ...));
}

البته راه حل‌های دیگری نیز وجود دارد. همچون استفاده از عرض صفحه نمایش و تنظیم فونت با استفاده از آن.

چنانچه راه حل بهتری وجود دارد لطفا در ادامه این تاپیک بیان نمایید.

سپاسگزارم