Http://medium.com/ecspike/vi…

Original author: medium.com/@ecspike

Release time: July 15, 2019

A few months ago, as I reimmersed myself in Flutter, I thought: “I really love Flutter, but its declarative nature sometimes makes me confused about the location of widgets. I wonder if there’s a way to make it less cluttered.” I have a teaching background, so coding without code seemed ripe for an experimental learning project.

AppInventor intrigued me until I saw its code and interactions using a completely non-standard library. Although this is an experiment, I hope it will be based on the code that appears in a typical Flutter application. Research on AppInventor did introduce me to Blockly, a library that generates code from interlocking artifacts.

Blockly is used in many educational and amateur environments, such as Scratch, Micro: Bit, and even some Arduino applications.

www.youtube.com/watch?v=wDJ…

Google developer: Blockly

Blockly can generate JavaScript, Python, PHP, Lua, and Dart code. Blockly can be extended to other languages, but it already understands Dart, albeit with some tweaks, which is a big win.

There are many built-in blocks for common structures such as conditional statements, loops, various number operations, lists, and functions. In addition, you can use Blockly development tools to create your own blocks.

Blockly development tools: Used to create new blocks

The developer tool gives you the option to determine the input/output and how blocks are connected to other blocks. The generator stub is how the block is represented in the final code.

Flutter Blockly components

I started with a small set of Widget components, initially trying to implement the internal core of scaffolds and then expand outward to include MaterialApp and even stateless and stateful widgets.

  • Application materials
  • The scaffolding
  • AppBar
  • line
  • column
  • List view
  • icon
  • The text
  • A placeholder
  • Floating action buttons/raised buttons

Our focus is not to implement every widget, but to implement enough widgets to provide some custom functionality and keep the flow of the application easy to read.

Stateless widgets and stateful widgets

Statelesswidgets and StatefulWidgets are the first big challenges. First, they need to be classes, and Blockly isn’t built to accommodate these classes, but rather to cater to more functional styles. Second, function and variable declarations are also global by default. This is fine for a main function, but not for build(BuildContext Context) or whatever state variables are needed. For a stateless Widget, it’s not too difficult to create a component that emulates a class. This simply assigns a widget block to the Build property and extrapolates it to an appropriate build function.

Stateless widgets with a list of text widgets

Generation code for a stateless part with a list of text parts

Stateful widgets are a little trickier. Variables need to live in a class derived from State. Embedding variables within a class requires a small hack: create a new block that accepts raw code input. This is a minor misuse, as none of the Blockly knows about any variables created this way. You lose the ability to use them in larger chunks. What was raw code is always raw code.

A stateful widget represented by a Blockly block

Code generated from statefulWidgets and raw code blocks

Another headache is setState. Naturally, I created a block for it, but if you put this block in a function, it defaults to global and you get an error because it’s not a StatefulWidget. That’s where Hacker Two came from. The setState block accepts the original code and can be assigned directly to the button’s onPressed.

A block representing the StatefulWidget and State class that provides setState for the Counter App.

In this way, I can make a stateful Hello World (counter) application without a single line of code. Well, technically, three lines of code.

Here’s a video from start to finish (no audio). Empty MaterialApp and Scaffold instances have been created, and the Flutter operation has started, pointing to the Flutter project, which will receive updates from the Web application. A similar process can be implemented with Flutter Web, but some widgets cannot map 1:1 from mobile to Web.

www.youtube.com/watch?v=l4L…

Here’s what the finished application looks like in the block.

A complete representation of the counter application in a block

You can check out the code on Github.

Special thanks to Lara Martin for confirming that the idea is not entirely strange, and to Nate Ebel for proofreading and providing feedback.

www.deepl.com translation