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

Overview

math_keyboard logo

math_keyboard Flutter web demo math_keyboard on Pub

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 → math_keyboard Flutter web demo math_keyboard 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.

Comments
  • Bumped Petitparser Version

    Bumped Petitparser Version

    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
  • SC-4183 convertMathExpressionToTeXNode does not keep parentheses

    SC-4183 convertMathExpressionToTeXNode does not keep parentheses

    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
  • Incompatible with Flutter SVG

    Incompatible with Flutter SVG

    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
  • Cursor update SC-4607

    Cursor update SC-4607

    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
  • Update flutter_math_fork

    Update flutter_math_fork

    Description

    This updates flutter_math_fork to the latest version.

    Related issues & PRs

    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
  • update flutter math

    update flutter math

    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
  • Added symbols icon and fraction key to second page

    Added symbols icon and fraction key to second page

    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 | |---|---| |image|image|

    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
  • Fix comma style

    Fix comma style

    Description

    Previously, the comma styling looked like this:

    Screen Shot 2021-03-20 at 12 50 52

    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
  • Clean Flutter 3.0.x warnings

    Clean Flutter 3.0.x warnings

    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
  • Implicit times between parentheses

    Implicit times between parentheses

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

    0.1.1

    Description

    Update version and add description to changelog

    Related issues & PRs

    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

    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: Code_Pbf3y60e7d

    Code_Kr4Wn0SeOP

    Code_UY4ab2n0IQ

    Code_uA9rspSxjP

    Code_KjWr6FUvBp

    Code_qdmSoacKuN

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

    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.

    Immagine 2022-08-15 055735

    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.

    Immagine 2022-08-15 060122 Immagine 2022-08-15 060207

    bug 
    opened by Francesco-FL 1
  • Why does buildTeXString have a cursorColor property?

    Why does buildTeXString have a cursorColor property?

    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

    No cursorColor attribute, loading back in without changes

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

    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

    math_keyboard

    bug 
    opened by Kumah1 6
  • Unnecessary parentheses added by `convertMathExpressionToTeXNode`

    Unnecessary parentheses added by `convertMathExpressionToTeXNode`

    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
Releases(math_keyboard-v0.1.6)
Owner
simpleclub
Germany's most popular digital learning platform. Personalised learning, powered by the best content. For 1M+ people.
simpleclub
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

Ismael Shakverdiev 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

Lomio 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

Behruz Hurramov 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

Adrian Flutur 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% 还原设计稿

CxmyDev 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.

Success Charles 27 Aug 20, 2022
Clone Project twitter mobile login screen

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

Guilherme Lino 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:/

null 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

Rafael Tozzo 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

AmirHossein Bayat 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

Pawan Kumar 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

Akash Srivastava 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

LibertyGlobal 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

Ihab Zaidi 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

Trần Văn Nguyên 1 Nov 15, 2021
App-flutter-travel-app - Travel App Built Using Flutter

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

Sangvaleap Vanny 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

Rois Khoiron 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

Pawan Kumar 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

Dao Hong Vinh 25 Sep 16, 2022