[Flutter] TextScale fix (텍스트 크기 고정)

 

 

 

앱에서 이런 디자인을 작업했다고 가정하면 다른 사용자들도 사진과 같은 모습으로 보여야 합니다. 하지만 사용자 디바이스 텍스트 사이즈에 따라서 전혀 다른 디자인으로 변할 수 있습니다.

 

 

 

ex)

 

텍스트 크기 - 보통

 

 

텍스트 크기 - 작게

 

텍스트 크기 - 크게

 

 

 

이런 식으로 사용자의 디바이스 설정 텍스트 크기에 따라 텍스트 크기가 달라져서 개발한 디자인이 제대로 보이지 않을 가능성이 큽니다. 이것을 다 대응하면서 디자인을 짜는 것은 매우 많은 작업이 추가되므로 일반적으로는 앱에서 텍스트 크기를 디바이스에 따르지 않고 앱에서 따로 지정하여 해당 크기로만 보이게 작업을 합니다.

 

 

 

textScaleFactor - deprecate

          MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: const MyHomePage(),
          ),

 

MediaQuery.of(context).copyWith(textScaleFactor: 1.0) 로 설정하면 앱에서 텍스트 크기가 일반 사이즈로 고정됩니다.

 

(전체코드)

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextScale',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            width: 50,
            height: 50,
            alignment: Alignment.center,
            color: Colors.orange,
            child: Text(
              "Jutole",
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

flutter version 3.16 이후

          MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaler: TextScaler.noScaling),
            child: const MyHomePage(),
          ),

 

(전체코드)

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextScale',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaler: TextScaler.noScaling),
        child: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            width: 50,
            height: 50,
            alignment: Alignment.center,
            color: Colors.orange,
            child: Text(
              "Jutole",
            ),
          ),
        ),
      ),
    );
  }
}