Math expression editing using an on-screen software keyboard or physical keyboard input in a typeset input field in Flutter.

Related tags

Example Apps dart tex math flutter
Overview

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.

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:

• 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!

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.

Description

Bumps the version of a dependency, petitparser

Related issues & PRs

Fix to https://github.com/simpleclub/math_keyboard/issues/35

Checklist

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] All required checks pass.
opened by garv-shah 7

Description

Adds parentheses for binary operators, when converting a math_expression to a tex ast. Adds special cases for pi and e when converting a math_expression to a tex ast. Removes the leading zero from an unary minus when converting tex into a math_expression.

Related issues & PRs

https://simpleclub.atlassian.net/browse/SC-4183

Checklist

Remove If [...] items that do not apply to your PR.

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by edhom 5

Bug description

The package seems to be incompatible with Flutter SVG, as the dependency for petitparser is out of date, set to ^4.0.2

To Reproduce

Steps to reproduce the behaviour:

1. Install math_keyboard
2. Install flutter_svg
3. Try to run app and observe error

Expected behavior

For both packages to work together

Error Log

Because math_keyboard >=0.0.1 depends on petitparser ^4.0.2 and xml >=5.4.0 depends on petitparser ^5.0.0, math_keyboard >=0.0.1 is incompatible with xml >=5.4.0.
And because flutter_svg 1.1.1+1 depends on xml ^6.0.1 and no versions of flutter_svg match >1.1.1+1 <2.0.0, math_keyboard >=0.0.1 is incompatible with flutter_svg ^1.1.1+1.
So, because app_name depends on both flutter_svg ^1.1.1+1 and math_keyboard ^0.1.6, version solving failed.
pub get failed (1; So, because app_name depends on both flutter_svg ^1.1.1+1 and math_keyboard ^0.1.6, version solving failed.)

bug
opened by garv-shah 4

Description

• Use an updated version of flutter_math_fork 0.6.2 that introduces CursorNode and \cursor function
• Replace Cursor implementation via | symbol with \cursor
• Updated empty field offset dx from -4 to -1, since \cursor has smaller horizontal paddings

Related issues & PRs

https://simpleclub.atlassian.net/browse/SC-4607

Checklist

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by millerovv 3

Description

This updates flutter_math_fork to the latest version.

n/a

Checklist

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by edhom 1

Description

Updates flutter_math_fork to the latest version.

Checklist

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by edhom 1

Description

This PR adds a new icon for the symbols page and a fraction button to the second page of the keyboard

| New icon for symbols | Fraction button | |---|---| |||

Checklist

Remove If [...] items that do not apply to your PR.

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [ ] All required checks pass.
opened by tomkuschka 1

Description

Previously, the comma styling looked like this:

This PR removes the padding and makes it look proper.

Checklist

Remove If [...] items that do not apply to your PR.

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by creativecreatorormaybenot 1

Description

Removes unnecessary nullability check warnings after Flutter 3.0.x upgrade.

Checklist

Remove If [...] items that do not apply to your PR.

• [x] I added a PR description.
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] All required checks pass.
opened by millerovv 0

Description

The TexParser did not consider an implicit times between a closing and an opening parenthesis. Examples for such cases:

• (1-x)(1+x)
• \\frac{1}{2}(25)
• e^{x}(1+x)

Checklist

Remove If [...] items that do not apply to your PR.

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by edhom 0

Description

Update version and add description to changelog

n/a

Checklist

Remove If [...] items that do not apply to your PR.

