Basic Usage

This guide will walk you through the basics of using GPT Markdown in your Flutter applications.

Simple Implementation

Using GPT Markdown in your Flutter app is straightforward. Here's a simple example to get you started:

basic_example.dart
1import 'package:flutter/material.dart';
2import 'package:gpt_markdown/gpt_markdown.dart';
3
4class MarkdownDemo extends StatelessWidget {
5  const MarkdownDemo({super.key});
6
7  @override
8  Widget build(BuildContext context) {
9    return Scaffold(
10      appBar: AppBar(title: const Text('GPT Markdown Demo')),
11      body: const SingleChildScrollView(
12        padding: EdgeInsets.all(16.0),
13        child: GPTMarkdown(
14          markdownText: '''
15# Hello Markdown
16
17This is a paragraph with **bold** and *italic* text.
18
19## Lists
20
21### Unordered List
22- Item 1
23- Item 2
24- Item 3
25
26### Ordered List
271. First item
282. Second item
293. Third item
30
31## Code
32
33Inline `code` example.
34
35```dart
36void main() {
37  print('Hello, GPT Markdown!');
38}
39```
40
41## Math Expression
42
43$E = mc^2$
44
45## Blockquote
46
47> This is a blockquote
48> It can span multiple lines
49
50## Table
51
52| Header 1 | Header 2 |
53|----------|----------|
54| Cell 1   | Cell 2   |
55| Cell 3   | Cell 4   |
56
57## Task List
58
59- [x] Completed task
60- [ ] Incomplete task
61          ''',
62        ),
63      ),
64    );
65  }
66}
67

Basic Configuration

GPT Markdown provides several configuration options to customize its behavior and appearance:

basic_configuration.dart
1GPTMarkdown(
2  // Required: The Markdown text to render
3  markdownText: '# Your markdown content here',
4  
5  // Optional: Control whether to enable syntax highlighting for code blocks
6  enableSyntaxHighlighting: true,
7  
8  // Optional: Control whether to enable LaTeX rendering
9  enableLatex: true,
10  
11  // Optional: Configure the theme for syntax highlighting
12  syntaxHighlightTheme: 'dracula', // Options: 'dracula', 'github', 'monokai', etc.
13  
14  // Optional: Configure the base text style
15  textStyle: TextStyle(
16    fontSize: 16.0,
17    color: Colors.black87,
18    height: 1.5,
19  ),
20  
21  // Optional: Configure the padding around the content
22  padding: EdgeInsets.all(8.0),
23  
24  // Optional: Callback for handling link taps
25  onLinkTap: (String url) {
26    // Handle link taps here
27    launchUrl(Uri.parse(url));
28  },
29)

Working with AI Content

GPT Markdown is specially optimized for rendering content from AI models like ChatGPT and Gemini. Here's how you might use it with AI-generated content:

ai_content_example.dart
1import 'package:flutter/material.dart';
2import 'package:gpt_markdown/gpt_markdown.dart';
3import 'package:your_ai_service/ai_service.dart'; // Your AI service implementation
4
5class AIChatScreen extends StatefulWidget {
6  const AIChatScreen({super.key});
7
8  @override
9  State<AIChatScreen> createState() => _AIChatScreenState();
10}
11
12class _AIChatScreenState extends State<AIChatScreen> {
13  final TextEditingController _controller = TextEditingController();
14  String _aiResponse = '';
15  bool _loading = false;
16  
17  Future<void> _sendPrompt() async {
18    final prompt = _controller.text;
19    if (prompt.isEmpty) return;
20    
21    setState(() {
22      _loading = true;
23    });
24    
25    try {
26      // Get response from your AI service
27      final response = await AIService().getCompletion(prompt);
28      
29      setState(() {
30        _aiResponse = response;
31        _loading = false;
32      });
33    } catch (e) {
34      setState(() {
35        _aiResponse = "Error: ${e.toString()}";
36        _loading = false;
37      });
38    }
39  }
40
41  @override
42  Widget build(BuildContext context) {
43    return Scaffold(
44      appBar: AppBar(title: const Text('AI Chat')),
45      body: Column(
46        children: [
47          Expanded(
48            child: _aiResponse.isNotEmpty
49              ? SingleChildScrollView(
50                  padding: const EdgeInsets.all(16.0),
51                  child: GPTMarkdown(
52                    markdownText: _aiResponse,
53                    enableLatex: true,
54                    enableSyntaxHighlighting: true,
55                  ),
56                )
57              : const Center(
58                  child: Text('Ask something to get started'),
59                ),
60          ),
61          if (_loading)
62            const LinearProgressIndicator(),
63          Padding(
64            padding: const EdgeInsets.all(8.0),
65            child: Row(
66              children: [
67                Expanded(
68                  child: TextField(
69                    controller: _controller,
70                    decoration: const InputDecoration(
71                      hintText: 'Ask a question...',
72                      border: OutlineInputBorder(),
73                    ),
74                  ),
75                ),
76                IconButton(
77                  icon: const Icon(Icons.send),
78                  onPressed: _sendPrompt,
79                ),
80              ],
81            ),
82          ),
83        ],
84      ),
85    );
86  }
87}

Dynamic Content

You can update the markdown content dynamically. Here's an example using a StatefulWidget:

dynamic_content_example.dart
1import 'package:flutter/material.dart';
2import 'package:gpt_markdown/gpt_markdown.dart';
3
4class DynamicMarkdownDemo extends StatefulWidget {
5  const DynamicMarkdownDemo({super.key});
6
7  @override
8  State<DynamicMarkdownDemo> createState() => _DynamicMarkdownDemoState();
9}
10
11class _DynamicMarkdownDemoState extends State<DynamicMarkdownDemo> {
12  String _markdownText = '# Default Heading';
13  final TextEditingController _controller = TextEditingController();
14
15  @override
16  void initState() {
17    super.initState();
18    _controller.text = _markdownText;
19  }
20
21  @override
22  Widget build(BuildContext context) {
23    return Scaffold(
24      appBar: AppBar(title: const Text('Dynamic GPT Markdown')),
25      body: Column(
26        children: [
27          Padding(
28            padding: const EdgeInsets.all(8.0),
29            child: TextField(
30              controller: _controller,
31              maxLines: 3,
32              decoration: const InputDecoration(
33                labelText: 'Enter Markdown',
34                border: OutlineInputBorder(),
35              ),
36            ),
37          ),
38          ElevatedButton(
39            onPressed: () {
40              setState(() {
41                _markdownText = _controller.text;
42              });
43            },
44            child: const Text('Update Markdown'),
45          ),
46          const Divider(),
47          Expanded(
48            child: SingleChildScrollView(
49              padding: const EdgeInsets.all(16.0),
50              child: GPTMarkdown(
51                markdownText: _markdownText,
52              ),
53            ),
54          ),
55        ],
56      ),
57    );
58  }
59}

Best Practices

Always wrap GPTMarkdown in a SingleChildScrollView to handle overflow content.
Consider using FutureBuilder or StreamBuilder when loading markdown content from an API or database.
Implement error handling for cases where the markdown content might be malformed.
Test your implementation with different types of markdown content to ensure consistent rendering.
Use the package's theming options to match your app's design system.

Next Steps

Now that you understand the basics of using GPT Markdown, you can explore its more advanced features:

Markdown Features

Explore all the Markdown syntax features supported by the package

Learn more

LaTeX Support

Learn how to use mathematical expressions and equations

Learn more

Installation Markdown Features