Giter Club home page Giter Club logo

math_keyboard's Introduction

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.

math_keyboard's People

Contributors

creativecreatorormaybenot avatar edhom avatar garv-shah avatar github-actions[bot] avatar ichordedionysos avatar millerovv avatar tomkuschka avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

math_keyboard's Issues

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

Focus in Math Field Widget not working when tapping

I am currently utilizing the MathField widget in Flutter for text input. However, unlike the conventional TextField, I have observed that tapping on the MathField does not allow for cursor movement, restricting it solely to arrow keyboard navigation. Could you kindly provide guidance on resolving this issue to enable cursor movement through both tap and arrow keyboard input in the MathField widget?

I tried to make movement courser when tapping down but I couldn't find node position from global position.

Clicking does not move the cursor

Feature description

I hope to increase the cursor click to move to the corresponding position
You can click to edit expressions, numbers, and text. You can also click to edit nested expressions.

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

Breaking change, update intl to 0.18.1.

Bug description

math_keyboard package won't run with newest flutter sdk.

see error below:

[flutter_lib_test] flutter pub get
Resolving dependencies...
Because math_keyboard >=0.0.1 depends on flutter_localizations from sdk which depends on intl 0.18.1, math_keyboard >=0.0.1 requires intl 0.18.1.
So, because flutter_lib_test depends on math_keyboard ^0.1.9 which depends on intl ^0.17.0, version solving failed.
exit code 1

To Reproduce

  1. create a flutter app on the latest Flutter 3.10 sdk.
  2. add math_keyboard: ^0.1.9 as dependency package.
  3. run flutter pub get
  4. see error.

Updating math_keyboard's intl package dependency to 0.18.1 should solve the issue.

Add text-align

Feature description

In standard Material textfields, you can add a textAlign property. The InputDecoration class doesn't have this ability, and thus neither does this widget. It would be very helpful for styling this widget if we could further style the content inside it. Thank you!

Pasting to math field

Feature description

In the demo when I copied from a math input I wanted to paste it back in an math input field.

Ideally, copying to a math input field would insert it where my cursor is right now.

So when I am in a fraction's denominator everything in my pasteboard would be copied into the fraction's denominator!

Move cursor using pointer input

Feature description

Your documentation and examples have no examples where you can touch the input. How difficult would this be to implement with your underlying widgets?

How can i convert 10{cm}^{2} with TeXParser???

Bug description

I wanna covert 10{cm}^{2} to Latex. but When i use _mathController.updateValue(TeXParser('10{cm}^{2}').parse());, UI show like this

IMG_0004

To Reproduce

Steps to reproduce the behavior:
0. Use '...'
0. Run on '....'
0. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Combination of Math Expression with actual alphabets

Feature description

Hi Simpleclub, many thanks for this flutter plugin. Kudos to the team.

I noticed that the keyboard has only Mathematics characters/letter. I would like to know if there future possibilities of having the Math's expressions and regular characters (A - Z) on the same form field?. For example: Enabling users to type: "Find the value of X in the {equation}". Currently, I can only input the equation without "Find the value of X in the"

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

break change 0.1.8 -> 0.1.9

Bug description

../../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/math_keyboard-0.1.9/lib/src/widgets/math_field.dart:338:25: Error: Method 'insert' cannot be called on 'OverlayState?' because it is potentially null.
 - 'OverlayState' is from 'package:flutter/src/widgets/overlay.dart' ('../../../../development/flutter/packages/flutter/lib/src/widgets/overlay.dart').
Try calling using ?. instead.
    Overlay.of(context).insert(_overlayEntry!);
                        ^^^^^^

Info

i use flutter 3.0.5
math_keyboard: 0.1.8 -> working
math_keyboard: 0.1.9 -> error

please revoke 0.1.9 version and change the version number to 0.2.x to avoid break change issue

Problems with .addLeaf()

Bug description

When trying to add fractions into the mathtextfield they end up giving a parser error after trying to edit

To Reproduce

Steps to reproduce the behavior:
_mathController.addLeaf(r"\frac{1");
_mathController.addLeaf("2");
_mathController.addLeaf("}{3");
_mathController.addLeaf("4");
_mathController.addLeaf("}");
_mathController.addLeaf("");

try editing the fraction using the math keyboard.

Expected behavior

It would be great if you could add fractions into the mathfield by using addLeaf(). Maybe I'm just not looking in the right places for this functionality.

"Parser Error: Expected '}', got 'EOF' makes sense since I'm deleting the bracket, but how do I make the fraction editable in the mathtextfield?

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

please add = button as well

Feature description

please add = button as well because in some conditions we have to check is both sides are equal or not
A clear and concise description of your new feature.

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

Autoscroll math field back to starting position

Bug description

I can't goBack() cursor back to starting position

To Reproduce

Steps to reproduce the behavior:

  1. I input full text of MathField

image

  1. I input some characters to hide some of characters at start position

image

  1. Then, I use PreviousButton that move cursor to start position

image

  1. But I can't move cursor to start position

image

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.