• [x] I have made myself familiar with the CaTeX contributing guide.
• [x] I added a PR description.
• [x] I linked all related issues and PRs I could find (no links if there are none).
• [x] If this PR changes anything about the main math_keyboard or example package (also README etc.), I created an entry in CHANGELOG.md (## UPCOMING RELEASE if the change on its own is not worth an update).
• [x] If this PR includes a notable change in the math_keyboard package, I updated the version according to Dart's semantic versioning.
• [x] If there is new functionality in code, I added tests covering all my additions.
• [x] All required checks pass.
opened by edhom 0
• Error when I want to convert a math problem to an expression

Hello and thank you first of all that you have put so much effort into the package and make it available to us.

Actually everything works very well, I only have a single problem. To help you understand the problem, maybe I should briefly describe my situation: I am currently working on a math app and get a LaTeX string result, which I would like to edit with your package. So as soon as a MathField is created, I want to give it a MathFieldEditingController and change the value with mathFieldEditingController.updateValue('...'); with my LaTeX value when initializing the class. This all works very well, if I take the examples from your or the math_expressions package.

But if I want to take the LaTeX string from me and convert it to an expression I always get an error. I tried it with the TeXParser('...').parse();, as well as the Expression expression = parser.parse('...'); method. I also tried several times to transform the string somehow so that the expression can be created, however it did not work.

Of course it could be that I don't understand the method somehow, but can someone help me and tell me how to put the LaTeX string from me into your MathField?

Here you also have a few examples with the values and the exceptions that occurred, so that you understand even better what exactly I mean:

bug
opened by musiolmarco 1
• Parentheses with \left and \right

When I was writing, using normal parentheses, if I entered internal fractions, the parenthesis was visibly small and not beautiful.

So I tried to change the normal parenthesis to \left or \right, but each needs the other, and when the user writes the expression starting with opening the parenthesis '\left(' the system fails because it does not find the \right.

So I tried to create a button for myself, in order to create both the \left (and the \right) and let the user type in between. However, I'm not sure how to set it up, I've tried several cases but I don't understand how to do it or if it's possible.

bug
opened by Francesco-FL 1

Bug description

node.buildTeXString() seems to have a cursorColor property, but it really shouldn't need one. All it does is append something like \textcolor{#000000}{\cursor} to the end of tex string, and it seems to break loading it back into the MathField document

To Reproduce

Steps to reproduce the behavior: Get a MathFieldEditingController and call .currentNode.buildTexString() and try to load the string back in

Expected behavior

bug
opened by garv-shah 1
• A RenderLine overflowed by 1.5 pixels on the right.

I am using math_keyboard in my app, when it opens and i want to navigate to more keys like square root and the like the log() give an error like this

======== Exception caught by rendering library ===================================================== The following assertion was thrown during layout: A RenderLine overflowed by 1.5 pixels on the right.

The relevant error-causing widget was: MaterialApp MaterialApp:file:///D:/PROGRAMMING/AndroidStudioProjects/learnmath/lib/src/app.dart:28:16 The edge of the RenderLine that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderLine.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderLine to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

So this means the log() needs more paint. I am debugging on infinix Hot S3 ( x573) to be precise.

Please how should I solve this?

Screenshots

bug
opened by Kumah1 6

Bug description

when I need to set '{a}+{b}' to MathFieldEditingController, the convertMathExpressionToTeXNode add '()' to the expression, which it shouldn't.

To Reproduce

Steps to reproduce the behavior:

1. run the following code with debug , then you will see the node has 5 leaves, the start and the end leaf are '(', ')'
final node=convertMathExpressionToTeXNode(Parser().parse('{a}+{b}'));


Expected behavior

simple expression should not wrap with '()', '()' is only required when a lower priority expression as part of higher priority expression, like plus/minus expression as part of times expression

Screenshots

none

enhancement
opened by taojoe 2

• math_keyboard-v0.0.1+2(Mar 17, 2021)

simpleclub
Germany's most popular digital learning platform. Personalised learning, powered by the best content. For 1M+ people.
A simple and lightweight math library, that can parse and calculate string expressions.

Documentation Create local instance of expression parser. final ExpressionParser expressionParser = ExpressionParser(); Then you can calculate your "s

14 Sep 26, 2022
Flutter Sound Editing App - Midia App

Flutter Sound Editing App - Midia App I uploaded on youtube!! Thanks to Watch And Thanks to Subscribe!!! Introduction I'm working on a project to laun

3 Nov 1, 2021
A mobile travel app is a software application that has been developed specifically for use on smaller devices

A mobile travel app is a software application that has been developed specifically for use on smaller devices, such as smartphones and tablets, and can be used by business travellers to book and manage their travel whilst on the move

4 Apr 27, 2022
Attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling.

An attempt to implement better scrolling for Flutter Web and Desktop. Includes keyboard, MButton and custom mouse wheel scrolling. Getting started Exa

35 Aug 20, 2022
🔥 A low-cost Flutter screen adaptation solution (类似今日头条屏幕适配方案，一个极低成本的 Flutter 屏幕适配方案)。

screen_autosize ?? A low-cost Flutter screen adaptation solution (参考今日头条 Android 屏幕适配方案的实现原理，实现的一个极低成本的 Flutter 屏幕适配方案)。 Flutter 屏幕适配方案，可做到 100% 还原设计稿

36 Aug 29, 2022
A two screen video call app built with flutter with the help of jitsi plugin

flutter_video_call A new Flutter application. Getting Started This project is a starting point for a Flutter application.

27 Aug 20, 2022

Layout How to Use First of all, correctly configure the Flutter development environment on your machine, see https://flutter.dev/docs/get-started/inst

0 Feb 13, 2022
Play Tic-Tac-Toe by clicking on the screen to fill the white spaces

tic_tac_toe Tic-Tac-Toe Description: Play Tic-Tac-Toe by clicking on the screen to fill the white spaces with red for X and green for 0. Demo: https:/

1 Apr 16, 2022
The objective is to create a simple app using Dart/Flutter, for make a REST API integration with Flutter, using free JSON API

ListView Builder App The objective is to create a simple app using Dart/Flutter, for make a REST API integration with Flutter, using free JSON API: ht

1 Aug 25, 2022
Whats-App-Clone-UI-using-Flutter - WhatsApp Clone UI using Flutter

WhatsApp ?? Clone UI ?? using Flutter ?? Screenshots Links My Socials Youtube ch

5 Aug 14, 2022
Flutter App using the stack overflow questions api which we made using django.

Flutter StackOverflow App Flutter StackOverflow App using the stack overflow questions api which we made using django. Show some ❤️ and star the repo

196 Sep 7, 2022
A simple recipe showing application made using Flutter , using card Views MaterialPageRoute etc.

recipes A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

1 Oct 31, 2021
Flutter demo application for Apple TV (tvos) using custom Flutter engine

Flutter for Apple TV A modification of the Flutter engine + test application to demonstrate that Flutter applications run on Apple TV This project (an

173 Sep 21, 2022
Flutter Coronavirus covid19 statistic App using Flutter widgets + bloc + rest api

Intro Corona virus ( covid 19 ) Statistic App on Flutter. The tech used: Flutter widgets + Flutter Bloc / Cubit + Rest Api Check the screenshot : P.S

8 Mar 13, 2022
A flutter app for beginners when using flutter and Dart packages to speed up development

xylophone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

1 Nov 15, 2021
App-flutter-travel-app - Travel App Built Using Flutter

App-flutter-travel-app - Travel App Built Using Flutter

69 Sep 25, 2022
Flutter Chat Socket - using Flutter for develop a realtime chat app

Flutter Chat Socket - using Flutter for develop a realtime chat app

2 Apr 22, 2022
Cryptocurrency App with MVP Design Pattern to track all the coins data in realtime for android & iOS . Written in dart using Flutter SDK.

Flutter CryptoCurrency App (MVP) Cryptocurrency App with MVP design pattern to track all the coins data in realtime for android & iOS . Written in dar

285 Sep 12, 2022
🚀 This is mobile application using Flutter for develop a pizza store

Flutter Pizza Hut ?? Description: ?? This is mobile application using Flutter for develop a pizza store ?? Factory Method Create Enum product_type.dar

25 Sep 16, 2022