Short Intro:
Math expression editing using an on-screen software keyboard or physical keyboard input in a typeset input field in Flutter.
math_keyboard is a Flutter package that allows editing math expressions using a typeset input field (so-called “math field”) and a custom-made fully integrated math keyboard in Flutter only – no plugins, no web views.
About math_keyboard
The math_keyboard package provides a widget that behaves like a Flutter TextField with the same full integration, i.e. focus tree support, input decoration support, and both an on-screen software keyboard as well as physical keyboard input support. On top of that, the math field typesetting uses TeX and the package supports converting to math expressions (that e.g. can be used for calculation).
math_keyboard is an open source project with the aim of providing a way to edit math expression providing the best user experience in terms of input and UI as well as allowing accurate evaluation of the mathematical expressions entered by the user. This is used by the simpleclub app, hence, the association. It is also maintained by simpleclub (see the LICENSE file).
Features & usage
See the package README for features and usage information.
You can also try the demo app or view the package on Pub →
Implementation
In the following, some high-level information regarding the implementation of the package is described. This is useful in case you are curious or intend to contribute.
For information on implementing math_keyboard into your own app, please see the package README.
Math expressions
Notice how the math_keyboard package includes a major feature that allows working with the input expressions in a mathematical matter, i.e. by converting them into “math expressions” (this is how we refer to the format in the context of this project).
We achieve this by essentially working with two formats:
- The typeset display format, powered by TeX (see below).
- A data format, i.e. math expressions.
This “data format” depends on the math_expressions package. Handling the expressions in this format allows you to e.g. evaluate the expressions.
TeX typesetting
Both the math field content, i.e. the expressions typed by the user, as well as some symbols on the keyboard itself are typeset using TeX. For TeX typesetting in Flutter, we created our own proof of concept renderer in early 2020, called CaTeX. This project is on-hold for now and in the meantime, we collaborated on the flutter_math package that aims to achieve something similar.
Due to lack of maintenance on that repo, we are currently using our forked version, flutter_math_fork. Note that our ultimate goal is fully integrating the math_keyboard package with the catex package, which would give us maximum control over the rendering of the typeset math.
Contributing
Our mission with open source repositories like math_keyboard in particular is creating an ecosystem of science and education related packages for Flutter, allowing users on all platforms to use the optimal tools for learning.
This is also why we want to share and collaborate on this software as a way to give back to the community. Any contributions are more than welcome!
See our contributing guide for more information.
Missing features
You might notice that some features that you would expect from the math_keyboard package are missing or something is not working as expected. In that case, please file an issue.
In general, we can of course never fully solve every use case, however, especially in this case we are aware of a few shortcomings. For example the customization options of the keyboard are currently limited because this has simply not yet been a requirement in our internal usage. In that case, please consider contributing pull requests to this repo in order to allow as many use cases to be covered as possible 🙂 Please refer to the contributing guide for that.
Repo structure
The math_keyboard repository is divided into multiple packages. These packages are the following:
| Package | Content |
|---|---|
math_keyboard | Main package implementation |
math_keyboard_demo | Demo app |
Num++ inspiration
During the research phase of this project, we came across the Num++ app, which served as an inspiration for the math expression parsing part of the package.
The main difference between that app and this package (apart from one being a calculator app and the other being a generalized usable package) is the fact that Num++ uses a web view and MathQuill for editing the expression while we built the input field and editing ourselves.
Download Math expression editing software source code on GitHub
Provides the list of the opensource Flutter apps collection with GitHub repository.