Flutter中如何合理设置字体大小？ThemeData设置存在适配难题

针对你遇到的ThemeData中无法通过MediaQuery获取context来适配字体大小的问题，下面是几种常用的落地方案：

方案一：使用ThemeExtension封装适配逻辑 #

通过自定义ThemeExtension，把基于屏幕尺寸计算的字体大小逻辑封装进去，既保留Theme的全局配置能力，又能实现适配。

步骤1：定义自定义ThemeExtension #

import 'package:flutter/material.dart';

class AppTextSizes extends ThemeExtension<AppTextSizes> {
  final double displayLarge;
  final double displayMedium;

  AppTextSizes({
    required this.displayLarge,
    required this.displayMedium,
  });

  @override
  ThemeExtension<AppTextSizes> copyWith({
    double? displayLarge,
    double? displayMedium,
  }) {
    return AppTextSizes(
      displayLarge: displayLarge ?? this.displayLarge,
      displayMedium: displayMedium ?? this.displayMedium,
    );
  }

  @override
  ThemeExtension<AppTextSizes> lerp(
      ThemeExtension<AppTextSizes>? other, double t) {
    if (other is! AppTextSizes) return this;
    return AppTextSizes(
      displayLarge: lerpDouble(displayLarge, other.displayLarge, t)!,
      displayMedium: lerpDouble(displayMedium, other.displayMedium, t)!,
    );
  }
}

步骤2：在MaterialApp中初始化ThemeData时传入扩展 #

MaterialApp(
  home: Builder(
    builder: (context) {
      final screenWidth = MediaQuery.of(context).size.width;
      return const YourHomePage();
    },
  ),
  theme: ThemeData(
    extensions: [
      AppTextSizes(
        displayLarge: screenWidth * 0.065, // 根据需求调整比例
        displayMedium: screenWidth * 0.045,
      ),
    ],
    textTheme: const TextTheme(
      displayLarge: TextStyle(
        color: Colors.black,
        letterSpacing: 4,
      ),
      displayMedium: TextStyle(
        color: Colors.black,
        letterSpacing: 2,
      ),
    ),
  ),
);

步骤3：在组件中使用 #

Text(
  "大标题",
  style: Theme.of(context).textTheme.displayLarge?.copyWith(
        fontSize: Theme.of(context).extension<AppTextSizes>()?.displayLarge,
      ),
);

方案二：提前初始化全局尺寸工具类 #

在APP启动时先获取屏幕尺寸，存入全局工具类，之后在ThemeData或任何地方直接调用。

步骤1：定义全局工具类 #

import 'package:flutter/material.dart';

class ScreenUtils {
  static late double screenWidth;
  static late double screenHeight;

  static void init(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    screenWidth = mediaQuery.size.width;
    screenHeight = mediaQuery.size.height;
  }
}

步骤2：在APP入口初始化 #

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          ScreenUtils.init(context);
          return const HomePage();
        },
      ),
      theme: ThemeData(
        textTheme: TextTheme(
          displayLarge: TextStyle(
            color: Colors.black,
            letterSpacing: 4,
            fontSize: ScreenUtils.screenWidth * 0.065,
          ),
          displayMedium: TextStyle(
            color: Colors.black,
            letterSpacing: 2,
            fontSize: ScreenUtils.screenWidth * 0.045,
          ),
        ),
      ),
    );
  }
}

方案三：利用系统TextScaleFactor适配 #

Flutter自带的TextScaleFactor可以根据系统字体缩放设置自动调整，结合固定字号兼顾适配和用户偏好：

Text(
  "示例文本",
  style: Theme.of(context).textTheme.displayLarge?.copyWith(
        fontSize: 25,
      ),
);

默认情况下Text会自动应用系统缩放，若需自定义缩放比例，可手动设置：

Text(
  "示例文本",
  style: Theme.of(context).textTheme.displayLarge?.copyWith(
        fontSize: 25 * MediaQuery.of(context).textScaleFactor,
      ),
);

方案四：基于设计稿的比例适配 #

以设计稿基准宽度（如375px）为参考，计算适配系数：

// 设计稿基准宽度
const double designWidth = 375;

// 封装适配方法
double getAdaptiveFontSize(BuildContext context, double designFontSize) {
  final screenWidth = MediaQuery.of(context).size.width;
  return designFontSize * (screenWidth / designWidth);
}

// 使用示例
Text(
  "示例文本",
  style: Theme.of(context).textTheme.displayLarge?.copyWith(
        fontSize: getAdaptiveFontSize(context, 25),
      ),
);

内容的提问来源于stack exchange，提问作者sub