Flutter Markdown解析插件gpt_markdown的使用

📦 GPT Markdown & LaTeX for Flutter

这是一个全面的Flutter包，用于在您的应用程序中渲染丰富的Markdown和LaTeX内容，专为与ChatGPT和Gemini等AI输出无缝集成而设计。

⭐ 如果您觉得这个包很有帮助，请在 pub.dev 上给它点赞！您的支持非常重要！ ⭐

Supported Markdown & LaTeX Features

✨ Key Features

• List
  • Unordered list item
  • Ordered list item

• Horizontal line

• Links text here
• Images with size
• Table

  Name	Roll
  sohag	1

• Striked text striked text
• Bold text Bold text
• Italic text Italic text
• Heading texts

  Heading 1

  Heading 2

  Heading 3

  Heading 4

  Heading 5

  Heading 6

• Latex formula (\frac a b) or [\frac ab]
• Radio button and checkbox () Unchecked radio (x) Checked radio [] Unchecked checkbox [x] Checked checkbox
• Selectable Content 使用 SelectionArea widget 可以使内容可选

🚀 Why Use GPT Markdown?

• Optimized for AI Outputs: 完美渲染ChatGPT和Gemini的响应。
• Rich Customization: 使用Flutter widgets如 TextStyle 轻松应用自定义样式。
• Selectable Content: 使用 SelectionArea 启用内容选择。
• Seamless Integration: 开箱即用，设置简单。

🛠️ Getting Started

运行以下命令添加包：

flutter pub add gpt_markdown

📖 Usage

以下是使用 gpt_markdown 的完整示例代码：

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                AnimatedBuilder(
                  animation: _controller,
                  builder: (context, _) {
                    return GptMarkdown(
                      _controller.text,
                      style: const TextStyle(
                        color: Colors.red,
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
          ConstrainedBox(
            constraints: const BoxConstraints(maxHeight: 300),
            child: TextField(
              decoration: const InputDecoration(border: OutlineInputBorder()),
              maxLines: null,
              controller: _controller,
            ),
          ),
        ],
      ),
    );
  }
}

Output from gpt_markdown

💡 ChatGPT Response Examples

ChatGPT Response

Welcome to ChatGPT! Below is an example of a response with Markdown and LaTeX code:

Markdown Example

You can use Markdown to format text easily. Here are some examples:

• Bold Text: This text is bold
• Italic Text: This text is italicized
• Link: This is a link
• Lists:
  1. Item 1
  2. Item 2
  3. Item 3

LaTeX Example

You can also use LaTeX for mathematical expressions. Here’s an example:

• Equation: ( f(x) = x^2 + 2x + 1 )
• Integral: ( \int_{0}^{1} x^2 , dx )
• Matrix:

[ \begin{bmatrix} 1 & 2 & 3 \ 4 & 5 & 6 \ 7 & 8 & 9 \end{bmatrix} ]

Conclusion

Markdown and LaTeX can be powerful tools for formatting text and mathematical expressions in your Flutter app. If you have any questions or need further assistance, feel free to ask!

---

## 🔗 Additional Information

您可以在这里找到源代码：[GitHub](https://github.com/Infinitix-LLC/gpt_markdown)

更多详细信息请参阅 [README.md](https://github.com/Infinitix-LLC/gpt_markdown) 和 [example](https://github.com/Infinitix-LLC/gpt_markdown/tree/main/example/lib/main.dart) 应用程序。