Flutter中如何实现代码与普通文本区分显示的样式？

完全可以实现，下面是几种实用方案，覆盖不同场景需求：

1. 基础富文本实现（Inline 代码） #

如果只是需要在普通文本中插入小段代码，用RichText组件就能搞定，自定义代码段的样式（比如等宽字体、背景色）：

RichText(
  text: TextSpan(
    // 继承默认文本样式
    style: DefaultTextStyle.of(context).style,
    children: const [
      TextSpan(text: '当你需要更新UI时，调用'),
      TextSpan(
        text: ' setState(() {}) ',
        style: TextStyle(
          fontFamily: 'Courier', // 等宽字体
          backgroundColor: Color(0xFFF5F5F5), // 浅灰背景
          color: Color(0xFFD32F2F), // 代码文本色
        ),
      ),
      TextSpan(text: '即可触发组件重建'),
    ],
  ),
)

2. 可选中的富文本 #

如果需要支持文本选中复制，用SelectableText.rich替代RichText，用法完全一致：

SelectableText.rich(
  TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: [
      const TextSpan(text: '初始化项目的入口方法是'),
      TextSpan(
        text: ' void main() ',
        style: TextStyle(
          fontFamily: 'Monospace',
          backgroundColor: Colors.grey[200],
        ),
      ),
      const TextSpan(text: '，在这里启动你的Flutter应用'),
    ],
  ),
)

3. 大段代码块/Markdown解析 #

如果你的内容本身是Markdown格式，或者需要展示大段代码，用flutter_markdown包会更省心——它自动解析代码块，自带样式甚至支持语法高亮：

首先在pubspec.yaml添加依赖：

dependencies:
  flutter_markdown: ^0.6.17+1

然后使用MarkdownBody组件：

MarkdownBody(
  data: '''
这是一段普通文本，下面是完整的代码块：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('示例')),
      ),
    );
  }
}

''',
// 可选：配置语法高亮
syntaxHighlighter: DartSyntaxHighlighter(),
)

## 4. 自定义可复用组件
如果项目中频繁用到代码样式，封装一个`CodeText`组件可以减少重复代码：

```dart
class CodeText extends StatelessWidget {
  final String content;
  final TextStyle? customStyle;

  const CodeText(this.content, {super.key, this.customStyle});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(
        content,
        style: customStyle ?? TextStyle(
          fontFamily: 'Courier New',
          fontSize: 14,
          color: Colors.blueGrey[800],
        ),
      ),
    );
  }
}

使用时直接和普通文本组合：

Row(
  children: const [
    Text('导入包：'),
    SizedBox(width: 4),
    CodeText('import \'package:flutter/material.dart\';'),
  ],
)

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