How to export blocks as Dart code for Flutter?

General Discussion
1

Hi - I’m looking to reuse the blocks from my AI2 project to build a cross-platform app with Flutter.

Is it possible to export app inventor blocks as code in another language, ideally Dart?

I know that by right-clicking in the blocks editor it’s possible to save all blocks as a PNG image file with meta data that can be read/imported back into AI2. If someone knows of a corresponding editor / import tool that would accept the PNG file that could work, too.

Google’s Blockly editor lets you convert blocks to JavaScript, Python, PHP, Lua or Dart.

P.S: As an aside and perhaps for another thread, even better would be to build Flutter or React Native apps with visual programming instead of having to learn Dart. Found this attempt…

1 Like
2

Go and try this out, enter DART in the dropdown menu on the top-left side.
And as you you want to reuse your blocks, one way you can do this is by following the same steps and doing the same things that you did to create the blocks that you have right now.

P.S. I think that’s what you are asking and my reply is helpful to you. :wink:

3

I had this idea too at some point, but didn't get it to work. I thought it would be really cool to do the programming in blockly and then feed the result of the dart generator into the new Flutter Dartpad. What's still missing, is a compiler, though

1 Like
4

Hi iamx - yes that would work. However, the key of my question is the reuse bit. I have 3326 blocks in AI2 right now.

If I have to recreate everything anyway I will probably “just” learn Dart. Ultimately, knowing the language will probably pay back. And my son said he would join me, nice bonding :slight_smile:

Cheers

5

@schmphil…Yeah I think to learn dart would be the best way for you then​:grinning: And yes let me tell you that dart itself is not very difficult to learn. Have a great time :grinning:

6

This is definitely not as trivial as it might sound. First, App Inventor has more blocks than Blockly’s demo platform, so you would first have to write generator code that would convert those additional blocks to Dart. Second, you also would need to write code to convert all of the components in the designer view into Dart/Flutter. For Android, we have the components library, written in Java, that interacts with the underlying Android framework widgets. The library provides a level of abstraction that allows us to account for differences in behavior across Android versions and device models. You may end up needing to build something similar in Dart. Presumably, Flutter takes care of all of this for you, but maybe not.

3 Likes
7

Thanks, I suspected AI2’s custom blocks would be the first hurdle.

Can I export the blocks as Java somehow? That could be a start and perhaps a Java to Dart transpiler could generate a first version…

8

I would like to see that aswell, but I think the situation is hopeless as AI uses Kawa internally and doesn’t really output Java code. There is a AI to Java bridge, but I think it isn’t maintained anymore. The App Inventor specific blocks make it extra difficult, as @ewpatton mentioned, but what I meant was a completely new platform to write Flutter apps with Blockly