Displaying Math symbols in Flutter

Applications of math, physics, chemistry, and other sciences are increasingly used by the popularity of mobile devices around the world. In this article, we will walk through 3 different approaches to display mathematical symbols, formulas, and equations in Flutter by using 3 different packages.

To follow this tutorial, you should know how to use Tex or LaTex. If not, take a look at these articles from Wikipedia: TeX, LaTex.Advertisements

Flutter Math

Flutter Math is pure Dart and Flutter so it provides high-performance.

Install

Installing flutter_math null safety by adding the following to the dependencies section in your pubspec.yaml file:

flutter_math: ^0.3.0-nullsafety.1

Then run this:

flutter pub get

AdvertisementsThen import it into your dart code:

import 'package:flutter_math/flutter_math.dart';

Example

The code:

DefaultTextStyle(
     style: const TextStyle(fontSize: 18, color: Colors.red),
     child: Column(
           children: [
                  Math.tex(
                      r'ihbarfrac{partial}{partial t}Psi(vec x,t) = -frac{hbar}{2m}nabla^2Psi(vec x,t)+ V(vec x)Psi(vec x,t)',
                      mathStyle: MathStyle.display),
                  const SizedBox(
                    height: 35,
                  ),
                  Math.tex(r'frac a b', mathStyle: MathStyle.text),
          ],
)),

Output:Advertisements

Flutter Tex

Flutter Text is based on web view so this plugin doesn’t work fast as the two plugins above but it is powerful and able to render so many types of equations and expressions based on LaTeX and TeX and includes full HTML with JavaScript support as well.

Install

Run this:

flutter pub add flutter_tex

Then:

flutter pub get

Extra setup steps

IOS: Add the following to your <project-root>/ios/Runner/Info.plist:

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key> <true/>
  </dict>Example
<key>io.flutter.embedded_views_preview</key> <true/> 

Android: Add these things to your <project-root>/android/app/src/main/AndroidManifest.xml file:

<application
       android_usesCleartextTraffic="true">
</application>

And permissions:

<uses-permission android_name="android.permission.INTERNET" />
    <uses-permission android_name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android_name="android.permission.WAKE_LOCK" />

Last but not least, import the plugin to your Dart code:

import 'package:flutter_tex/flutter_tex.dart'; 

Usage

Simple usage:

TeXView(
  child:  TeXViewDocument(r"""$$x = {-b pm sqrt{b^2-4ac} over 2a}.$$<br> """),
)

Flutter Tex is well documented and comes along with a lot of complex examples. You can see its official document and examples here.

Catex (Legacy)

Catex is a lightweight Flutter plugin that is written one hundred percent in Dart. It renders very quickly and has a great performance.

Install

Installing the latest version of catex by executing the command below:

flutter pub add catex

Then run:

flutter pub get

Usage

Using catex is very simple. Everything you need to do is import it into your dart code then use the CaTeX widget, like this:

CaTeX(r'sqrt{b^2 - 4ac}')

And here is the output:

If you want to style the text rendered by CaTeX, just wrap it inside a DefaultTextStyle widget.

Full Example

The code:

// main.dart
import 'package:flutter/material.dart';
import 'package:catex/catex.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: DefaultTextStyle(
              style: const TextStyle(fontSize: 35, color: Colors.purple),
              child: Column(
                children: const [
                  CaTeX(r'x = frac{-b pm sqrt{b^2 - 4ac}}{2a}'),
                  SizedBox(
                    height: 35,
                  ),
                  CaTeX(r'epsilon = frac 2 {3 + 2}')
                ],
              )),
        ));
  }
}

Screenshot:

Conclusion

This article introduced a few packages that can help us easily display Math symbols and formulas in Flutter. From here on, you can freely create math and science apps and publish them in Appstore or Google Play.

If you would like to continue learning more interesting stuff about Flutter by taking a look at the following articles: Check Internet Connection without any plugins, Load and display content from CSV files, Set an image Background for the entire screen, Flutter Transform examples – Making fancy effects, Flutter SliverList – Tutorial and Example.

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.