Smart Content Viewer #

A comprehensive Flutter widget for rendering educational content with LaTeX formulas, math graphs, statistical charts, physics diagrams, and chemistry diagrams. No WebView required.

Features #

Math & Formulas #

• ✅ Native LaTeX rendering using flutter_math_fork
• ✅ Inline formulas: $E = mc^2$
• ✅ Block formulas: $$\frac{a}{b}$$
• ✅ Function graphs: [graph: f(x)=x^2, x=-5..5, y=-10..10]
• ✅ Multi-curve graphs: [graph: f(x)=sin(x), g(x)=cos(x)]

Statistical Charts #

• ✅ Bar charts: [bar: A:10, B:20, C:15]
• ✅ Pie charts: [pie: Category1:30, Category2:40, Category3:30]
• ✅ Line charts: [line: 2020:100, 2021:150, 2022:200]
• ✅ Histograms: [histogram: 0-10:5, 10-20:12, 20-30:8]

Physics Diagrams #

• ✅ Forces on slope: [forces: angle:30, mass:5, friction:0.3]
• ✅ Projectile motion: [projectile: v0:20, angle:45]
• ✅ Pendulum: [pendulum: length:1, angle:30]
• ✅ Spring oscillator: [spring: k:100, extension:0.1]
• ✅ Electric circuits: [circuit: voltage:12, resistance:100]
• ✅ Energy diagrams: [energy: ep:50, ec:30]
• ✅ Vector addition: [vectors: v1:3,4, v2:-2,5]
• ✅ Optical lenses: [lens: f:10, object:30]

Chemistry Diagrams #

• ✅ Molecules: [molecule: formula:H2O]
• ✅ Lewis structures: [lewis: element:O, electrons:6]
• ✅ Benzene ring: [benzene: hydrogens:true]
• ✅ Reactions: [reaction: reactants:H2+O2, products:H2O]
• ✅ Organic chains: [organic: carbons:4, type:alkane]
• ✅ Crystal structures: [crystal: type:nacl]
• ✅ Molecular orbitals: [orbital: type:sigma]

Other Features #

• ✅ Images: <img src="..."> with caching
• ✅ Links: <a href="..."> clickable
• ✅ HTML tags: Full support for headings, lists, tables
• ✅ Accessibility: Screen reader support
• ✅ Error handling: Graceful degradation

Installation #

Add to your pubspec.yaml:

dependencies:
  smart_content_viewer: ^1.0.0

Quick Start #

import 'package:smart_content_viewer/smart_content_viewer.dart';

// Math content with formulas and graphs
MathContentViewer(
  htmlContent: '''
    <h2>Quadratic Function</h2>
    <p>The function $f(x) = ax^2 + bx + c$ has roots at:</p>
    $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

    <h3>Graph</h3>
    [graph: f(x)=x^2-4*x+3, x=-1..5, y=-2..10]

    <h3>Distribution</h3>
    [bar: A:25, B:40, C:35]
  ''',
)

// Statistical chart widget
StatisticalChartViewer(
  chartType: ChartType.bar,
  data: 'Paris:2161, Marseille:862, Lyon:516',
  title: 'Population (thousands)',
)

// Physics diagram widget
PhysicsDiagramViewer(
  diagramType: PhysicsDiagramType.forces,
  parameters: 'angle:30, mass:5, friction:0.3',
)

// Chemistry diagram widget
ChemistryDiagramViewer(
  diagramType: ChemistryDiagramType.molecule,
  parameters: 'formula:H2O',
)

AI Content Generation #

This package includes an AI protocol for generating content. See AI_CONTENT_PROTOCOL.md for the complete syntax guide that can be used with any AI (Claude, GPT, etc.) to generate properly formatted educational content.

Example: Bac Math Correction #

MathContentViewer(
  htmlContent: '''
    <h2>Exercise: Study of f(x) = x³ - 3x + 2</h2>

    <h3>1. Derivative</h3>
    <p>The function f is differentiable on $\mathbb{R}$.</p>
    $$f'(x) = 3x^2 - 3 = 3(x-1)(x+1)$$

    <h3>2. Variation Table</h3>
    <table border="1">
      <tr><th>x</th><th>$-\infty$</th><th>-1</th><th>1</th><th>$+\infty$</th></tr>
      <tr><td>$f'(x)$</td><td>+</td><td>0</td><td>0</td><td>+</td></tr>
      <tr><td>$f(x)$</td><td>$-\infty$</td><td><b>4</b></td><td><b>0</b></td><td>$+\infty$</td></tr>
    </table>

    <h3>3. Graph</h3>
    [graph: f(x)=x^3-3*x+2, x=-3..3, y=-5..8]
  ''',
)

Supported Syntax #

License #

MIT License - See LICENSE