Flutter中使用base.copyWith()为TextTheme添加自定义属性字段的方法

下面提供两种常用的落地方式，都可以完美兼容你现有的TextTheme配置逻辑：

方案1：Dart扩展实现（轻量无侵入，最推荐） #

不用修改Flutter原生源码，也不需要调整你已有的Theme配置，直接通过Dart的扩展语法给TextTheme新增自定义属性即可：

1. 定义扩展

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

extension CustomTextStyle on TextTheme {
  // 自定义链接文本样式
  TextStyle get linkText => GoogleFonts.lato(fontSize: 20, color: Colors.blue);
  // 后续新增其他样式直接加对应getter即可
  TextStyle get tipText => GoogleFonts.lato(fontSize: 13, color: Colors.grey[600]);
  TextStyle get buttonText => GoogleFonts.lato(fontSize: 18, fontWeight: FontWeight.w500);
}

2. 调用方式和原生TextTheme属性完全一致：

Text(
  "用户协议",
  style: Theme.of(context).textTheme.linkText,
)

方案2：ThemeExtension实现（适合多主题切换的中大型项目） #

如果你的自定义样式需要支持深浅色模式切换、主题切换过渡动画，可以使用Flutter官方提供的ThemeExtension能力：

1. 定义自定义样式扩展类

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

@immutable
class AppTextExtension extends ThemeExtension<AppTextExtension> {
  // 所有自定义文本样式在这里定义
  final TextStyle linkText;
  final TextStyle tipText;
  final TextStyle buttonText;

  const AppTextExtension({
    required this.linkText,
    required this.tipText,
    required this.buttonText,
  });

  @override
  AppTextExtension copyWith({
    TextStyle? linkText,
    TextStyle? tipText,
    TextStyle? buttonText,
  }) {
    return AppTextExtension(
      linkText: linkText ?? this.linkText,
      tipText: tipText ?? this.tipText,
      buttonText: buttonText ?? this.buttonText,
    );
  }

  @override
  AppTextExtension lerp(ThemeExtension<AppTextExtension>? other, double t) {
    if (other is! AppTextExtension) return this;
    return AppTextExtension(
      linkText: TextStyle.lerp(linkText, other.linkText, t)!,
      tipText: TextStyle.lerp(tipText, other.tipText, t)!,
      buttonText: TextStyle.lerp(buttonText, other.buttonText, t)!,
    );
  }

  // 默认样式配置，也可以根据传入的基础TextTheme生成适配不同平台的默认值
  static AppTextExtension defaultConfig = AppTextExtension(
    linkText: GoogleFonts.lato(fontSize: 20, color: Colors.blue),
    tipText: GoogleFonts.lato(fontSize: 13, color: Colors.grey[600]),
    buttonText: GoogleFonts.lato(fontSize: 18, fontWeight: FontWeight.w500),
  );
}

2. 将扩展配置加入你现有的ThemeData中：

ThemeData _basicTheme(ThemeData base) {
  return base.copyWith(
    textTheme: _basicTextTheme(base.textTheme),
    // 注册自定义文本扩展
    extensions: [AppTextExtension.defaultConfig],
    // 其余原有主题配置保持不变
  );
}

3. 调用方式：

Text(
  "用户协议",
  style: Theme.of(context).extension<AppTextExtension>()!.linkText,
)

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