Flutter中不使用RichText Widget实现动态文本的粗体、斜体、下划线及超链接

要实现类似StackOverflow、Trello的文本编辑效果，核心思路是用Markdown语法解析渲染——用户输入Markdown格式的文本，通过第三方库直接转化为带样式的富文本，完全不用手动拼接RichText组件，高效又省心。

具体实现步骤 #

1. 引入Markdown解析库
   推荐使用flutter_markdown，这是Flutter生态中成熟的Markdown渲染库，支持绝大多数Markdown语法，包括粗体、斜体、下划线、超链接等。
   在pubspec.yaml中添加依赖：

   dependencies:
     flutter_markdown: ^0.6.17+1 # 版本号以最新官方为准
   

2. 构建编辑+预览界面
   做一个类似StackOverflow的上下布局界面：上方是输入框让用户写Markdown，下方实时渲染效果。示例代码如下：

   import 'package:flutter/material.dart';
   import 'package:flutter_markdown/flutter_markdown.dart';
   
   class MarkdownEditorPage extends StatefulWidget {
     const MarkdownEditorPage({super.key});
   
     @override
     State<MarkdownEditorPage> createState() => _MarkdownEditorPageState();
   }
   
   class _MarkdownEditorPageState extends State<MarkdownEditorPage> {
     final TextEditingController _controller = TextEditingController(
       text: '**这是粗体**\n*这是斜体*\n__这是下划线__\n[这是超链接](https://example.com)',
     );
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Markdown编辑器')),
         body: Column(
           children: [
             // 输入区域
             Expanded(
               child: TextField(
                 controller: _controller,
                 maxLines: null,
                 expands: true,
                 decoration: const InputDecoration(
                   hintText: '输入Markdown文本...',
                   border: OutlineInputBorder(),
                   contentPadding: EdgeInsets.all(16),
                 ),
                 onChanged: (value) => setState(() {}),
               ),
             ),
             const Divider(height: 1),
             // 预览区域
             Expanded(
               child: Markdown(
                 data: _controller.text,
                 styleSheet: MarkdownStyleSheet(
                   // 自定义样式，比如超链接颜色
                   link: const TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
                   strong: const TextStyle(fontWeight: FontWeight.bold),
                   em: const TextStyle(fontStyle: FontStyle.italic),
                   underline: const TextStyle(decoration: TextDecoration.underline),
                 ),
                 // 处理超链接点击
                 onTapLink: (text, href, title) {
                   if (href != null) {
                     // 这里可以用url_launcher打开链接
                     // launchUrl(Uri.parse(href));
                     debugPrint('点击链接：$href');
                   }
                 },
               ),
             ),
           ],
         ),
       );
     }
   }
   

3. 补充功能优化

   • 可以给输入框添加快捷按钮（比如粗体、斜体按钮），点击后自动在光标位置插入对应的Markdown语法，提升用户体验；
   • 如果需要支持更多复杂样式（比如列表、代码块），flutter_markdown也原生支持，不用额外开发；
   • 超链接点击需要配合url_launcher库实现跳转，记得在pubspec中添加该依赖，并处理iOS/Android的权限配置。

效果说明 #

用户输入的Markdown文本会被实时渲染：

• **内容** → 粗体
• *内容* → 斜体
• __内容__ → 下划线
• [显示文本](链接地址) → 可点击的超链接
  完全匹配StackOverflow和Trello的编辑体验，且全程不需要手动使用RichText组件。

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