gpt_markdown 1.1.7

Powerful Flutter Markdown & LaTeX Renderer: Rich Text, Math, Tables, Links, and Text Selection. Ideal for ChatGPT, Gemini, and more.

example/example.md

gpt_markdown example

Run flutter run inside the example/ directory to see the interactive demo.

main.dart

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

void main() => runApp(const MyApp());

const _demoContent = r'''
# GPT Markdown Demo

**Bold**, *italic*, ~~strikethrough~~, and `inline code` all work out of the box.

[Visit pub.dev](https://pub.dev/packages/gpt_markdown "gpt_markdown on pub.dev")

> Block quotes are great for AI-generated citations.

---

### Unordered list

- Flutter
- Dart
- gpt_markdown

### Ordered list

1. Install the package
2. Pass your markdown string
3. Done ✅

### LaTeX

Inline: \(E = mc^2\) and display:

\[
\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
\]

### Table

| Feature     | Supported |
|-------------|-----------|
| Markdown    | ✅        |
| LaTeX       | ✅        |
| Code blocks | ✅        |
| Tables      | ✅        |
| Links       | ✅        |

### Task list

- [x] Install gpt_markdown
- [x] Render AI responses beautifully
- [ ] Ship to production
''';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GPT Markdown Demo',
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.blue,
        extensions: [GptMarkdownThemeData(brightness: Brightness.light)],
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blue,
        extensions: [GptMarkdownThemeData(brightness: Brightness.dark)],
      ),
      home: const DemoPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GPT Markdown')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: GptMarkdown(
          _demoContent,
          onLinkTap: (url, title) => debugPrint('Link tapped: $url'),
        ),
      ),
    );
  }
}

Code blocks

Fenced code blocks with language tags are syntax-highlighted automatically:

```python
def greet(name: str) -> str:
    return f"Hello, {name}!"
```

Theme customisation

Wrap with GptMarkdownTheme to override colours:

GptMarkdownTheme(
  gptThemeData: GptMarkdownThemeData(
    brightness: Brightness.light,
    linkColor: Colors.blue,
    highlightColor: Colors.amber,
  ),
  child: GptMarkdown(markdownContent),
)

Text selection

Wrap with Flutter's built-in SelectionArea to enable text selection on desktop and web:

SelectionArea(
  child: GptMarkdown(markdownContent),
)

Custom table builder

GptMarkdown(
  markdownContent,
  tableBuilder: (context, tableRows, textStyle, config) {
    return Table(
      border: TableBorder.all(color: Colors.grey),
      children: tableRows.map((row) {
        return TableRow(
          decoration: row.isHeader
              ? const BoxDecoration(color: Color(0xFFEEEEEE))
              : null,
          children: row.fields
              .map((cell) => Padding(
                    padding: const EdgeInsets.all(8),
                    child: Text(cell.data, textAlign: cell.alignment),
                  ))
              .toList(),
        );
      }).toList(),
    );
  },
)

See the README and the live playground.