Embedding jQuery QueryBuilder in flutter/flutter-web
jQuery QueryBuilder
jQuery QueryBuilder is a plugin written for user friendly query or filter creation, on web-apps. Refer the figure below:
While building a dashboard in flutter web, at Nuclei we needed some widget in flutter equivalent to the above mentioned builder. Having mentioned that, we did not find any default similar widget in flutter and creating a query builder widget in flutter in less time was quite complex.
Somehow, after some research, the technology team at Nuclei came across this wonderful jQuery QueryBuilder, and we started contemplating on exploiting the same builder to its fullest by integrating with flutter-web.
The simple reason behind the idea was, that the web understands the jQuery well, and what if we are able to use IFrameElement widget in flutter to render the jQuery embedded in some html file?
And guess what? That was possible! Thats the beauty of flutter. ❤
How do we integrate it with Flutter Web?
Lets follow along with the baby steps to achieve this:
Get your html file ready, as below
Put your html file in your assets folder of flutter application or module
Add assets to your pubspec.yaml as below
Create a wrapper flutter widget (JqueryBuilderWidget) enclosing the IframeElement with your html file path as src and HtmlElementView for loading and rendering your Iframe.
The JqueryBuilderWidget can also accept a map of basic rules to initialise the queryBuilder with initial rules, a map of filters for initial config, and a callback function which would return the updated rules json string, if some rules got updated on the iframe.
To know more on rules/filters click here.
Sorted.
Now should be able to access the jQuery builder as it is without any problems, as a flutter widget. Yay ! 😁
Support with 👏 if you liked the article.
Looking forward to sharing more such findings and explorations in flutter, in the upcoming ones.
Until then, Bye. 👋
