A couple months ago when re-immersing myself in Flutter, I thought, “I really like Flutter but its declarative nature sometimes gets me confused on what Widgets go where, I wonder if there’s a way to make it less confusing.” I come from a teaching background so it seemed ripe for an experimental learning project to code without code.

AppInventor piqued my interest a bit, until I saw it uses a totally non-standard library for its code and interactions. Even though it’s an experiment, I wanted it to be grounded in code that would appear in a typical Flutter app. Looking into AppInventor did clue me in to Blockly, a library to generate code with interlocking building blocks.

Blockly is used in a lot of educational and hobbyist environments like Scratch, micro:bit, and even some Arduino applications.

Google Developers:Blockly

Blockly can generate JavaScript, Python, PHP, Lua, and Dart code. Blockly is extensible to other languages but having it already understand Dart, albeit with some needed tweaks, is a big win.

There are a number of built-in blocks for common constructs like conditional statements, loops, various numeric operations, lists, and functions. For anything beyond that, you can create your own blocks using the Blockly Developer Tools.

Blockly Developer Tools: used to create new blocks

The developer tools give you options to determine inputs/outputs and how the blocks will link with others. The generator stub is how that block will represent itself in final code.

Flutter Blockly Components

I started with a small set of Widget components initially trying to implement the inner core of a Scaffold before moving outward to encompass MaterialApp and even Stateless and Stateful widgets.

- MaterialApp

- Scaffold

- AppBar

- Row

- Column

- ListView

- Icon

- Text

- Placeholder

- FloatingActionButton / RaisedButton

The focus was less on trying to implement every single widget but to implement ENOUGH to give some customization and keep the app flow easy to read.

StatelessWidget and StatefulWidget

StatelessWidget and StatefulWidget were the first big challenge. First, they need to be classes which Blockly isn’t built to accommodate, aligning to a more functional style. Second, functions and variable declarations also default to being global. That’s great for a main function, not so much for a build(BuildContext context) or whatever needed state variables.

Building out a component to model a class wasn’t too difficult for a StatelessWidget. It’s a matter of assigning a block of widgets to the build property and extrapolate that into a proper build function.

A Stateless widget with a Column of Text widgets

The generated code for a StatelessWidget with a Column of Text widgets

StatefulWidgets were a little bit trickier. The variables need to live inside the class derived from State. Inlining variables inside a class required a minor hack: creating a new block that would take raw code input. This is a minor misuse because any Blockly doesn’t know about any variable created this way. You lose the ability to use them in larger blocks. Once raw code, always raw code.

A Stateful widget represented in Blockly blocks