🎯

【Flutter】端末ごとの文字サイズの設定を無効化する方法

2022/04/30に公開

Flutter

やりたいこと

iOSやAndroidでは、端末本体の設定で文字サイズを大きくしたり小さくしたりできます。
しかし、端末の文字サイズの設定でアプリを使用してしまうと、レイアウトが崩れてしまいます。
その問題を解決するために、今回は文字サイズの設定を無効化することにしました。

解決策

以下のように、MaterialAppのbuilderに文字サイズの設定を行います。MediaQuery.of(context).copyWith(textScaleFactor: 1)によって、全ての端末における文字サイズの設定を固定化しました。

MaterialApp(
      builder: (BuildContext context, Widget? child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
          child: child!,
        );
      },

全体像

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget? child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
          child: child!,
        );
      },
      home: const MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: const Center(
        child: Text('Text'),
      ),
    );
  }
}

やりたいこと

解決策

全体像

Discussion