Skip to main content

Flutter Difference Between fontSize and textScaleFactor

While working in Flutter I have faced two different type of text size formatting options fontSize and textScaleFactor. They both works almost same and do the work of increase and decreasing the text size. But what is the major difference between both of them.

Flutter Difference Between fontSize and textScaleFactor:

  • fontSize : Font size is basically applied on each component individually so it works as single component value.
  • textScaleFactor : Text scale factor in flutter is used for accessibility. It works as a Text zoom functionality. By changing text scale factor value from one side we can change the whole app text scale. It controls from mobile app accessibility menu. Where after changing the font size it will automatically increase the font size as per scale in flutter app.

Code Explanation:

  • We are using MediaQuery.of(context).textScaleFactor at the app run time which gives us the text scale factor in double format of current device. After that we will set this device scale factor into our app on text widget.
Complete source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double scaleFactor = MediaQuery.of(context).textScaleFactor;
    return MaterialApp(
      home: Scaffold(
          body: SafeArea(
              child: Center(
        child: Text(
          'Flutter Text Scale Factor Example',
          style: const TextStyle(fontSize: 30),
          textScaleFactor: scaleFactor,
        ),
      ))),
    );
  }
}
Screenshot of app:
Flutter Difference Between fontSize and textScaleFactor

Comments