flutter_ai_chat_markdown 0.1.1

A rich markdown renderer for Flutter AI chat apps. Supports streaming, math (LaTeX), chemistry (mhchem), biology sequences, charts, syntax highlighting, and full theming.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_ai_chat_markdown/flutter_ai_chat_markdown.dart';
import 'screens/demo_screen.dart';
import 'screens/chat_screen.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDark = false;

  @override
  Widget build(BuildContext context) {
    final mdTheme =
        _isDark ? MarkdownTheme.chatGptDark : MarkdownTheme.chatGptLight;

    return MarkdownThemeScope(
      theme: mdTheme,
      child: MaterialApp(
        title: 'flutter_ai_chat_markdown Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorSchemeSeed: const Color(0xFF0066CC),
          brightness: Brightness.light,
          useMaterial3: true,
        ),
        darkTheme: ThemeData(
          colorSchemeSeed: const Color(0xFF58A6FF),
          brightness: Brightness.dark,
          useMaterial3: true,
        ),
        themeMode: _isDark ? ThemeMode.dark : ThemeMode.light,
        home: _HomeScreen(
          isDark: _isDark,
          onToggleTheme: () => setState(() => _isDark = !_isDark),
        ),
      ),
    );
  }
}

class _HomeScreen extends StatelessWidget {
  final bool isDark;
  final VoidCallback onToggleTheme;

  const _HomeScreen({required this.isDark, required this.onToggleTheme});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_ai_chat_markdown'),
        actions: [
          IconButton(
            icon: Icon(isDark ? Icons.light_mode : Icons.dark_mode),
            onPressed: onToggleTheme,
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          _NavCard(
            icon: Icons.article_outlined,
            title: 'Demo Screen',
            subtitle: 'All block types rendered',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const DemoScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _NavCard(
            icon: Icons.chat_bubble_outline,
            title: 'Chat Screen',
            subtitle: 'Streaming simulation with AI responses',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const ChatScreen()),
            ),
          ),
        ],
      ),
    );
  }
}

class _NavCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;

  const _NavCard({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        leading: Icon(icon, size: 32),
        title: Text(title, style: const TextStyle(fontWeight: FontWeight.w600)),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.chevron_right),
        onTap: onTap,
      ),
    );
  }
}