equation_highlighter 0.1.0

A Flutter package to highlight, format, and tokenize mathematical equations.

example/lib/main.dart

import 'package:equation_highlighter/equation_highlighter.dart';
import 'package:equation_highlighter/mock_equations.dart';
import 'package:equation_highlighter/src/themes.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Equation Highlighter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const EquationViewer(title: 'Equation Highlighter'),
    );
  }
}

class EquationViewer extends StatefulWidget {
  const EquationViewer({super.key, required this.title});

  final String title;

  @override
  State<EquationViewer> createState() => _EquationViewerState();
}

class _EquationViewerState extends State<EquationViewer> {
  int _currentIndex = 0;

  void _nextEquation() {
    if (equations.isEmpty) return;
    setState(() {
      _currentIndex = (_currentIndex + 1) % equations.length;
    });
  }

  void _previousEquation() {
    if (equations.isEmpty) return;
    setState(() {
      _currentIndex = (_currentIndex - 1 + equations.length) % equations.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    final String currentEquation =
        equations.isEmpty ? "No equations available" : equations[_currentIndex];

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.grey.shade100,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(color: Colors.grey.shade300),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.05),
                      blurRadius: 8,
                      offset: const Offset(0, 2),
                    ),
                  ],
                ),
                constraints: const BoxConstraints(minWidth: 100, maxWidth: 800),
                child: EquationHighlighter(
                  currentEquation,
                  styleConfig: atomOneLightTheme,
                ),
              ),
              const SizedBox(height: 30),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: _previousEquation,
                    child: const Text('Previous'),
                  ),
                  const SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: _nextEquation,
                    child: const Text('Next Equation'),
                  ),
                ],
              ),
              const SizedBox(height: 10),
              Text(
                '${_currentIndex + 1} / ${equations.length}',
                style: Theme.of(context).textTheme.bodySmall,
              ),
            ],
          ),
        ),
      ),
    );
  }
}