Flutter中如何动态设置Text Widget的样式？

1. 修正style.dart的语法错误 #

原style.dart存在两处语法问题，先修正：

• Dart变量类型区分大小写，需把textStyle改为TextStyle
• TextStyle构造函数需使用小括号()，而非大括号{}

修正后的style.dart代码：

import 'package:flutter/material.dart';

final TextStyle income = TextStyle(
  color: Colors.blue,
  fontSize: 24,
);

final TextStyle expense = TextStyle(
  color: Colors.red,
  fontSize: 24,
);

2. 构建样式映射实现动态匹配 #

在使用Text组件的页面，先导入style.dart，然后创建一个字符串与样式的映射表，根据Firestore返回的type值动态获取对应样式：

import 'style.dart';

// 假设已从Firestore获取到数据
Map<String, dynamic> data = {"amount": "3000", "type": "income"};

// 建立type与样式的映射
final Map<String, TextStyle> typeStyleMap = {
  'income': income,
  'expense': expense,
};

// 正确使用Text组件
Text(
  '\$${data['amount']}', // 修正原字符串的语法错误，补全闭合引号并规范格式
  style: typeStyleMap[data['type']] ?? TextStyle(), // 增加默认样式避免null异常
)

额外注意点 #

• 原Text组件的字符串写法存在语法错误，'$ : ${data['amount']'缺少闭合引号，且$符号无需空格，调整为'\$${data['amount']}'更规范
• 加入?? TextStyle()是为了处理data['type']不在映射范围内的情况，保证程序健壮性

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