Flutter中格式化Gemini AI返回的带星号标记文本实现标题放大

核心思路 #

解析Gemini返回的文本，识别被**包裹的标题内容，将其渲染为大字号样式，其余内容保持默认排版。

实现方案 #

方法1：手动解析文本并拼接Widget #

直接拆分文本行，识别双星号标记的标题，分别用不同样式的Text组件组合，适合格式规则统一的场景。

示例代码：

import 'package:flutter/material.dart';

class GeminiTextRenderer extends StatelessWidget {
  final String geminiText;

  const GeminiTextRenderer({super.key, required this.geminiText});

  @override
  Widget build(BuildContext context) {
    final lines = geminiText.split('\n');
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: lines.map((line) {
        // 匹配首尾带双星号的标题行
        if (line.startsWith('**') && line.endsWith('**')) {
          final title = line.substring(2, line.length - 2);
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              title,
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          );
        } else if (line.isNotEmpty) {
          // 渲染普通内容行
          return Padding(
            padding: const EdgeInsets.only(bottom: 4.0),
            child: Text(
              line,
              style: const TextStyle(fontSize: 16),
            ),
          );
        } else {
          // 空行保留间距
          return const SizedBox(height: 8);
        }
      }).toList(),
    );
  }
}

// 使用示例
// GeminiTextRenderer(
//   geminiText: """**Knowledge and Information:**

// **Answer questions:** Provide factual information and knowledge on a wide range of topics.
// **Summarize text:** Extract and condense key points from written content.
// **Translate languages:** Convert text between different languages.
// **Generate text:** Create original text, such as stories, articles, and poems.
// **Calculate and convert:** Perform mathematical operations and convert units.""",
// )

方法2：借助Markdown渲染库 #

使用flutter_markdown库直接解析Markdown格式，自动处理双星号的加粗样式，同时支持扩展其他Markdown格式。

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter_markdown: ^0.6.17+1

2. 实现代码：

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

class GeminiMarkdownRenderer extends StatelessWidget {
  final String geminiText;

  const GeminiMarkdownRenderer({super.key, required this.geminiText});

  @override
  Widget build(BuildContext context) {
    return Markdown(
      data: geminiText,
      styleSheet: MarkdownStyleSheet(
        // 自定义加粗文本（对应双星号内容）的字号和样式
        strong: const TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
        // 设置普通文本样式
        p: const TextStyle(fontSize: 16),
      ),
    );
  }
}

注意事项 #

• 手动解析适合格式严格统一的场景，性能更优；若Gemini返回的文本包含复杂Markdown格式，推荐使用flutter_markdown库。
• 可根据需求调整字号、间距等样式参数，适配不同页面的设计规范。

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