gpt_markdown 1.0.6 gpt_markdown: ^1.0.6 copied to clipboard
Powerful Markdown & LaTeX Renderer for Flutter: Rich Text, Math, Tables, Links, and Text Selection. Ideal for ChatGPT, Gemini, and more.
example #
import 'package:flutter/material.dart';
import 'package:tex_markdown/tex_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,
),
),
],
),
);
}
}
copied to clipboard
Use SelectableAdapter
to make any non selectable widget selectable.
SelectableAdapter(
selectedText: 'sin(x^2)',
child: Math.tex('sin(x^2)'),
);
copied to clipboard
Use GptMarkdownTheme
widget and GptMarkdownThemeData
to customize the GptMarkdown.
GptMarkdownTheme(
data: GptMarkdownThemeData.of(context).copyWith(
highlightColor: Colors.red,
),
child: GptMarkdown(
text,
),
);
copied to clipboard
In theme extension you can use GptMarkdownThemeData
to customize the GptMarkdown.
theme: ThemeData(
useMaterial3: true,
brightness: Brightness.light,
colorSchemeSeed: Colors.blue,
extensions: [
GptMarkdownThemeData(
brightness: Brightness.light,
highlightColor: Colors.red,
),
],
),
darkTheme: ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
colorSchemeSeed: Colors.blue,
extensions: [
GptMarkdownThemeData(
brightness: Brightness.dark,
highlightColor: Colors.red,
),
],
),
copied to clipboard
Please see the README.md and also example app for more details.