Flutter中如何返回带加粗/着色格式的响应文本？

在Flutter里，纯字符串无法直接携带样式信息，你需要改用富文本组件或返回带样式标记的结构，才能实现文字加粗、变色效果。下面提供两种实用方案：

方案一：原生TextSpan实现（无额外依赖） #

修改getResponse函数，让它返回List<TextSpan>，每个TextSpan可单独设置字体粗细、颜色等样式：

import 'package:flutter/material.dart';

List<TextSpan> getResponse(String selectedOption) {
  if (selectedOption.toLowerCase().contains("5 secret rules")) {
    return [
      TextSpan(text: "5 ", style: TextStyle(color: Colors.black)),
      TextSpan(text: "secret rules", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue)),
      TextSpan(text: " to be successful", style: TextStyle(color: Colors.black)),
    ];
  } else if (selectedOption.toLowerCase().contains("life")) {
    return [
      TextSpan(text: "The meaning of ", style: TextStyle(color: Colors.black)),
      TextSpan(text: "life", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.redAccent)),
      TextSpan(text: ".", style: TextStyle(color: Colors.black)),
    ];
  } else if (selectedOption.toLowerCase().contains("joke")) {
    return [
      TextSpan(text: "Why don't scientists trust atoms? ", style: TextStyle(color: Colors.black)),
      TextSpan(text: "Because they make up everything.", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green)),
    ];
  } else {
    return [
      TextSpan(text: "I'm sorry, ", style: TextStyle(color: Colors.black)),
      TextSpan(text: "I didn't understand that.", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.orange)),
      TextSpan(text: " Can you please try again?", style: TextStyle(color: Colors.black)),
    ];
  }
}

在UI中渲染： #

用RichText组件加载这些TextSpan：

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style, // 继承页面默认文本样式
    children: getResponse(selectedOption),
  ),
)

方案二：Markdown语法实现（适合复杂文本） #

如果你的样式需求较多，可借助flutter_markdown包，用Markdown标记快速定义样式：

1. 先在pubspec.yaml添加依赖：

dependencies:
  flutter_markdown: ^0.6.17

2. 修改getResponse返回带Markdown标记的字符串：

String getResponse(String selectedOption) {
  if (selectedOption.toLowerCase().contains("5 secret rules")) {
    return "5 **secret rules** to be successful";
  } else if (selectedOption.toLowerCase().contains("life")) {
    return "The meaning of **life**.";
  } else if (selectedOption.toLowerCase().contains("joke")) {
    return "Why don't scientists trust atoms? **Because they make up everything.**";
  } else {
    return "I'm sorry, **I didn't understand that.** Can you please try again?";
  }
}

在UI中渲染： #

用MarkdownBody组件解析并显示：

import 'package:flutter_markdown/flutter_markdown.dart';

MarkdownBody(
  data: getResponse(selectedOption),
  styleSheet: MarkdownStyleSheet(
    // 自定义加粗文本样式
    strong: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
  ),
)

两种方案各有优劣：原生TextSpan更灵活，适合精准控制每个文本片段的样式；Markdown方式更简洁，适合需要大量格式的场景。

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